chore: merge develop into main

frontend/src/components/Charts/BaseChart.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { areDeeplyEqual } from '@/utils'
 import * as echarts from 'echarts'
-import { onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import ChartTitle from './ChartTitle.vue'
 
 const props = defineProps({

frontend/src/components/Controls/Attachment.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col text-base">
+	<div class="flex flex-col overflow-hidden text-base">
 		<span class="mb-2 block text-sm leading-4 text-gray-700">
 			{{ label || 'Attach File' }}
 		</span>
@@ -14,14 +14,14 @@
 		/>
 
 		<!-- Upload Button -->
-		<Button v-if="!file?.name" class="form-input h-7" @click="upload" :loading="uploading">
+		<Button v-if="!file?.name" @click="upload" :loading="uploading">
 			<FeatherIcon name="upload" class="mr-1 inline-block h-3 w-3" />
 			{{ placeholder || 'Upload a file' }}
 		</Button>
 
 		<!-- Clear Button -->
-		<Button v-else class="form-input h-7" iconRight="x" @click="clear">
-			{{ file.file_name }}
+		<Button v-else iconRight="x" @click="clear">
+			<span class="truncate">{{ file.file_name }}</span>
 		</Button>
 	</div>
 </template>

frontend/src/query/PublicChart.vue

@@ -14,15 +14,5 @@ const chart = usePublicChart(props.public_key)
 		:data="chart.data"
 		:options="chart.doc.options"
 		:key="JSON.stringify(chart.doc.options)"
-	>
-		<template #placeholder>
-			<InvalidWidget
-				class="absolute"
-				title="Insufficient options"
-				message="Please check the options for this chart"
-				icon="settings"
-				icon-class="text-gray-500"
-			/>
-		</template>
-	</component>
+	/>
 </template>

frontend/src/query/resources/useQuery.js

@@ -24,7 +24,7 @@ export default function useQuery(name) {
 		sourceSchema: {},
 	})
 
-	const run = createTaskRunner()
+	const queue = createTaskRunner()
 	state.doc = computed(() => resource.doc)
 
 	const setLoading = (value) => (state.loading = value)
@@ -52,11 +52,11 @@ export default function useQuery(name) {
 
 	state.updateTitle = (title) => {
 		setLoading(true)
-		return run(() => resource.setValue.submit({ title }).finally(() => setLoading(false)))
+		return queue(() => resource.setValue.submit({ title }).finally(() => setLoading(false)))
 	}
 	state.changeDataSource = (data_source) => {
 		setLoading(true)
-		return run(() => resource.setValue.submit({ data_source }).then(() => setLoading(false)))
+		return queue(() => resource.setValue.submit({ data_source }).then(() => setLoading(false)))
 	}
 
 	const autoExecuteEnabled = settingsStore().settings.auto_execute_query
@@ -66,7 +66,7 @@ export default function useQuery(name) {
 
 		setLoading(true)
 		return new Promise((resolve) =>
-			run(() =>
+			queue(() =>
 				resource.setValue
 					.submit({ json: JSON.stringify(newQuery, null, 2) })
 					.then(() => autoExecuteEnabled && state.execute())
@@ -80,7 +80,7 @@ export default function useQuery(name) {
 		if (!state.doc?.data_source) return
 		setLoading(true)
 		state.executing = true
-		await run(() => resource.run.submit().catch(() => {}))
+		await queue(() => resource.run.submit().catch(() => {}))
 		await state.results.reload()
 		state.executing = false
 		setLoading(false)
@@ -89,37 +89,40 @@ export default function useQuery(name) {
 	state.updateTransforms = debounce(async (transforms) => {
 		if (!transforms) return
 		setLoading(true)
-		return run(() =>
-			resource.setValue
-				.submit({ transforms, status: 'Pending Execution' })
-				.then(() => autoExecuteEnabled && state.execute())
+		const updateTransform = () => resource.setValue.submit({ transforms })
+		const updateStatus = () => resource.set_status.submit({ status: 'Pending Execution' })
+		const autoExecute = () => autoExecuteEnabled && state.execute()
+		return queue(() =>
+			updateTransform()
+				.then(updateStatus)
+				.then(autoExecute)
 				.finally(() => setLoading(false))
 		)
 	}, 500)
 
 	state.duplicate = async () => {
 		state.duplicating = true
-		await run(() => resource.duplicate.submit())
+		await queue(() => resource.duplicate.submit())
 		state.duplicating = false
 		return resource.duplicate.data.message
 	}
 
 	state.delete = async () => {
 		state.deleting = true
-		await run(() => resource.delete.submit())
+		await queue(() => resource.delete.submit())
 		state.deleting = false
 	}
 
 	state.store = () => {
 		setLoading(true)
-		return run(() => resource.store.submit().finally(() => setLoading(false)))
+		return queue(() => resource.store.submit().finally(() => setLoading(false)))
 	}
 	state.unstore = () => {
 		setLoading(true)
-		return run(() => resource.unstore.submit().finally(() => setLoading(false)))
+		return queue(() => resource.unstore.submit().finally(() => setLoading(false)))
 	}
 	state.switchQueryBuilder = () => {
-		return run(() => {
+		return queue(() => {
 			return resource.switch_query_type.submit().then(() => {
 				window.location.reload()
 			})
@@ -160,7 +163,7 @@ export default function useQuery(name) {
 	state.convertToNative = async () => {
 		if (state.doc.is_native_query) return
 		setLoading(true)
-		return run(() => {
+		return queue(() => {
 			return resource.setValue
 				.submit({ is_native_query: 1, is_assisted_query: 0, is_script_query: 0 })
 				.finally(() => setLoading(false))
@@ -171,7 +174,7 @@ export default function useQuery(name) {
 	state.executeSQL = debounce((sql) => {
 		if (!sql || sql === state.doc.sql) return state.execute()
 		setLoading(true)
-		return run(() =>
+		return queue(() =>
 			resource.setValue
 				.submit({ sql })
 				.then(() => state.execute())
@@ -183,13 +186,13 @@ export default function useQuery(name) {
 	state.updateScript = debounce((script) => {
 		if (script === state.doc.script) return
 		setLoading(true)
-		return run(() => resource.setValue.submit({ script }).finally(() => setLoading(false)))
+		return queue(() => resource.setValue.submit({ script }).finally(() => setLoading(false)))
 	}, 500)
 
 	state.updateScriptVariables = debounce((script_variables) => {
 		if (variables === state.doc.variables) return
 		setLoading(true)
-		return run(() => resource.setValue.submit({ variables }).finally(() => setLoading(false)))
+		return queue(() => resource.setValue.submit({ variables }).finally(() => setLoading(false)))
 	}, 500)
 
 	state.downloadResults = () => {

frontend/src/query/usePublicChart.js

@@ -1,5 +1,6 @@
 import { safeJSONParse } from '@/utils'
 import { getFormattedResult } from '@/utils/query/results'
+import { convertResultToObjects } from '@/widgets/useChartData'
 import { createResource } from 'frappe-ui'
 import { reactive } from 'vue'
 
@@ -22,7 +23,8 @@ export default function usePublicChart(publicKey) {
 	async function load() {
 		state.loading = true
 		state.doc = await resource.fetch()
-		state.data = getFormattedResult(state.doc.data)
+		const results = getFormattedResult(state.doc.data)
+		state.data = convertResultToObjects(results)
 		state.loading = false
 	}
 	load()

frontend/src/query/useQueryResource.js

@@ -7,6 +7,7 @@ export const API_METHODS = {
 	unstore: 'unstore',
 	convert: 'convert',
 	setLimit: 'set_limit',
+	set_status: 'set_status',
 	duplicate: 'duplicate',
 	reset: 'reset_and_save',
 	fetchTables: 'fetch_tables',

frontend/src/query/visual/ColumnExpressionEditor.vue

@@ -15,7 +15,7 @@ const emptyExpressionColumn = {
 }
 
 const assistedQuery = inject('assistedQuery')
-const emit = defineEmits(['save', 'discard', 'remove'])
+const emit = defineEmits(['save', 'remove'])
 const props = defineProps({ column: Object })
 
 const propsColumn = props.column || emptyExpressionColumn
@@ -83,12 +83,9 @@ function onSave() {
 			</div>
 		</div>
 
-		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<Button variant="outline" @click="emit('discard')"> Discard </Button>
-			<div class="flex flex-col gap-2 lg:flex-row">
-				<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
-				<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
-			</div>
+		<div class="flex flex-col justify-end gap-2 lg:flex-row">
+			<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
+			<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
 		</div>
 	</div>
 </template>

frontend/src/query/visual/ColumnSection.vue

@@ -147,20 +147,21 @@ function onColumnSort(e) {
 		</DraggableList>
 	</div>
 
-	<Dialog
-		:modelValue="showExpressionEditor"
-		:options="{
-			title: 'Column Expression',
-			size: '3xl',
-		}"
-	>
-		<template #body-content>
-			<ColumnExpressionEditor
-				:column="columns[activeColumnIdx]"
-				@remove="onRemoveColumn"
-				@save="onSaveColumn"
-				@discard="activeColumnIdx = null"
-			/>
+	<Dialog :modelValue="showExpressionEditor" :options="{ size: '3xl' }">
+		<template #body>
+			<div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+				<div class="flex items-center justify-between pb-4">
+					<h3 class="text-2xl font-semibold leading-6 text-gray-900">
+						Column Expression
+					</h3>
+					<Button variant="ghost" @click="activeColumnIdx = null" icon="x"> </Button>
+				</div>
+				<ColumnExpressionEditor
+					:column="columns[activeColumnIdx]"
+					@remove="onRemoveColumn"
+					@save="onSaveColumn"
+				/>
+			</div>
 		</template>
 	</Dialog>
 </template>

frontend/src/query/visual/LimitSection.vue

@@ -1,14 +1,16 @@
 <script setup>
 import { watchDebounced } from '@vueuse/core'
 import { Infinity } from 'lucide-vue-next'
-import { inject, ref } from 'vue'
+import { inject, ref, watch } from 'vue'
 import SectionHeader from './SectionHeader.vue'
 
 const assistedQuery = inject('assistedQuery')
 const limit = ref(assistedQuery.limit)
-watchDebounced(limit, (value) => (assistedQuery.limit = value || assistedQuery.limit), {
-	debounce: 300,
-})
+watchDebounced(limit, assistedQuery.setLimit, { debounce: 300 })
+watch(
+	() => assistedQuery.limit,
+	(val) => (limit.value = val)
+)
 </script>
 
 <template>

frontend/src/query/visual/useAssistedQuery.js

@@ -46,6 +46,7 @@ export default function useAssistedQuery(query) {
 		removeFilterAt,
 		updateFilterAt,
 		setOrderBy,
+		setLimit,
 		addTransform,
 		removeTransformAt,
 		updateTransformAt,
@@ -181,6 +182,11 @@ export default function useAssistedQuery(query) {
 		})
 	}
 
+	function setLimit(limit) {
+		if (limit === state.limit) return
+		state.limit = limit
+	}
+
 	function addTransform() {
 		state.transforms.push({ type: '', options: {} })
 		query.updateTransforms(state.transforms)

insights/insights/doctype/insights_query/insights_query.py

@@ -52,12 +52,6 @@ def after_insert(self):
 
     def before_save(self):
         self.variant_controller.before_save()
-        self.handle_transform_change()
-
-    def handle_transform_change(self):
-        if self.has_value_changed("transforms"):
-            self.update_query_results()
-            self.status = Status.PENDING.value
 
     def on_update(self):
         self.link_chart()

insights/insights/doctype/insights_query/insights_query_client.py

@@ -17,6 +17,11 @@
 
 
 class InsightsQueryClient:
+    @frappe.whitelist()
+    def set_status(self, status):
+        # since status is auto set based on the sql, we need some way to override it
+        self.db_set("status", status)
+
     @frappe.whitelist()
     def duplicate(self):
         new_query = frappe.copy_doc(self)

insights/insights/doctype/insights_query/utils.py

@@ -74,7 +74,7 @@ def update_sql(query):
     if query.sql == sql:
         return
     query.sql = sql
-    query.update_query_results([])
+    query.update_query_results()
     query.status = Status.PENDING.value if sql else Status.SUCCESS.value