From b103fc272a7113b00b6094701dc9481f484f6777 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Thu, 31 Oct 2024 22:44:39 -0700
Subject: [PATCH 1/4] feat(dashboards and charts): editable tiles | slottable
 menu items

- add new edit-tile event to dashboard renderer
- forward go to explore to analytics chart through tile definition
- add new editable property to tile definition that will add an "edit" item to
the analytics chart kebab menu. Clicking on edit, will emit an @edit-tile event
with the entire GridTile<T> object containing the tile layout, definition and index
---
 .../src/components/AnalyticsChart.vue         |  8 ++-
 .../sandbox/pages/RendererDemo.vue            |  9 ++-
 .../src/components/BarChartRenderer.vue       | 43 +++----------
 .../components/BaseAnalyticsChartRenderer.vue | 62 +++++++++++++++++++
 .../src/components/DashboardRenderer.vue      |  9 +++
 .../src/components/DashboardTile.vue          | 10 +++
 .../src/components/GoldenSignalsRenderer.vue  | 30 +++++----
 .../components/TimeseriesChartRenderer.vue    | 50 +++------------
 .../dashboard-renderer/src/locales/en.json    |  3 +-
 .../src/types/dashboard-renderer-types.ts     | 12 ++++
 10 files changed, 148 insertions(+), 88 deletions(-)
 create mode 100644 packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
index 6cf40329ff..01fd31f79e 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -68,6 +68,7 @@
               {{ i18n.t('csvExport.exportButton') }}
             </span>
           </KDropdownItem>
+          <slot name="menu-items" />
         </template>
       </KDropdown>
       <!-- Keep outside of dropdown, so we can independently affect its visibility -->
@@ -230,6 +231,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showMenu: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -361,7 +367,7 @@ const showChartHeader = computed(() => {
   return (hasValidChartData.value && resultSetTruncated.value && maxEntitiesShown.value) || props.chartTitle || (props.allowCsvExport && hasValidChartData.value)
 })
 
-const hasMenuOptions = computed(() => (props.allowCsvExport && hasValidChartData.value) || !!props.goToExplore)
+const hasMenuOptions = computed(() => (props.allowCsvExport && hasValidChartData.value) || !!props.goToExplore || props.showMenu)
 
 const timeSeriesGranularity = computed<GranularityValues>(() => {
 
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 9b3323ebeb..e8c7ee3f14 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -13,6 +13,7 @@
         :class="{ 'custom-styling': isToggled}"
         :config="(dashboardConfig as DashboardConfig)"
         :context="context"
+        @edit-tile="onEditTile"
       >
         <template #slot-1>
           <div class="slot-container">
@@ -32,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import type { DashboardConfig, DashboardRendererContext, TileConfig } from '../../src'
+import type { DashboardConfig, DashboardRendererContext, TileConfig, TileDefinition, GridTile } from '../../src'
 import { DashboardRenderer } from '../../src'
 import { inject, ref } from 'vue'
 import { ChartMetricDisplay } from '@kong-ui-public/analytics-chart'
@@ -135,6 +136,7 @@ const dashboardConfig: DashboardConfig = {
           datasource: 'basic',
           dimensions: ['route'],
         },
+        editable: true,
       },
       layout: {
         position: {
@@ -157,6 +159,7 @@ const dashboardConfig: DashboardConfig = {
           datasource: 'basic',
           dimensions: ['time'],
         },
+        editable: true,
       },
       layout: {
         position: {
@@ -239,6 +242,10 @@ const dashboardConfig: DashboardConfig = {
 
 const isToggled = ref(false)
 
+const onEditTile = (tile: GridTile<TileDefinition>) => {
+  console.log('@edit-tile', tile)
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
index d7056ead55..e8f61df26e 100644
--- a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
@@ -1,42 +1,19 @@
+<!-- BarChartRenderer.vue -->
 <template>
-  <QueryDataProvider
-    v-slot="{ data }"
+  <BaseAnalyticsChartRenderer
+    :chart-options="chartOptions"
     :context="context"
+    :editable="editable"
+    :extra-props="{ showAnnotations: false }"
+    :height="height"
     :query="query"
     :query-ready="queryReady"
-  >
-    <div class="analytics-chart">
-      <AnalyticsChart
-        :allow-csv-export="chartOptions.allowCsvExport"
-        :chart-data="data"
-        :chart-options="options"
-        :chart-title="chartOptions.chartTitle"
-        legend-position="bottom"
-        :show-annotations="false"
-        :synthetics-data-key="chartOptions.syntheticsDataKey"
-        tooltip-title=""
-      />
-    </div>
-  </QueryDataProvider>
+  />
 </template>
+
 <script setup lang="ts">
+import BaseAnalyticsChartRenderer from './BaseAnalyticsChartRenderer.vue'
 import type { BarChartOptions, RendererProps } from '../types'
-import QueryDataProvider from './QueryDataProvider.vue'
-import { computed } from 'vue'
-import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
-import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
-
-const props = defineProps<RendererProps<BarChartOptions>>()
 
-const options = computed((): AnalyticsChartOptions => ({
-  type: props.chartOptions.type,
-  stacked: props.chartOptions.stacked,
-  chartDatasetColors: props.chartOptions.chartDatasetColors,
-}))
+defineProps<RendererProps<BarChartOptions>>()
 </script>
-
-<style scoped lang="scss">
-.analytics-chart {
-  height: v-bind('`${height}px`');
-}
-</style>
diff --git a/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
new file mode 100644
index 0000000000..059b1d7046
--- /dev/null
+++ b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
@@ -0,0 +1,62 @@
+<template>
+  <QueryDataProvider
+    v-slot="{ data }"
+    :context="context"
+    :query="query"
+    :query-ready="queryReady"
+  >
+    <div class="analytics-chart">
+      <AnalyticsChart
+        :allow-csv-export="chartOptions.allowCsvExport"
+        :chart-data="data"
+        :chart-options="options"
+        :chart-title="chartOptions.chartTitle"
+        legend-position="bottom"
+        :show-menu="editable"
+        :synthetics-data-key="chartOptions.syntheticsDataKey"
+        tooltip-title=""
+        v-bind="extraProps"
+      >
+        <template
+          v-if="editable"
+          #menu-items
+        >
+          <KDropdownItem @click="editTile">
+            {{ i18n.t('renderer.edit') }}
+          </KDropdownItem>
+        </template>
+      </AnalyticsChart>
+    </div>
+  </QueryDataProvider>
+</template>
+
+<script setup lang="ts">
+import type { RendererProps } from '../types'
+import QueryDataProvider from './QueryDataProvider.vue'
+import { computed, defineProps } from 'vue'
+import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
+import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
+import composables from '../composables'
+
+const props = defineProps<RendererProps<any> & { extraProps?: Record<string, any> }>()
+const emit = defineEmits<{
+  (e: 'edit-tile'): void
+}>()
+const { i18n } = composables.useI18n()
+
+const options = computed((): AnalyticsChartOptions => ({
+  type: props.chartOptions.type,
+  stacked: props.chartOptions.stacked ?? false,
+  chartDatasetColors: props.chartOptions.chartDatasetColors,
+}))
+
+const editTile = () => {
+  emit('edit-tile')
+}
+</script>
+
+<style scoped lang="scss">
+.analytics-chart {
+  height: v-bind('`${height}px`');
+}
+</style>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index b037b76ea0..9ba7831b04 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -26,6 +26,7 @@
           :definition="tile.meta"
           :height="tile.layout.size.rows * (config.tileHeight || DEFAULT_TILE_HEIGHT) + parseInt(KUI_SPACE_70, 10)"
           :query-ready="queryReady"
+          @edit-tile="onEditTile(tile)"
         />
       </template>
     </GridLayout>
@@ -53,6 +54,10 @@ const props = defineProps<{
   config: DashboardConfig,
 }>()
 
+const emit = defineEmits<{
+  (e: 'edit-tile', tile: GridTile<TileDefinition>): void
+}>()
+
 const { i18n } = composables.useI18n()
 
 // Note: queryBridge is not directly used by the DashboardRenderer component.  It is required by many of the
@@ -151,6 +156,10 @@ const mergedContext = computed<DashboardRendererContextInternal>(() => {
 // Right now, tiles don't have unique keys.  Perhaps in the future they will,
 // and we can use that instead of `index` as the fragment key.
 
+const onEditTile = (tile: GridTile<TileDefinition>) => {
+  emit('edit-tile', tile)
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 33ed2b86bf..76cd6a745e 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -4,6 +4,7 @@
       :is="componentData.component"
       v-if="componentData"
       v-bind="componentData.rendererProps"
+      @edit-tile="onEditTile"
     />
   </div>
 </template>
@@ -34,6 +35,10 @@ const props = withDefaults(defineProps<{
   height: DEFAULT_TILE_HEIGHT,
 })
 
+const emit = defineEmits<{
+  (e: 'edit-tile', tile: TileDefinition): void
+}>()
+
 const rendererLookup: Record<DashboardTileType, Component | undefined> = {
   'timeseries_line': TimeseriesChartRenderer,
   'horizontal_bar': BarChartRenderer,
@@ -56,9 +61,14 @@ const componentData = computed(() => {
       queryReady: props.queryReady,
       chartOptions: props.definition.chart,
       height: props.height - PADDING_SIZE * 2,
+      editable: props.definition.editable,
     },
   }
 })
+
+const onEditTile = () => {
+  emit('edit-tile', props.definition)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
index 0a594d12ab..b452055b71 100644
--- a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
@@ -46,18 +46,24 @@ const overrideTimeframe: Ref<Timeframe> = computed(() => {
   return relativePeriod
 })
 
-const options = computed<ProviderProps>(() => ({
-  datasource: props.query?.datasource,
-  overrideTimeframe: overrideTimeframe.value,
-  tz: props.context.tz,
-  additionalFilter: props.context.filters as ExploreFilter[], // TODO: Decide how to handle metric card filters.
-  longCardTitles: props.chartOptions.longCardTitles,
-  containerTitle: props.chartOptions.chartTitle,
-  description: props.chartOptions.description,
-  percentileLatency: props.chartOptions.percentileLatency,
-  refreshInterval: props.context.refreshInterval,
-  queryReady: props.queryReady,
-}))
+const options = computed<ProviderProps>(() => {
+  const datasource = props.query?.datasource
+  if (datasource && datasource !== 'advanced' && datasource !== 'basic') {
+    throw new Error(`Invalid datasource value: ${datasource}`)
+  }
+  return {
+    datasource: props.query?.datasource,
+    overrideTimeframe: overrideTimeframe.value,
+    tz: props.context.tz,
+    additionalFilter: props.context.filters as ExploreFilter[], // TODO: Decide how to handle metric card filters.
+    longCardTitles: props.chartOptions.longCardTitles,
+    containerTitle: props.chartOptions.chartTitle,
+    description: props.chartOptions.description,
+    percentileLatency: props.chartOptions.percentileLatency,
+    refreshInterval: props.context.refreshInterval,
+    queryReady: props.queryReady,
+  }
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
index b06132f240..33fd529f48 100644
--- a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
@@ -1,48 +1,18 @@
+<!-- TimeseriesChartRenderer.vue -->
 <template>
-  <QueryDataProvider
-    v-slot="{ data }"
+  <BaseAnalyticsChartRenderer
+    :chart-options="chartOptions"
     :context="context"
+    :editable="editable"
+    :height="height"
     :query="query"
     :query-ready="queryReady"
-  >
-    <div class="analytics-chart">
-      <AnalyticsChart
-        :allow-csv-export="chartOptions.allowCsvExport"
-        :chart-data="data"
-        :chart-options="options"
-        :chart-title="chartOptions.chartTitle"
-        legend-position="bottom"
-        :synthetics-data-key="chartOptions.syntheticsDataKey"
-        tooltip-title=""
-      />
-    </div>
-  </QueryDataProvider>
+  />
 </template>
-<script setup lang="ts">
-import type { RendererProps, TimeseriesChartOptions } from '../types'
-import QueryDataProvider from './QueryDataProvider.vue'
-import { computed } from 'vue'
-import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
-import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
-
-const props = defineProps<RendererProps<TimeseriesChartOptions>>()
 
-const options = computed((): AnalyticsChartOptions => {
-  // Default `stacked` to false.
-  const stacked = props.chartOptions.stacked ?? false
+<script setup lang="ts">
+import BaseAnalyticsChartRenderer from './BaseAnalyticsChartRenderer.vue'
+import type { TimeseriesChartOptions, RendererProps } from '../types'
 
-  // Note that `fill` and `stacked` are linked; it's not possible to have a non-filled stacked chart.
-  // This matches our intuitions about how these charts work.
-  return {
-    type: props.chartOptions.type,
-    stacked,
-    chartDatasetColors: props.chartOptions.chartDatasetColors,
-  }
-})
+defineProps<RendererProps<TimeseriesChartOptions>>()
 </script>
-
-<style scoped lang="scss">
-.analytics-chart {
-  height: v-bind('`${height}px`');
-}
-</style>
diff --git a/packages/analytics/dashboard-renderer/src/locales/en.json b/packages/analytics/dashboard-renderer/src/locales/en.json
index b823239c6d..b41b0e493d 100644
--- a/packages/analytics/dashboard-renderer/src/locales/en.json
+++ b/packages/analytics/dashboard-renderer/src/locales/en.json
@@ -5,7 +5,8 @@
       "24h": "Last 24-Hour Summary",
       "7d": "Last 7-Day Summary",
       "30d": "Last 30-Day Summary"
-    }
+    },
+    "edit": "Edit"
   },
   "queryDataProvider": {
     "timeRangeExceeded":  "The time range for this report is outside of your organization's data retention period"
diff --git a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
index a1fac860ce..b7f4c018cd 100644
--- a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
+++ b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
@@ -55,6 +55,14 @@ const allowCsvExport = {
   type: 'boolean',
 } as const
 
+const goToExplore = {
+  type: 'string',
+} as const
+
+const editable = {
+  type: 'boolean',
+} as const
+
 const chartDatasetColorsSchema = {
   type: ['object', 'array'],
   items: {
@@ -96,6 +104,7 @@ export const barChartSchema = {
     syntheticsDataKey,
     chartTitle,
     allowCsvExport,
+    goToExplore,
   },
   required: ['type'],
   additionalProperties: false,
@@ -117,6 +126,7 @@ export const timeseriesChartSchema = {
     syntheticsDataKey,
     chartTitle,
     allowCsvExport,
+    goToExplore,
   },
   required: ['type'],
   additionalProperties: false,
@@ -398,6 +408,7 @@ export const tileDefinitionSchema = {
     chart: {
       anyOf: [barChartSchema, gaugeChartSchema, timeseriesChartSchema, metricCardSchema, topNTableSchema, slottableSchema],
     },
+    editable,
   },
   required: ['query', 'chart'],
   additionalProperties: false,
@@ -497,4 +508,5 @@ export interface RendererProps<T> {
   queryReady: boolean
   chartOptions: T
   height: number
+  editable?: boolean
 }

From 231a753e3702a5289a7763d6e0fb207550f85cea Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Fri, 1 Nov 2024 12:54:33 -0700
Subject: [PATCH 2/4] fix: move editable to context

---
 .../dashboard-renderer/sandbox/pages/RendererDemo.vue      | 3 +--
 .../dashboard-renderer/src/components/BarChartRenderer.vue | 2 +-
 .../src/components/BaseAnalyticsChartRenderer.vue          | 4 ++--
 .../src/components/DashboardRenderer.vue                   | 7 ++++++-
 .../dashboard-renderer/src/components/DashboardTile.vue    | 2 +-
 .../src/components/TimeseriesChartRenderer.vue             | 2 +-
 .../src/types/dashboard-renderer-types.ts                  | 7 +------
 7 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index e8c7ee3f14..e603e58700 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -46,6 +46,7 @@ const appLinks: SandboxNavigationItem[] = inject('app-links', [])
 const context: DashboardRendererContext = {
   filters: [],
   refreshInterval: 0,
+  editable: true,
 }
 
 const dashboardConfig: DashboardConfig = {
@@ -136,7 +137,6 @@ const dashboardConfig: DashboardConfig = {
           datasource: 'basic',
           dimensions: ['route'],
         },
-        editable: true,
       },
       layout: {
         position: {
@@ -159,7 +159,6 @@ const dashboardConfig: DashboardConfig = {
           datasource: 'basic',
           dimensions: ['time'],
         },
-        editable: true,
       },
       layout: {
         position: {
diff --git a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
index e8f61df26e..cc87b0473f 100644
--- a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
@@ -3,7 +3,7 @@
   <BaseAnalyticsChartRenderer
     :chart-options="chartOptions"
     :context="context"
-    :editable="editable"
+    :editable="context.editable"
     :extra-props="{ showAnnotations: false }"
     :height="height"
     :query="query"
diff --git a/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
index 059b1d7046..65357da1d9 100644
--- a/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue
@@ -12,13 +12,13 @@
         :chart-options="options"
         :chart-title="chartOptions.chartTitle"
         legend-position="bottom"
-        :show-menu="editable"
+        :show-menu="context.editable"
         :synthetics-data-key="chartOptions.syntheticsDataKey"
         tooltip-title=""
         v-bind="extraProps"
       >
         <template
-          v-if="editable"
+          v-if="context.editable"
           #menu-items
         >
           <KDropdownItem @click="editTile">
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 9ba7831b04..dbd7873f72 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -134,7 +134,7 @@ const gridTiles = computed(() => {
 })
 
 const mergedContext = computed<DashboardRendererContextInternal>(() => {
-  let { tz, refreshInterval } = props.context
+  let { tz, refreshInterval, editable } = props.context
 
   if (!tz) {
     tz = (new Intl.DateTimeFormat()).resolvedOptions().timeZone
@@ -145,11 +145,16 @@ const mergedContext = computed<DashboardRendererContextInternal>(() => {
     refreshInterval = DEFAULT_TILE_REFRESH_INTERVAL_MS
   }
 
+  if (editable === undefined) {
+    editable = false
+  }
+
   return {
     ...props.context,
     tz,
     timeSpec: timeSpec.value,
     refreshInterval,
+    editable,
   }
 })
 
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 76cd6a745e..1880050861 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -61,7 +61,7 @@ const componentData = computed(() => {
       queryReady: props.queryReady,
       chartOptions: props.definition.chart,
       height: props.height - PADDING_SIZE * 2,
-      editable: props.definition.editable,
+      editable: props.context.editable,
     },
   }
 })
diff --git a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
index 33fd529f48..4db1b6eec7 100644
--- a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
@@ -3,7 +3,7 @@
   <BaseAnalyticsChartRenderer
     :chart-options="chartOptions"
     :context="context"
-    :editable="editable"
+    :editable="context.editable"
     :height="height"
     :query="query"
     :query-ready="queryReady"
diff --git a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
index b7f4c018cd..4b32b11773 100644
--- a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
+++ b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
@@ -22,6 +22,7 @@ export interface DashboardRendererContext {
   timeSpec?: TimeRangeV4
   tz?: string
   refreshInterval?: number
+  editable?: boolean
 }
 
 type FromSchemaWithOptions<T extends JSONSchema> = FromSchema<T, { keepDefaultedPropertiesOptional: true }>
@@ -59,10 +60,6 @@ const goToExplore = {
   type: 'string',
 } as const
 
-const editable = {
-  type: 'boolean',
-} as const
-
 const chartDatasetColorsSchema = {
   type: ['object', 'array'],
   items: {
@@ -408,7 +405,6 @@ export const tileDefinitionSchema = {
     chart: {
       anyOf: [barChartSchema, gaugeChartSchema, timeseriesChartSchema, metricCardSchema, topNTableSchema, slottableSchema],
     },
-    editable,
   },
   required: ['query', 'chart'],
   additionalProperties: false,
@@ -508,5 +504,4 @@ export interface RendererProps<T> {
   queryReady: boolean
   chartOptions: T
   height: number
-  editable?: boolean
 }

From 24443a57cffe1391ae16d25dea4ba8bbd7fdfeec Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Fri, 1 Nov 2024 14:50:09 -0700
Subject: [PATCH 3/4] fix: address comment

---
 .../dashboard-renderer/src/components/BarChartRenderer.vue  | 1 -
 .../src/components/TimeseriesChartRenderer.vue              | 1 -
 .../src/types/dashboard-renderer-types.ts                   | 6 ------
 3 files changed, 8 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
index cc87b0473f..b29874dd27 100644
--- a/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/BarChartRenderer.vue
@@ -3,7 +3,6 @@
   <BaseAnalyticsChartRenderer
     :chart-options="chartOptions"
     :context="context"
-    :editable="context.editable"
     :extra-props="{ showAnnotations: false }"
     :height="height"
     :query="query"
diff --git a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
index 4db1b6eec7..71c57f717f 100644
--- a/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/TimeseriesChartRenderer.vue
@@ -3,7 +3,6 @@
   <BaseAnalyticsChartRenderer
     :chart-options="chartOptions"
     :context="context"
-    :editable="context.editable"
     :height="height"
     :query="query"
     :query-ready="queryReady"
diff --git a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
index 4b32b11773..974298e930 100644
--- a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
+++ b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
@@ -56,10 +56,6 @@ const allowCsvExport = {
   type: 'boolean',
 } as const
 
-const goToExplore = {
-  type: 'string',
-} as const
-
 const chartDatasetColorsSchema = {
   type: ['object', 'array'],
   items: {
@@ -101,7 +97,6 @@ export const barChartSchema = {
     syntheticsDataKey,
     chartTitle,
     allowCsvExport,
-    goToExplore,
   },
   required: ['type'],
   additionalProperties: false,
@@ -123,7 +118,6 @@ export const timeseriesChartSchema = {
     syntheticsDataKey,
     chartTitle,
     allowCsvExport,
-    goToExplore,
   },
   required: ['type'],
   additionalProperties: false,

From fd442ec568c25664ed8e5cddff8c15f7aef2f91f Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 4 Nov 2024 10:29:05 -0800
Subject: [PATCH 4/4] fix: address comment

---
 .../dashboard-renderer/src/components/DashboardTile.vue          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 1880050861..e39eea638b 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -61,7 +61,6 @@ const componentData = computed(() => {
       queryReady: props.queryReady,
       chartOptions: props.definition.chart,
       height: props.height - PADDING_SIZE * 2,
-      editable: props.context.editable,
     },
   }
 })