feat: add new measures in summarize dialog

frontend/src2/charts/components/BarChartConfigForm.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
 import { BarChartConfig, YAxisBar } from '../../types/chart.types'
-import { Dimension } from '../../types/query.types'
-import { DimensionOption, MeasureOption } from './ChartConfigForm.vue'
+import { Dimension, DimensionOption, MeasureOption } from '../../types/query.types'
 import SplitByConfig from './SplitByConfig.vue'
 import XAxisConfig from './XAxisConfig.vue'
 import YAxisConfig from './YAxisConfig.vue'

frontend/src2/charts/components/ChartConfigForm.vue

@@ -1,13 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import InlineFormControlLabel from '../../components/InlineFormControlLabel.vue'
-import { Dimension, Measure } from '../../types/query.types'
-import { Chart } from '../chart'
-import BarChartConfigForm from './BarChartConfigForm.vue'
-import DonutChartConfigForm from './DonutChartConfigForm.vue'
-import LineChartConfigForm from './LineChartConfigForm.vue'
-import NumberChartConfigForm from './NumberChartConfigForm.vue'
-import TableChartConfigForm from './TableChartConfigForm.vue'
 import {
 	BarChartConfig,
 	DountChartConfig,
@@ -16,11 +8,17 @@ import {
 	NumberChartConfig,
 	TableChartConfig,
 } from '../../types/chart.types'
+import { DimensionOption, MeasureOption } from '../../types/query.types'
+import { Chart } from '../chart'
+import BarChartConfigForm from './BarChartConfigForm.vue'
+import DonutChartConfigForm from './DonutChartConfigForm.vue'
 import FunnelChartConfigForm from './FunnelChartConfigForm.vue'
+import LineChartConfigForm from './LineChartConfigForm.vue'
+import NumberChartConfigForm from './NumberChartConfigForm.vue'
+import TableChartConfigForm from './TableChartConfigForm.vue'
 
 const props = defineProps<{ chart: Chart }>()
 
-export type DimensionOption = Dimension & { label: string; value: string }
 const dimensions = computed<DimensionOption[]>(() => {
 	return props.chart.baseQuery.dimensions.map((dimension) => ({
 		...dimension,
@@ -29,7 +27,6 @@ const dimensions = computed<DimensionOption[]>(() => {
 	}))
 })
 
-export type MeasureOption = Measure & { label: string; value: string }
 const measures = computed<MeasureOption[]>(() => {
 	const queryMeasures = props.chart.baseQuery.measures.map((measure) => ({
 		...measure,

frontend/src2/charts/components/DonutChartConfigForm.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { FIELDTYPES } from '../../helpers/constants'
 import { DountChartConfig } from '../../types/chart.types'
-import { DimensionOption, MeasureOption } from './ChartConfigForm.vue'
+import { DimensionOption, MeasureOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import DimensionPicker from './DimensionPicker.vue'
 import MeasurePicker from './MeasurePicker.vue'

frontend/src2/charts/components/FunnelChartConfigForm.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { FIELDTYPES } from '../../helpers/constants'
 import { FunnelChartConfig } from '../../types/chart.types'
-import { DimensionOption, MeasureOption } from './ChartConfigForm.vue'
+import { DimensionOption, MeasureOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import MeasurePicker from './MeasurePicker.vue'
 

frontend/src2/charts/components/LineChartConfigForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LineChartConfig, SeriesLine, YAxisLine } from '../../types/chart.types'
-import { DimensionOption, MeasureOption } from './ChartConfigForm.vue'
+import { DimensionOption, MeasureOption } from '../../types/query.types'
 import SplitByConfig from './SplitByConfig.vue'
 import XAxisConfig from './XAxisConfig.vue'
 import YAxisConfig from './YAxisConfig.vue'

frontend/src2/charts/components/MeasurePicker.vue

@@ -3,9 +3,8 @@ import { Edit, Plus, Settings, XIcon } from 'lucide-vue-next'
 import { computed, inject, ref } from 'vue'
 import InlineFormControlLabel from '../../components/InlineFormControlLabel.vue'
 import { Query } from '../../query/query'
-import { ExpressionMeasure, Measure, aggregations } from '../../types/query.types'
+import { ExpressionMeasure, Measure, MeasureOption, aggregations } from '../../types/query.types'
 import { Chart } from '../chart'
-import { MeasureOption } from './ChartConfigForm.vue'
 import NewMeasureSelectorDialog from './NewMeasureSelectorDialog.vue'
 
 const emit = defineEmits({ remove: () => true })

frontend/src2/charts/components/NumberChartConfigForm.vue

@@ -8,7 +8,7 @@ import { copy } from '../../helpers'
 import { FIELDTYPES } from '../../helpers/constants'
 import { NumberChartConfig } from '../../types/chart.types'
 import { Dimension } from '../../types/query.types'
-import { DimensionOption, MeasureOption } from './ChartConfigForm.vue'
+import { DimensionOption, MeasureOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import DimensionPicker from './DimensionPicker.vue'
 import MeasurePicker from './MeasurePicker.vue'

frontend/src2/charts/components/TableChartConfigForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { XIcon } from 'lucide-vue-next'
 import { TableChartConfig } from '../../types/chart.types'
-import { DimensionOption, MeasureOption } from './ChartConfigForm.vue'
+import { DimensionOption, MeasureOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import { watchEffect } from 'vue'
 import DimensionPicker from './DimensionPicker.vue'

frontend/src2/charts/components/YAxisConfig.vue

@@ -6,10 +6,10 @@ import Checkbox from '../../components/Checkbox.vue'
 import DraggableList from '../../components/DraggableList.vue'
 import InlineFormControlLabel from '../../components/InlineFormControlLabel.vue'
 import { AxisChartConfig } from '../../types/chart.types'
-import { MeasureOption } from './ChartConfigForm.vue'
 import CollapsibleSection from './CollapsibleSection.vue'
 import MeasurePicker from './MeasurePicker.vue'
 import { copy } from '../../helpers'
+import { MeasureOption } from '../../types/query.types'
 
 const props = defineProps<{ measures: MeasureOption[] }>()
 const y_axis = defineModel<AxisChartConfig['y_axis']>({

frontend/src2/query/components/SummarySelectorDialog.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, watchEffect } from 'vue'
+import DimensionPicker from '../../charts/components/DimensionPicker.vue'
+import MeasurePicker from '../../charts/components/MeasurePicker.vue'
 import { copy } from '../../helpers'
-import { FIELDTYPES } from '../../helpers/constants'
 import {
-	aggregations,
 	ColumnMeasure,
 	ColumnOption,
 	Dimension,
-	DimensionDataType,
-	MeasureDataType,
+	DimensionOption,
+	MeasureOption,
 	QueryResultColumn,
 	SummarizeArgs,
 } from '../../types/query.types'
+import { getDimensions, getMeasures } from '../helpers'
 import { Query } from '../query'
 
 const props = defineProps<{
@@ -21,20 +22,52 @@ const emit = defineEmits({ select: (args: SummarizeArgs) => true })
 const showDialog = defineModel()
 
 const query = inject<Query>('query')!
-const columnOptions = ref<ColumnOption[]>([])
+const columnOptions = ref<QueryResultColumn[]>([])
 query.getColumnsForSelection().then((cols: ColumnOption[]) => {
-	columnOptions.value = cols
+	columnOptions.value = cols.map((col) => {
+		return {
+			name: col.value,
+			type: col.data_type,
+		}
+	})
 })
 
-const numberColumns = computed(() =>
-	columnOptions.value.filter((col) => FIELDTYPES.NUMBER.includes(col.data_type))
-)
-const nonNumberColumns = computed(() =>
-	columnOptions.value.filter((col) => !FIELDTYPES.NUMBER.includes(col.data_type))
-)
+const dimensionOptions = computed<DimensionOption[]>(() => {
+	const _dimensions = getDimensions(columnOptions.value)
+	return _dimensions.map((dimension) => ({
+		...dimension,
+		label: dimension.column_name,
+		value: dimension.column_name,
+	}))
+})
 
-const measures = ref<ColumnMeasure[]>(copy((props.summary?.measures as ColumnMeasure[]) || []))
-const dimensions = ref<Dimension[]>(copy(props.summary?.dimensions || []))
+const measureOptions = computed<MeasureOption[]>(() => {
+	const _measures = getMeasures(columnOptions.value)
+	return _measures.map((measure) => ({
+		...measure,
+		label: measure.measure_name,
+		value: measure.measure_name,
+	}))
+})
+
+const measures = ref<ColumnMeasure[]>([])
+const dimensions = ref<Dimension[]>([])
+
+if (props.summary?.measures) {
+	measures.value = copy(props.summary.measures as ColumnMeasure[])
+}
+if (props.summary?.dimensions) {
+	dimensions.value = copy(props.summary.dimensions)
+}
+
+watchEffect(() => {
+	if (!measures.value.length) {
+		addMeasure()
+	}
+	if (!dimensions.value.length) {
+		addDimension()
+	}
+})
 
 const areAllMeasuresValid = computed(
 	() => measures.value.length && measures.value.every((m) => m.column_name)
@@ -75,84 +108,49 @@ function confirmSelections() {
 <template>
 	<Dialog :modelValue="showDialog" :options="{ size: '2xl' }">
 		<template #body>
-			<div class="min-w-[36rem] rounded-lg bg-white px-4 pb-6 pt-5 sm:px-6">
+			<div class="min-w-[36rem] rounded-lg bg-white px-4 pb-6 pt-5 text-base sm:px-6">
 				<div class="flex items-center justify-between pb-4">
 					<h3 class="text-2xl font-semibold leading-6 text-gray-900">Summarize</h3>
 					<Button variant="ghost" @click="showDialog = false" icon="x" size="md">
 					</Button>
 				</div>
 				<div class="flex flex-col gap-4">
-					<div class="flex items-start gap-4">
-						<span
-							class="w-[68px] flex-shrink-0 text-right text-base leading-7 text-gray-600"
-						>
-							Aggregate
-						</span>
-						<div class="flex flex-1 flex-wrap gap-2">
-							<div v-for="(measure, idx) in measures" :key="idx" class="flex">
-								<Autocomplete
-									button-classes="rounded-r-none"
-									placeholder="Agg"
-									:options="aggregations"
-									:modelValue="measure.aggregation"
-									@update:modelValue="(e: any) => {
-										measure.aggregation = e.value
-										measure.measure_name = `${e.value}_${measure.column_name}`
-									}"
-									:hide-search="true"
+					<div class="flex gap-4">
+						<div class="flex-1 flex-shrink-0">
+							<p class="mb-1.5 text-gray-600">Group By</p>
+							<div class="flex flex-col gap-2">
+								<DimensionPicker
+									v-for="(dimension, idx) in dimensions"
+									:key="idx"
+									v-model="dimensions[idx]"
+									:options="dimensionOptions"
+									@remove="dimensions.splice(idx, 1)"
 								/>
-								<Autocomplete
-									button-classes="rounded-l-none"
-									placeholder="Column"
-									:options="columnOptions"
-									:modelValue="measure.column_name"
-									@update:model-value="(e: ColumnOption) => {
-										measure.column_name = e.value
-										measure.data_type = e.data_type as MeasureDataType
-										measure.measure_name = `${measure.aggregation}_${e.value}`
-									}"
-								>
-									<template #footer>
-										<div class="flex items-center justify-end">
-											<Button
-												label="Remove"
-												@click="measures.splice(idx, 1)"
-											/>
-										</div>
-									</template>
-								</Autocomplete>
 							</div>
-							<Button icon="plus" @click="addMeasure"> </Button>
+							<button
+								class="mt-1.5 text-left text-xs text-gray-600 hover:underline"
+								@click="addDimension"
+							>
+								+ Add
+							</button>
 						</div>
-					</div>
-					<div class="flex items-start gap-4">
-						<span
-							class="w-[68px] flex-shrink-0 text-right text-base leading-7 text-gray-600"
-						>
-							Group By
-						</span>
-						<div class="flex flex-1 flex-wrap gap-2">
-							<div v-for="(dimension, idx) in dimensions" :key="idx" class="flex">
-								<Autocomplete
-									placeholder="Column"
-									:options="nonNumberColumns"
-									:modelValue="dimension.column_name"
-									@update:model-value="(e: ColumnOption) => {
-										dimension.column_name = e.value
-										dimension.data_type = e.data_type as DimensionDataType
-									}"
-								>
-									<template #footer>
-										<div class="flex items-center justify-end">
-											<Button
-												label="Remove"
-												@click="dimensions.splice(idx, 1)"
-											/>
-										</div>
-									</template>
-								</Autocomplete>
+						<div class="flex-1 flex-shrink-0">
+							<p class="mb-1.5 text-gray-600">Aggregate</p>
+							<div class="flex flex-col gap-2">
+								<MeasurePicker
+									v-for="(measure, idx) in measures"
+									:key="idx"
+									v-model="measures[idx]"
+									:options="measureOptions"
+									@remove="measures.splice(idx, 1)"
+								/>
 							</div>
-							<Button icon="plus" @click="addDimension"> </Button>
+							<button
+								class="mt-1.5 text-left text-xs text-gray-600 hover:underline"
+								@click="addMeasure"
+							>
+								+ Add
+							</button>
 						</div>
 					</div>
 					<div class="mt-2 flex justify-end">