feat: persist report on the backend

Insight are now able to be saved in the db. Frontend properly fetches and shows the insights

libs/shared/lib/components/textEditor/plugins/PreviewPlugin.tsx

@@ -5,8 +5,8 @@ import { $generateHtmlFromNodes } from '@lexical/html';
 import { VariableType } from '../VariableNode';
 import { useVisualization, useGraphQueryResult } from '@graphpolaris/shared/lib/data-access';
 import { Visualizations } from '@graphpolaris/shared/lib/vis/components/VisualizationPanel';
-import { Vis1DComponent, type Vis1DProps } from '@graphpolaris/shared/lib/vis/visualizations/vis1D';
-import { getPlotData } from '@graphpolaris/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly';
+import { Vis1DComponent, type Vis1DProps, getAttributeValues } from '@graphpolaris/shared/lib/vis/visualizations/vis1D';
+import { preparePlotData } from '@graphpolaris/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly';
 import { VisualizationSettingsType } from '@graphpolaris/shared/lib/vis/common';
 // @ts-ignore
 import { newPlot, toImage } from 'plotly.js/dist/plotly';
@@ -25,6 +25,8 @@ export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<
   }
 
   const result = useGraphQueryResult();
+
+  /*
   const getAttributeValues = useCallback(
     (settings: Vis1DProps & VisualizationSettingsType, attributeKey: string | number) => {
       if (!settings.nodeLabel || !attributeKey) {
@@ -37,6 +39,7 @@ export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<
     },
     [result],
   );
+  */
   const vis = useVisualization();
 
   async function replaceAllAsync(string: string, regexp: RegExp, replacerFunction: CallableFunction) {
@@ -61,34 +64,57 @@ export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<
           return ` ${value} `;
 
         case VariableType.visualization:
-          const activeVisualization = vis.openVisualizationArray.find(x => x.name == name) as Vis1DProps & VisualizationSettingsType;
+          const activeVisualization = vis.openVisualizationArray.find((x) => x.name == name) as Vis1DProps & VisualizationSettingsType;
 
           if (!activeVisualization) {
             throw new Error('Tried to render non-existing visualization');
           }
+          let xAxisData = getAttributeValues(result, activeVisualization.selectedEntity, activeVisualization.xAxisLabel!);
+          let yAxisData: (string | number)[] = [];
+          let zAxisData: (string | number)[] = [];
+
+          if (activeVisualization.yAxisLabel != null) {
+            yAxisData = getAttributeValues(result, activeVisualization.selectedEntity, activeVisualization.yAxisLabel);
+          }
+
+          if (activeVisualization.zAxisLabel != null) {
+            zAxisData = getAttributeValues(result, activeVisualization.selectedEntity, activeVisualization.zAxisLabel);
+          }
+
+          //debugger;
+          const groupBy = activeVisualization.groupData;
+          const stack = activeVisualization.stack;
+          const showAxis = true;
+
+          const xAxisLabel = '';
+          const yAxisLabel = '';
+          const zAxisLabel = '';
 
-          const xAxisData = getAttributeValues(activeVisualization, activeVisualization.xAxisLabel!);
-          const yAxisData = getAttributeValues(activeVisualization, activeVisualization.yAxisLabel!);
-          debugger;
           const plotType = activeVisualization.plotType;
-          const plotData = getPlotData(xAxisData, plotType, yAxisData);
 
-          const plot = await newPlot(document.createElement('div'), plotData, {
+          const { plotData, layout } = preparePlotData(
+            xAxisData,
+            plotType,
+            yAxisData,
+            zAxisData,
+            xAxisLabel,
+            yAxisLabel,
+            zAxisLabel,
+            showAxis,
+            groupBy,
+            stack,
+          );
+
+          const layout2 = {
+            ...layout,
             width: 600,
             height: 400,
             title: activeVisualization.title,
-            font: {
-              family: 'Inter, sans-serif',
-              size: 16,
-              color: '#374151',
-            },
-            xaxis: {
-              title: 'Category',
-            },
-            yaxis: {
-              title: 'Value',
-            },
-          });
+          };
+
+          // Generate the plot
+          const plot = await newPlot(document.createElement('div'), plotData, layout2);
+
           const dataURI = await toImage(plot);
           return `<img src="${dataURI}" width="300" height="200" alt="${activeVisualization.title}" />`;
       }