feat: Add plot node and update related components

- Introduced a new plot node with corresponding compute and visual definitions.
- Updated the node registration files to include the new plot node in both worker and main node registrations.
- Created example flow files for scatterplot and linear regression to demonstrate the new plot functionality.
- Enhanced the compute logic to support additional parameters in node computations.
- Modified JSON transformation utilities to handle new input types and improve data handling.
- Adjusted the raw JSON node to accept number types for input, ensuring compatibility with expressions.
- Updated variable payload input utilities to include original input in the payload for better context during execution.
- Enhanced map node to allow multiple connections from output.

Author: devhelpr

apps/vps-web/src/app/custom-nodes-v2/pie-chart-visual.tsx

@@ -40,22 +40,24 @@ export class PieChartVisual extends NodeVisual<NodeInfo> {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _nodeInfo: NodeInfo
   ) => {
-    this.lastData = Array.isArray(data) ? data.map((d: InputDataTuple | Record<string, unknown>) => {
-      // Handle both array-like and object-like structures
-      if (Array.isArray(d)) {
-        return {
-          name: String(d[0]),
-          value: Number(d[1]),
-        };
-      } else if (d && typeof d === 'object') {
-        // Handle object format with name/value keys
-        const name = d.name !== undefined ? String(d.name) : 'Unknown';
-        const value = d.value !== undefined ? Number(d.value) : 0;
-        return { name, value };
-      }
-      return { name: 'Unknown', value: 0 };
-    }) : undefined;
-    
+    this.lastData = Array.isArray(data)
+      ? data.map((d: InputDataTuple | Record<string, unknown>) => {
+          // Handle both array-like and object-like structures
+          if (Array.isArray(d)) {
+            return {
+              name: String(d[0]),
+              value: Number(d[1]),
+            };
+          } else if (d && typeof d === 'object') {
+            // Handle object format with name/value keys
+            const name = d.name !== undefined ? String(d.name) : 'Unknown';
+            const value = d.value !== undefined ? Number(d.value) : 0;
+            return { name, value };
+          }
+          return { name: 'Unknown', value: 0 };
+        })
+      : undefined;
+
     console.log('pieChartVisual', data);
     // Clear the parent node before rendering... should this be handled by the framework?
 
@@ -77,24 +79,27 @@ export class PieChartVisual extends NodeVisual<NodeInfo> {
             { name: 'I', value: 900 },
             { name: 'J', value: 1000 },
           ];
-      
+
       pieData.columns = ['name', 'value'];
-      
+
       // Create the color scale.
       const color = d3
         .scaleOrdinal<string>()
-        .domain(pieData.map(d => d.name))
+        .domain(pieData.map((d) => d.name))
         .range(
           d3
-            .quantize((t) => d3.interpolateSpectral(t * 0.8 + 0.1), pieData.length)
+            .quantize(
+              (t) => d3.interpolateSpectral(t * 0.8 + 0.1),
+              pieData.length
+            )
             .reverse()
         );
 
       // Create the pie layout and arc generator.
       const pie = d3
         .pie<PieDataItem>()
         .sort(null)
-        .value(d => d.value);
+        .value((d) => d.value);
 
       const arc = d3
         .arc<d3.PieArcDatum<PieDataItem>>()
@@ -128,10 +133,10 @@ export class PieChartVisual extends NodeVisual<NodeInfo> {
         .selectAll<SVGPathElement, d3.PieArcDatum<PieDataItem>>('path')
         .data(arcs)
         .join('path')
-        .attr('fill', d => color(d.data.name))
+        .attr('fill', (d) => color(d.data.name))
         .attr('d', arc)
         .append('title')
-        .text(d => `${d.data.name}: ${d.data.value.toLocaleString('en-US')}`);
+        .text((d) => `${d.data.name}: ${d.data.value.toLocaleString('en-US')}`);
 
       // Create labels
       svg
@@ -140,27 +145,27 @@ export class PieChartVisual extends NodeVisual<NodeInfo> {
         .selectAll<SVGTextElement, d3.PieArcDatum<PieDataItem>>('text')
         .data(arcs)
         .join('text')
-        .attr('transform', d => `translate(${arcLabel.centroid(d)})`)
+        .attr('transform', (d) => `translate(${arcLabel.centroid(d)})`)
         .call((text) =>
           text
             .append('tspan')
             .attr('y', '-0.4em')
             .attr('font-weight', 'bold')
-            .text(d => d.data.name)
+            .text((d) => d.data.name)
         )
         .call((text) =>
           text
-            .filter(d => d.endAngle - d.startAngle > 0.25)
+            .filter((d) => d.endAngle - d.startAngle > 0.25)
             .append('tspan')
             .attr('x', 0)
             .attr('y', '0.7em')
             .attr('fill-opacity', 0.7)
-            .text(d => d.data.value.toLocaleString('en-US'))
+            .text((d) => d.data.value.toLocaleString('en-US'))
         );
 
       parentNode.appendChild(svg.node() as Node);
     };
-    
+
     renderPie();
 
     this.resizeObserver = new ResizeObserver((entries) => {
@@ -178,7 +183,7 @@ export class PieChartVisual extends NodeVisual<NodeInfo> {
       this.resizeObserver.observe(parentNode); // Start observing the container
     }
   };
-  
+
   isResizing = false;
   resizeObserver: ResizeObserver | undefined = undefined;
 

apps/vps-web/src/app/custom-nodes-v2/plot-compute.ts

@@ -0,0 +1,31 @@
+import { NodeCompute } from '@devhelpr/visual-programming-system';
+import { NodeInfo } from '@devhelpr/web-flow-executor';
+
+// depending if "ai-canvas" is used.. the below is called from a worker or main thread
+
+export const plotCompute: NodeCompute<NodeInfo> = {
+  initializeCompute: () => {
+    // Initialization logic if needed
+  },
+  compute: async (data: unknown, _1, _2, _3, _4, _5, connection) => {
+    const plotData = data as { type: string; data: unknown };
+    if (plotData.type !== 'plot' && plotData.type !== 'line') {
+      return Promise.resolve({
+        output: undefined,
+        result: undefined,
+      });
+    }
+
+    console.log('plotCompute', plotData);
+
+    const dataToPlot = {
+      type: plotData.type,
+      data: plotData.data,
+      id: connection?.id ?? '',
+    };
+    return Promise.resolve({
+      output: dataToPlot,
+      result: dataToPlot,
+    });
+  },
+};

apps/vps-web/src/app/custom-nodes-v2/plot-definition.ts

@@ -0,0 +1,7 @@
+import { NodeDefinition } from '@devhelpr/visual-programming-system';
+
+export const plotDefinition: NodeDefinition = {
+  nodeTypeName: 'plot',
+  description:
+    'A plot component that visualizes data in a graphical format, such as a line chart, bar chart, or scatter plot.',
+};