feat!(perf): coalesce identical queries and limit concurrent query execution

frontend/src2/dashboard/Dashboard.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { Breadcrumbs, call } from 'frappe-ui'
 import { RefreshCcw } from 'lucide-vue-next'
-import { computed, provide, ref } from 'vue'
+import { onBeforeUnmount, provide, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { downloadImage, waitUntil, wheneverChanges } from '../helpers'
-import useDashboard from './dashboard'
+import { downloadImage, waitUntil } from '../helpers'
 import { __ } from '../translation'
+import useDashboard from './dashboard'
 import DashboardItem from './DashboardItem.vue'
 import VueGridLayout from './VueGridLayout.vue'
-import { useStorage } from '@vueuse/core'
 
 const props = defineProps<{ name: string }>()
 
@@ -20,6 +20,11 @@ const dashboard = useDashboard(dashboard_name)
 provide('dashboard', dashboard)
 dashboard.refresh()
 
+// avoid listening if user navigates to another dashboard room
+onBeforeUnmount(() => {
+	dashboard.unsubscribeFromDashboardRoom()
+})
+
 const router = useRouter()
 function openWorkbook() {
 	router.push(`/workbook/${dashboard.doc.workbook}`)

frontend/src2/dashboard/dashboard.ts

@@ -11,6 +11,7 @@ import {
 	wheneverChanges,
 } from '../helpers'
 import useDocumentResource from '../helpers/resource'
+import { getSocket } from '../socket'
 import { isFilterValid } from '../query/components/filter_utils'
 import { column, filter_group } from '../query/helpers'
 import session from '../session'
@@ -51,16 +52,13 @@ function makeDashboard(name: string) {
 		return editing.value && editingItemIndex.value === dashboard.doc.items.indexOf(item)
 	}
 
-
 	const filters = ref<Record<string, FilterArgs[]>>({})
 	const filterStates = ref<Record<string, FilterState>>({})
 
 	function addChart(charts: WorkbookChart[]) {
 		const maxY = getMaxY()
 		charts.forEach((chart) => {
-			if (
-				!dashboard.doc.items.some((item) => item.type === 'chart' && item.chart === chart.name)
-			) {
+			if (!dashboard.doc.items.some((item) => item.type === 'chart' && item.chart === chart.name)) {
 				dashboard.doc.items.push({
 					type: 'chart',
 					chart: chart.name,
@@ -122,9 +120,7 @@ function makeDashboard(name: string) {
 
 	function positionNewFilter(newFilter: WorkbookDashboardItem) {
 		const items = dashboard.doc.items
-		const existingFilters = items.filter(
-			(item) => item.type === 'filter' && item !== newFilter
-		)
+		const existingFilters = items.filter((item) => item.type === 'filter' && item !== newFilter)
 
 		if (existingFilters.length === 0) {
 			newFilter.layout.x = 0
@@ -205,6 +201,22 @@ function makeDashboard(name: string) {
 		})
 	}
 
+	function subscribeToDashboardRoom() {
+		const socket = getSocket()
+
+		socket.emit('doc_subscribe', 'Insights Dashboard v3', name)
+		socket.on('connect', () => {
+			socket.emit('doc_subscribe', 'Insights Dashboard v3', name)
+		})
+	}
+
+	function unsubscribeFromDashboardRoom() {
+		const socket = getSocket()
+		socket.emit('doc_unsubscribe', 'Insights Dashboard v3', name)
+	}
+
+	subscribeToDashboardRoom()
+
 	function refresh(force = false) {
 		dashboard.doc.items
 			.filter((item) => item.type === 'chart')
@@ -214,6 +226,7 @@ function makeDashboard(name: string) {
 	function refreshChart(chart_name: string, force = false) {
 		const chart = useChart(chart_name)
 		chart.dataQuery.adhocFilters = getAdhocFilters(chart_name)
+		chart.dataQuery.dashboardName = name
 		chart.refresh(force)
 	}
 
@@ -336,6 +349,20 @@ function makeDashboard(name: string) {
 			.then(() => dashboard.load())
 	}
 
+	const defaultFilters = dashboard.doc.items.reduce((acc, item) => {
+		if (item.type != 'filter') return acc
+
+		const filterItem = item as WorkbookDashboardFilter
+		if (filterItem.default_operator && filterItem.default_value) {
+			acc[filterItem.filter_name] = {
+				operator: filterItem.default_operator,
+				value: filterItem.default_value,
+			}
+		}
+		return acc
+	}, {} as typeof filterStates.value)
+
+	Object.assign(filterStates.value, defaultFilters)
 
 	const key = `insights:dashboard-filter-states-${name}`
 	filterStates.value = store(key, () => filterStates.value)
@@ -399,6 +426,7 @@ function makeDashboard(name: string) {
 		updateAccess,
 
 		getShareLink,
+		unsubscribeFromDashboardRoom,
 	})
 }
 
@@ -431,13 +459,16 @@ function getDashboardResource(name: string) {
 		},
 	})
 	if (session.isLoggedIn) {
-		dashboard.onAfterLoad(() => dashboard.call('track_view').catch(() => { }))
+		dashboard.onAfterLoad(() => dashboard.call('track_view').catch(() => {}))
 	}
-	wheneverChanges(() => dashboard.doc.read_only, () => {
-		if (dashboard.doc.read_only) {
-			dashboard.autoSave = false
+	wheneverChanges(
+		() => dashboard.doc.read_only,
+		() => {
+			if (dashboard.doc.read_only) {
+				dashboard.autoSave = false
+			}
 		}
-	})
+	)
 	return dashboard
 }