fix: query autosave issue

frontend/src/notebook/blocks/query/builder/QueryBuilder.vue

@@ -1,10 +1,10 @@
 <script setup>
 import UseTooltip from '@/components/UseTooltip.vue'
 import useDataSourceTable from '@/datasource/useDataSourceTable'
-import { FIELDTYPES, isDimensionColumn } from '@/utils'
+import { FIELDTYPES, isDimensionColumn, safeJSONParse } from '@/utils'
 import { dateFormats } from '@/utils/format'
 import { Sigma } from 'lucide-vue-next'
-import { computed, inject, provide, ref } from 'vue'
+import { computed, inject, provide, ref, watch } from 'vue'
 import useQuery from '../useQuery'
 import ColumnExpressionEditor from './ColumnExpressionEditor.vue'
 import ColumnSelector from './ColumnSelector.vue'
@@ -25,10 +25,8 @@ provide('query', query)
 const legacyQuery = inject('query')
 legacyQuery.beforeExecute?.(async () => await query.save())
 
-const state = computed({
-	get: () => (typeof query.doc.json == 'string' ? JSON.parse(query.doc.json) : query.doc.json),
-	set: (value) => (query.doc.json = value),
-})
+const state = ref(safeJSONParse(query.doc.json))
+watch(state, (value) => (query.doc.json = value), { deep: true })
 
 const selectedTables = computed(() => {
 	const tables = [state.value.table]

frontend/src/notebook/blocks/query/useQuery.js

@@ -39,7 +39,7 @@ function makeQuery(name) {
 	}
 
 	state.syncDoc = async function () {
-		state.doc = resource.doc
+		state.doc = { ...resource.doc }
 		state.isOwner = state.doc.owner == auth.user.user_id
 		state.loading = false
 		state.unsaved = false
@@ -75,12 +75,19 @@ function makeQuery(name) {
 		state.executing = false
 	}, 300)
 
-	state.save = async () => {
-		state.loading = true
-		const updatedFields = getUpdatedFields()
-		await resource.setValue.submit(updatedFields)
-		await state.syncDoc()
-		state.loading = false
+	watchOnce(() => state.autosave, setupAutosaveListener)
+	function setupAutosaveListener() {
+		const saveIfChanged = function (newVal, oldVal) {
+			if (state.executing) return
+			if (!oldVal || !newVal) return
+			if (JSON.stringify(newVal) == JSON.stringify(oldVal)) return
+			state.save()
+		}
+		watchDebounced(getUpdatedFields, saveIfChanged, { deep: true, debounce: 5000 })
+		window.onbeforeunload = (event) => {
+			state.unsaved && state.save()
+			event.preventDefault()
+		}
 	}
 
 	function getUpdatedFields() {
@@ -94,15 +101,11 @@ function makeQuery(name) {
 		return updatedFields
 	}
 
-	watchOnce(() => state.autosave, setupAutosaveListener)
-
-	function setupAutosaveListener() {
-		const saveIfChanged = function (newVal, oldVal) {
-			if (!oldVal || !newVal) return
-			if (JSON.stringify(newVal) == JSON.stringify(oldVal)) return
-			state.save()
-		}
-		watchDebounced(getUpdatedFields, saveIfChanged, { deep: true, debounce: 1000 })
+	state.save = async () => {
+		state.loading = true
+		const updatedFields = getUpdatedFields()
+		await resource.setValue.submit(updatedFields)
+		state.loading = false
 	}
 
 	const setUnsaved = (newVal, oldVal) => {