Skip to content

Commit 928c593

Browse files
devhelprdevhelpr
committed
feat: Add scatterplot with linear regression node and update navbar options
1 parent 09e5fd6 commit 928c593

File tree

6 files changed

+367
-3
lines changed

6 files changed

+367
-3
lines changed

‎apps/vps-web/public/example-flows/scatterplot-linearRegression.json‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,342 @@
1+
{
2+
"schemaType": "flow",
3+
"schemaVersion": "0.0.1",
4+
"id": "1234",
5+
"flows": {
6+
"flow": {
7+
"flowType": "flow",
8+
"nodes": [
9+
{
10+
"id": "e29ba7fe-166c-4789-83ff-fac108532cc4",
11+
"x": -3067.50151418229,
12+
"y": -344.0569754692933,
13+
"width": 326.9420375209688,
14+
"height": 356.67032856888534,
15+
"nodeType": "Shape",
16+
"nodeInfo": {
17+
"type": "plot",
18+
"formValues": {},
19+
"fillColor": "black",
20+
"strokeColor": "white",
21+
"strokeWidth": 2,
22+
"text": "rect",
23+
"isOCIFNode": true,
24+
"updatesVisualAfterCompute": true,
25+
"taskType": "plot"
26+
}
27+
},
28+
{
29+
"id": "11746075-622f-4e5f-bb57-faae2845a10d",
30+
"x": -4189.832167694787,
31+
"y": -230.5327188962175,
32+
"width": 150,
33+
"height": 155,
34+
"nodeType": "Shape",
35+
"nodeInfo": {
36+
"type": "range",
37+
"formValues": {},
38+
"taskType": "range"
39+
}
40+
},
41+
{
42+
"id": "b1b5cc78-badf-4641-a5a3-446673ccdadd",
43+
"x": -4536.352091925861,
44+
"y": -327.2406770862517,
45+
"width": 200,
46+
"height": 112,
47+
"nodeType": "Shape",
48+
"nodeInfo": {
49+
"type": "value",
50+
"formValues": {
51+
"value": "0"
52+
}
53+
}
54+
},
55+
{
56+
"id": "792ca34d-2a12-4c6b-948d-976878762f5a",
57+
"x": -4522.121461875386,
58+
"y": -123.06207201421323,
59+
"width": 200,
60+
"height": 112,
61+
"nodeType": "Shape",
62+
"nodeInfo": {
63+
"type": "value",
64+
"formValues": {
65+
"value": "100"
66+
}
67+
}
68+
},
69+
{
70+
"id": "b5d7481b-d7d3-4fb2-ab28-c3720b702e45",
71+
"x": -3896.15811456064,
72+
"y": -18.236233894877927,
73+
"width": 110,
74+
"height": 110,
75+
"nodeType": "Shape",
76+
"nodeInfo": {
77+
"type": "map",
78+
"formValues": {}
79+
}
80+
},
81+
{
82+
"id": "28c40617-07b5-499a-8312-b18539fe6a3a",
83+
"x": -3435.7626536580715,
84+
"y": 165.3138129785275,
85+
"width": 111.7109375,
86+
"height": 96,
87+
"nodeType": "Shape",
88+
"nodeInfo": {
89+
"type": "json-node",
90+
"formValues": {
91+
"json": "{\n \"@expression:x\": \"input + ((random()/100) - 0.5) * 10\",\n \"@expression:y\": \"input + ((random()/100) - 0.5) * 10\"\n}"
92+
},
93+
"taskType": "json-node"
94+
}
95+
},
96+
{
97+
"id": "11331856-fc53-452a-9e2e-e34d63ee50e6",
98+
"x": -3439.480690266502,
99+
"y": -349.0059078104181,
100+
"width": 111.7109375,
101+
"height": 96,
102+
"nodeType": "Shape",
103+
"nodeInfo": {
104+
"type": "json-node",
105+
"formValues": {
106+
"json": "{\n \"type\" : \"plot\",\n \"@copyInputTo\": \"data\"\n}"
107+
},
108+
"taskType": "json-node"
109+
}
110+
},
111+
{
112+
"id": "3d31fec5-9990-4a2b-ba19-faed13ee6b5c",
113+
"x": -3569.3339366320247,
114+
"y": -603.0048689865731,
115+
"width": 200,
116+
"height": 100,
117+
"nodeType": "Shape",
118+
"nodeInfo": {
119+
"type": "expression",
120+
"formValues": {
121+
"expression": "\"clear\"",
122+
"inputType": "number"
123+
}
124+
}
125+
},
126+
{
127+
"id": "41dc0c0d-cbc5-47c9-9dfb-bd9aa8606da8",
128+
"x": -3311.5284842210804,
129+
"y": -222.45081422621007,
130+
"width": 111.7109375,
131+
"height": 96,
132+
"nodeType": "Shape",
133+
"nodeInfo": {
134+
"type": "json-node",
135+
"formValues": {
136+
"json": "{\n \"type\" : \"line\",\n \"@copyInputTo\": \"data\"\n}"
137+
},
138+
"taskType": "json-node"
139+
}
140+
},
141+
{
142+
"id": "45e45642-5422-4fcb-b039-444c0847b8d8",
143+
"x": -2586.05164853934,
144+
"y": 293.3697248588114,
145+
"width": 344.5859375,
146+
"height": 152,
147+
"nodeType": "Shape",
148+
"nodeInfo": {
149+
"type": "register-expression-function-node",
150+
"formValues": {
151+
"customFunctionCode": "(data) => {\n if (!Array.isArray(data)){\n return;\n }\n function linearRegression(data) {\n const n = data.length;\n const sumX = data.reduce((acc, xi) => acc + xi.x, 0);\n const sumY = data.reduce((acc, yi) => acc + yi.y, 0);\n const sumXY = data.reduce((acc, xi, i) => acc + xi.x * data[i].y, 0);\n const sumX2 = data.reduce((acc, xi) => acc + xi.x * xi.x, 0);\n\n const numerator = n * sumXY - sumX * sumY;\n const denominator = n * sumX2 - sumX * sumX;\n\n const a = numerator / denominator;\n const b = (sumY - a * sumX) / n;\n\n return { a, b, predict: (xVal) => a * xVal + b };\n }\n const model = linearRegression(data);\n return data.map((d) => ({\n x: d.x,\n y: model.predict(d.x),\n }));\n};",
152+
"functionName": "linearRegression"
153+
},
154+
"isRunOnStart": true,
155+
"taskType": "register-expression-function-node"
156+
}
157+
},
158+
{
159+
"id": "9e5ada78-cb83-4778-a3a5-2bcbc819e777",
160+
"x": -3602.692338268237,
161+
"y": -51.30630449662755,
162+
"width": 200,
163+
"height": 100,
164+
"nodeType": "Shape",
165+
"nodeInfo": {
166+
"type": "expression",
167+
"formValues": {
168+
"expression": "linearRegression(input)",
169+
"inputType": "number"
170+
}
171+
}
172+
},
173+
{
174+
"id": "f69c9d0e-9f2a-4396-8ae9-502a7473dedc",
175+
"x": -4336.352091925861,
176+
"y": -271.2406770862517,
177+
"endX": -4189.832167694787,
178+
"endY": -200.5327188962175,
179+
"startNodeId": "b1b5cc78-badf-4641-a5a3-446673ccdadd",
180+
"endNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
181+
"startThumbName": "output",
182+
"endThumbName": "min",
183+
"lineType": "BezierCubic",
184+
"nodeType": "Connection",
185+
"layer": 1,
186+
"nodeInfo": {}
187+
},
188+
{
189+
"id": "4d2bfc6a-c84c-4713-aa26-c4c7cf5fe031",
190+
"x": -4322.121461875386,
191+
"y": -67.06207201421323,
192+
"endX": -4189.832167694787,
193+
"endY": -150.5327188962175,
194+
"startNodeId": "792ca34d-2a12-4c6b-948d-976878762f5a",
195+
"endNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
196+
"startThumbName": "output",
197+
"endThumbName": "max",
198+
"lineType": "BezierCubic",
199+
"nodeType": "Connection",
200+
"layer": 1,
201+
"nodeInfo": {}
202+
},
203+
{
204+
"id": "55b8d8a4-4abb-4aae-993b-d521caf4a577",
205+
"x": -4039.832167694787,
206+
"y": -153.0327188962175,
207+
"endX": -3896.15811456064,
208+
"endY": 36.76376610512207,
209+
"startNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
210+
"endNodeId": "b5d7481b-d7d3-4fb2-ab28-c3720b702e45",
211+
"startThumbName": "output",
212+
"endThumbName": "input",
213+
"lineType": "BezierCubic",
214+
"nodeType": "Connection",
215+
"layer": 1,
216+
"nodeInfo": {}
217+
},
218+
{
219+
"id": "5d775479-193c-4b7a-8e43-cab5ea2f9aaa",
220+
"x": -3786.15811456064,
221+
"y": 61.76376610512207,
222+
"endX": -3435.7626536580715,
223+
"endY": 213.3138129785275,
224+
"startNodeId": "b5d7481b-d7d3-4fb2-ab28-c3720b702e45",
225+
"endNodeId": "28c40617-07b5-499a-8312-b18539fe6a3a",
226+
"startThumbName": "output2",
227+
"endThumbName": "input",
228+
"lineType": "BezierCubic",
229+
"nodeType": "Connection",
230+
"layer": 1,
231+
"nodeInfo": {}
232+
},
233+
{
234+
"id": "5c32bb23-03ed-4ee6-8562-3160a216a87d",
235+
"x": -3786.15811456064,
236+
"y": 11.763766105122073,
237+
"endX": -3439.480690266502,
238+
"endY": -301.0059078104181,
239+
"startNodeId": "b5d7481b-d7d3-4fb2-ab28-c3720b702e45",
240+
"endNodeId": "11331856-fc53-452a-9e2e-e34d63ee50e6",
241+
"startThumbName": "output1",
242+
"endThumbName": "input",
243+
"lineType": "BezierCubic",
244+
"nodeType": "Connection",
245+
"layer": 1,
246+
"nodeInfo": {}
247+
},
248+
{
249+
"id": "30f95439-d788-4f2f-9bb3-48a7b19972a7",
250+
"x": -3327.769752766502,
251+
"y": -301.0059078104181,
252+
"endX": -3069.283817961301,
253+
"endY": -218.48101644286925,
254+
"startNodeId": "11331856-fc53-452a-9e2e-e34d63ee50e6",
255+
"endNodeId": "e29ba7fe-166c-4789-83ff-fac108532cc4",
256+
"startThumbName": "output",
257+
"endThumbName": "input-output",
258+
"lineType": "BezierCubic",
259+
"nodeType": "Connection",
260+
"layer": 1,
261+
"nodeInfo": {}
262+
},
263+
{
264+
"id": "904d1dd2-5f94-4811-a095-cf12713a961a",
265+
"x": -4039.832167694787,
266+
"y": -153.0327188962175,
267+
"endX": -3569.3339366320247,
268+
"endY": -553.0048689865731,
269+
"startNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
270+
"endNodeId": "3d31fec5-9990-4a2b-ba19-faed13ee6b5c",
271+
"startThumbName": "output",
272+
"endThumbName": "input",
273+
"lineType": "BezierCubic",
274+
"nodeType": "Connection",
275+
"layer": 1,
276+
"nodeInfo": {}
277+
},
278+
{
279+
"id": "9840fc6f-7443-4cac-9005-8d5413ef4cc2",
280+
"x": -3369.3339366320247,
281+
"y": -553.0048689865731,
282+
"endX": -2904.0304954218054,
283+
"endY": -339.19282994533506,
284+
"startNodeId": "3d31fec5-9990-4a2b-ba19-faed13ee6b5c",
285+
"endNodeId": "e29ba7fe-166c-4789-83ff-fac108532cc4",
286+
"startThumbName": "output",
287+
"endThumbName": "input-output",
288+
"lineType": "BezierCubic",
289+
"nodeType": "Connection",
290+
"layer": 1,
291+
"nodeInfo": {}
292+
},
293+
{
294+
"id": "85bed315-0f2a-4422-823e-79495a725d71",
295+
"x": -3199.8175467210804,
296+
"y": -174.45081422621007,
297+
"endX": -3077.4260250648013,
298+
"endY": -170.83890505005985,
299+
"startNodeId": "41dc0c0d-cbc5-47c9-9dfb-bd9aa8606da8",
300+
"endNodeId": "e29ba7fe-166c-4789-83ff-fac108532cc4",
301+
"startThumbName": "output",
302+
"endThumbName": "input-output",
303+
"lineType": "BezierCubic",
304+
"nodeType": "Connection",
305+
"layer": 1,
306+
"nodeInfo": {}
307+
},
308+
{
309+
"id": "11f05e50-ddff-4797-9a4a-ad9ed0356757",
310+
"x": -3786.15811456064,
311+
"y": 11.763766105122073,
312+
"endX": -3602.692338268237,
313+
"endY": -1.306304496627547,
314+
"startNodeId": "b5d7481b-d7d3-4fb2-ab28-c3720b702e45",
315+
"endNodeId": "9e5ada78-cb83-4778-a3a5-2bcbc819e777",
316+
"startThumbName": "output1",
317+
"endThumbName": "input",
318+
"lineType": "BezierCubic",
319+
"nodeType": "Connection",
320+
"layer": 1,
321+
"nodeInfo": {}
322+
},
323+
{
324+
"id": "ca2840b3-5353-4534-bd49-38247bea0e0f",
325+
"x": -3402.692338268237,
326+
"y": -1.306304496627547,
327+
"endX": -3311.5284842210804,
328+
"endY": -174.45081422621007,
329+
"startNodeId": "9e5ada78-cb83-4778-a3a5-2bcbc819e777",
330+
"endNodeId": "41dc0c0d-cbc5-47c9-9dfb-bd9aa8606da8",
331+
"startThumbName": "output",
332+
"endThumbName": "input",
333+
"lineType": "BezierCubic",
334+
"nodeType": "Connection",
335+
"layer": 1,
336+
"nodeInfo": {}
337+
}
338+
]
339+
}
340+
},
341+
"compositions": {}
342+
}

‎libs/app-canvas/src/app/components/navbar-components.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ export class NavbarComponent extends Component<
100100
<option value="kmeans.json">K-Means clustering</option>
101101
<option value="kmeans-csv-file.json">K-Means clustering of a CSV file</option>
102102
<option value="openai-chat.json">Open AI Chat Completion API</option>
103+
<option value="scatterplot-linearRegression.json">Scatterplot with linear regression</option>
103104
</select>`
104105
}
105106
<children></children>

‎libs/visual-programming-system/src/components/css-classes/thumb-css-classes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export const getThumbCssClasses = () => {
1414
dragging: 'dragging',
1515
hovering: 'hovering',
1616
nodePortClasses: `inline-flex items-center origin-center relative`,
17-
prefixIconClasses: `relative text-white -left-[10px] thumb-prefix-icon`,
17+
prefixIconClasses: `relative -left-[10px] thumb-prefix-icon`,
18+
prefixIconDefaultColorClass: `text-white`,
1819
prefixLabelClasses: `thumb-prefix-label absolute whitespace-nowrap pointer-events-none select-none `,
1920
prefixLabelEndClasses: `left-[30px] block`,
2021
prefixLabelStartClasses: `origin-right -translate-x-[100%] text-right flex justify-end`,

‎libs/visual-programming-system/src/components/thumb-node-connector.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
123123
this.rootElement = rootElement;
124124
this.canvasApp = canvasApp;
125125
this.nodeComponent.prefixIcon = thumb.prefixIcon;
126+
this.nodeComponent.prefixIconColor = thumb.prefixIconColor;
126127
this.nodeComponent.prefixLabel = thumb.prefixLabel;
127128
this.nodeComponent.thumbName = thumbName;
128129
this.nodeComponent.x = 0;
@@ -186,10 +187,15 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
186187
);
187188
}
188189
if (thumb.prefixIcon) {
190+
console.log('thumb prefixIcon', thumb.prefixIcon, thumb.prefixIconColor);
189191
createElement(
190192
'div',
191193
{
192-
class: `${this.cssClasses.prefixIconClasses} ${thumb.prefixIcon}`,
194+
class: `${this.cssClasses.prefixIconClasses} ${thumb.prefixIcon} ${
195+
thumb.prefixIconColor
196+
? thumb.prefixIconColor
197+
: this.cssClasses.prefixIconDefaultColorClass
198+
}`,
193199
},
194200
this.circleElement.domElement
195201
);

0 commit comments

Comments
 (0)