SYNC: Merge pull request #4 from dbgate/feature/charts

packages/web/src/query/ResultTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import _ from 'lodash';
+  import _, { result } from 'lodash';
 
   import { onMount, tick } from 'svelte';
 
@@ -9,6 +9,7 @@
   import { apiOff, apiOn } from '../utility/api';
   import useEffect from '../utility/useEffect';
   import AllResultsTab from './AllResultsTab.svelte';
+  import JslChart from '../charts/JslChart.svelte';
 
   export let tabs = [];
   export let sessionId;
@@ -16,6 +17,8 @@
   export let driver;
 
   export let resultCount;
+  export let onSetFrontMatterField;
+  export let onGetFrontMatter;
 
   onMount(() => {
     allResultsInOneTab = $allResultsInOneTabDefault;
@@ -23,6 +26,7 @@
 
   let allResultsInOneTab = null;
   let resultInfos = [];
+  let charts = [];
   let domTabs;
 
   $: resultCount = resultInfos.length;
@@ -35,6 +39,23 @@
     if (!currentTab?.isResult) domTabs.setValue(_.findIndex(allTabs, x => x.isResult));
   };
 
+  const handleCharts = async props => {
+    charts = [
+      ...charts,
+      {
+        jslid: props.jslid,
+        charts: props.charts,
+        resultIndex: props.resultIndex,
+      },
+    ];
+    const selectedChart = onGetFrontMatter?.()?.['selected-chart'];
+    await tick();
+    if (selectedChart && props.resultIndex == selectedChart - 1) {
+      domTabs.setValue(_.findIndex(allTabs, x => x.isChart && x.resultIndex === props.resultIndex));
+    }
+    // console.log('Charts received for jslid:', props.jslid, 'Charts:', props.charts);
+  };
+
   $: oneTab = allResultsInOneTab ?? $allResultsInOneTabDefault;
 
   $: allTabs = [
@@ -55,13 +76,27 @@
           label: `Result ${index + 1}`,
           isResult: true,
           component: JslDataGrid,
-          props: { jslid: info.jslid, driver },
+          props: { jslid: info.jslid, driver, onOpenChart: () => handleOpenChart(info.resultIndex) },
         }))),
+    ...charts.map((info, index) => ({
+      label: `Chart ${info.resultIndex + 1}`,
+      isChart: true,
+      resultIndex: info.resultIndex,
+      component: JslChart,
+      props: {
+        jslid: info.jslid,
+        initialCharts: info.charts,
+        onEditDefinition: definition => {
+          onSetFrontMatterField?.(`chart-${info.resultIndex + 1}`, definition ?? undefined);
+        },
+      },
+    })),
   ];
 
   $: {
     if (executeNumber >= 0) {
       resultInfos = [];
+      charts = [];
       if (domTabs) domTabs.setValue(0);
     }
   }
@@ -72,8 +107,10 @@
   function onSession(sid) {
     if (sid) {
       apiOn(`session-recordset-${sid}`, handleResultSet);
+      apiOn(`session-charts-${sid}`, handleCharts);
       return () => {
         apiOff(`session-recordset-${sid}`, handleResultSet);
+        apiOff(`session-charts-${sid}`, handleCharts);
       };
     }
     return () => {};
@@ -84,6 +121,25 @@
     allResultsInOneTab = value;
     $allResultsInOneTabDefault = value;
   }
+
+  async function handleOpenChart(resultIndex) {
+    const chartTab = _.find(allTabs, x => x.isChart && x.resultIndex === resultIndex);
+    if (chartTab) {
+      domTabs.setValue(_.findIndex(allTabs, x => x.isChart && x.resultIndex === resultIndex));
+    } else {
+      charts = [
+        ...charts,
+        {
+          jslid: resultInfos[resultIndex].jslid,
+          charts: [],
+          resultIndex,
+        },
+      ];
+      await tick();
+      domTabs.setValue(_.findIndex(allTabs, x => x.isChart && x.resultIndex === resultIndex));
+    }
+    onSetFrontMatterField?.('selected-chart', resultIndex + 1);
+  }
 </script>
 
 <TabControl
@@ -94,6 +150,13 @@
       ? { text: 'Every result in single tab', onClick: () => setOneTabValue(false) }
       : { text: 'All results in one tab', onClick: () => setOneTabValue(true) },
   ]}
+  onUserChange={value => {
+    if (allTabs[value].isChart) {
+      onSetFrontMatterField?.(`selected-chart`, allTabs[value].resultIndex + 1);
+    } else {
+      onSetFrontMatterField?.(`selected-chart`, undefined);
+    }
+  }}
 >
   <slot name="0" slot="0" />
   <slot name="1" slot="1" />