Skip to content

Commit 78f69d2

Browse files
devhelprdevhelpr
committed
thumb prefix label color tweak and fetch label
1 parent 0382579 commit 78f69d2

File tree

6 files changed

+88
-39
lines changed

6 files changed

+88
-39
lines changed

‎examples-test-flows/openai-fetch-completion-as-stream.json‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,26 @@
88
"nodes": [
99
{
1010
"id": "8f4ac174-5c8e-45da-8ad4-a81a40f4f666",
11-
"x": 3705.3356695038824,
12-
"y": 1054.0469817505104,
13-
"width": 200,
14-
"height": 205,
11+
"x": 3616.058393972282,
12+
"y": 1046.710082355438,
13+
"width": 270.4013005316974,
14+
"height": 221.78921192887083,
1515
"nodeType": "Shape",
1616
"nodeInfo": {
1717
"type": "fetch",
1818
"formValues": {
1919
"url": "https://api.openai.com/v1/chat/completions",
2020
"headers": "Authorization: Bearer [openai-key]",
21-
"http-method": "post"
21+
"http-method": "post",
22+
"label": "openAI"
2223
},
2324
"isSettingsPopup": true
2425
}
2526
},
2627
{
2728
"id": "3cf44538-9913-4aa2-aade-a7c619910f45",
28-
"x": 2888.3560355256773,
29-
"y": 1088.3988411546893,
29+
"x": 2890.7647772355035,
30+
"y": 1088.384052598727,
3031
"width": 178.5078125,
3132
"height": 80,
3233
"nodeType": "Shape",
@@ -128,8 +129,8 @@
128129
},
129130
{
130131
"id": "62d6f81d-08f3-4379-8c9f-f41f3452ea52",
131-
"x": 4625.622731449648,
132-
"y": 1063.1032555200543,
132+
"x": 4623.709806608045,
133+
"y": 1081.196740417652,
133134
"width": 150,
134135
"height": 150,
135136
"nodeType": "Shape",
@@ -144,8 +145,8 @@
144145
},
145146
{
146147
"id": "604d00b5-69c4-4beb-8aca-394674de0d61",
147-
"x": 3778.1806630979127,
148-
"y": 1568.646609133624,
148+
"x": 3778.1807478505457,
149+
"y": 1568.6466705883279,
149150
"width": 260.03125,
150151
"height": 136,
151152
"nodeType": "Shape",
@@ -293,8 +294,8 @@
293294
},
294295
{
295296
"id": "a16c5c54-c867-41af-a922-9a014786c513",
296-
"x": 3905.3356695038824,
297-
"y": 1084.0469817505104,
297+
"x": 3886.4596945039793,
298+
"y": 1076.710082355438,
298299
"endX": 4086.27967757153,
299300
"endY": 1085.5510998151515,
300301
"startNodeId": "8f4ac174-5c8e-45da-8ad4-a81a40f4f666",
@@ -340,8 +341,8 @@
340341
"id": "441e2ae8-bb43-4d98-b5c2-73b5d33f1884",
341342
"x": 4473.497086195699,
342343
"y": 1141.0164055112382,
343-
"endX": 4625.622731449648,
344-
"endY": 1138.1032555200543,
344+
"endX": 4623.709806608045,
345+
"endY": 1156.196740417652,
345346
"startNodeId": "bfc480ee-0c81-4221-a725-252298402221",
346347
"endNodeId": "62d6f81d-08f3-4379-8c9f-f41f3452ea52",
347348
"startThumbName": "output2",
@@ -353,8 +354,8 @@
353354
},
354355
{
355356
"id": "3766e220-8955-4981-9ea5-94bd56926cc1",
356-
"x": 4700.622731449648,
357-
"y": 1063.1032555200543,
357+
"x": 4698.709806608045,
358+
"y": 1081.196740417652,
358359
"endX": 4897.219778315022,
359360
"endY": 1039.0147977761594,
360361
"startNodeId": "62d6f81d-08f3-4379-8c9f-f41f3452ea52",
@@ -370,8 +371,8 @@
370371
"id": "b58697e4-82bf-4d83-917a-03be6daedc12",
371372
"x": 3487.94780194177,
372373
"y": 1118.0470007342954,
373-
"endX": 3705.3356695038824,
374-
"endY": 1156.5469817505104,
374+
"endX": 3616.058393972282,
375+
"endY": 1157.6046883198735,
375376
"startNodeId": "2a227359-4016-4fa7-9788-948030bc0e90",
376377
"endNodeId": "8f4ac174-5c8e-45da-8ad4-a81a40f4f666",
377378
"startThumbName": "output",
@@ -383,8 +384,8 @@
383384
},
384385
{
385386
"id": "0dd730cc-1691-454f-868c-cb19da250699",
386-
"x": 3905.3356695038824,
387-
"y": 1234.0469817505104,
387+
"x": 3886.4596945039793,
388+
"y": 1226.710082355438,
388389
"endX": 4213.2760145580105,
389390
"endY": 1478.0828093084283,
390391
"startNodeId": "8f4ac174-5c8e-45da-8ad4-a81a40f4f666",
@@ -430,8 +431,8 @@
430431
"id": "3601f5bf-09f9-401d-b7de-28d1be639fb5",
431432
"x": 2614.0830229763683,
432433
"y": 1116.511744316569,
433-
"endX": 2888.3560355256773,
434-
"endY": 1128.3988411546893,
434+
"endX": 2890.7647772355035,
435+
"endY": 1128.384052598727,
435436
"startNodeId": "6631fbab-1a06-4f8e-9abc-ee8ac2c3f923",
436437
"endNodeId": "3cf44538-9913-4aa2-aade-a7c619910f45",
437438
"startThumbName": "output",
@@ -443,8 +444,8 @@
443444
},
444445
{
445446
"id": "993273ac-60cc-4c0b-9f50-31b62d6ec3f0",
446-
"x": 3066.8638480256773,
447-
"y": 1128.3988411546893,
447+
"x": 3069.2725897355035,
448+
"y": 1128.384052598727,
448449
"endX": 3287.94780194177,
449450
"endY": 1118.0470007342954,
450451
"startNodeId": "3cf44538-9913-4aa2-aade-a7c619910f45",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const getThumbCssClasses = () => {
1313
dragging: 'dragging',
1414
nodePortClasses: `inline-flex items-center origin-center`,
1515
prefixIconClasses: `relative text-white -left-[10px] thumb-prefix-icon`,
16-
prefixLabelClasses: `thumb-prefix-label whitespace-nowrap relative text-white pointer-events-none select-none `,
16+
prefixLabelClasses: `thumb-prefix-label whitespace-nowrap relative pointer-events-none select-none `,
1717
prefixLabelEndClasses: `-right-[30px] block`,
1818
prefixLabelStartClasses: `origin-right -translate-x-[100%] text-right flex justify-end`,
1919
innerCircleDefaultClasses: `inner-thumb absolute rounded top-[3px] outline outline-[2px] outline-slate-800 outline-solid`,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,8 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
189189
'div',
190190
{
191191
class: `${this.cssClasses.prefixLabelClasses} ${
192+
thumb.prefixLabelCssClass ?? 'text-white'
193+
} ${
192194
thumb.connectionType === ThumbConnectionType.end
193195
? this.cssClasses.prefixLabelEndClasses
194196
: this.cssClasses.prefixLabelStartClasses

‎libs/visual-programming-system/src/interfaces/element.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ export type IThumb = {
200200
formFieldName?: string;
201201
prefixIcon?: string;
202202
prefixLabel?: string;
203+
prefixLabelCssClass?: string;
203204
nodeId?: string;
204205
hint?: string;
205206
};

‎libs/web-flow-executor/src/nodes/fetch.ts‎

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -287,33 +287,46 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
287287
y: number,
288288
id?: string,
289289
initalValues?: InitialValues,
290-
containerNode?: IRectNodeComponent<NodeInfo>
290+
containerNode?: IRectNodeComponent<NodeInfo>,
291+
width?: number,
292+
height?: number
291293
) => {
292294
const url = initalValues?.['url'] ?? '';
293295

294296
canvasAppInstance = canvasApp;
297+
const label = initalValues?.['label'] ?? '';
298+
let text = label;
299+
if (label) {
300+
text = `\n${label}`;
301+
}
295302

303+
const thumbPortColor = 'black';
304+
const thumbLabelPortCssClass = 'text-black';
296305
const jsxComponentWrapper = createElement(
297306
'div',
298307
{
299-
class: `inner-node bg-slate-500 p-4 rounded text-white flex flex-col items-center justify-start`,
308+
class: `inner-node rounded p-4
309+
bg-amber-400 text-black
310+
font-bold
311+
flex flex-row justify-center items-center justify-start`,
300312
},
301313
undefined,
302-
'Fetch'
314+
`Fetch ${text}`.trim()
303315
) as unknown as INodeComponent<NodeInfo>;
304316

305317
const rect = canvasApp.createRect(
306318
x,
307319
y,
308-
200,
309-
100,
320+
width ?? 200,
321+
height ?? 100,
310322
undefined,
311323
[
312324
{
313325
thumbType: ThumbType.StartConnectorRight,
314326
thumbIndex: 0,
315327
connectionType: ThumbConnectionType.start,
316-
color: 'white',
328+
color: thumbPortColor,
329+
prefixLabelCssClass: thumbLabelPortCssClass,
317330
label: '',
318331
prefixLabel: 'data',
319332
name: 'output',
@@ -323,7 +336,8 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
323336
thumbType: ThumbType.StartConnectorRight,
324337
thumbIndex: 1,
325338
connectionType: ThumbConnectionType.start,
326-
color: 'white',
339+
color: thumbPortColor,
340+
prefixLabelCssClass: thumbLabelPortCssClass,
327341
label: '',
328342
name: 'error',
329343
prefixLabel: 'error',
@@ -332,7 +346,8 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
332346
thumbType: ThumbType.StartConnectorRight,
333347
thumbIndex: 2,
334348
connectionType: ThumbConnectionType.start,
335-
color: 'white',
349+
color: thumbPortColor,
350+
prefixLabelCssClass: thumbLabelPortCssClass,
336351
label: '',
337352
name: 'state',
338353
prefixLabel: 'state',
@@ -341,7 +356,8 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
341356
thumbType: ThumbType.StartConnectorRight,
342357
thumbIndex: 3,
343358
connectionType: ThumbConnectionType.start,
344-
color: 'white',
359+
color: thumbPortColor,
360+
prefixLabelCssClass: thumbLabelPortCssClass,
345361
label: '',
346362
name: 'end',
347363
prefixLabel: 'end stream',
@@ -350,7 +366,8 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
350366
thumbType: ThumbType.EndConnectorCenter,
351367
thumbIndex: 0,
352368
connectionType: ThumbConnectionType.end,
353-
color: 'white',
369+
color: thumbPortColor,
370+
prefixLabelCssClass: thumbLabelPortCssClass,
354371
label: '',
355372
//thumbConstraint: 'value',
356373
},
@@ -359,7 +376,7 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
359376
{
360377
classNames: `bg-slate-500 p-4 rounded`,
361378
},
362-
undefined,
379+
true,
363380
undefined,
364381
undefined,
365382
id,
@@ -398,6 +415,30 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
398415
node = rect.nodeComponent;
399416
if (node.nodeInfo) {
400417
node.nodeInfo.formElements = [
418+
{
419+
fieldType: FormFieldType.Text,
420+
fieldName: 'label',
421+
onChange: (value: string) => {
422+
if (!node.nodeInfo) {
423+
return;
424+
}
425+
node.nodeInfo.formValues = {
426+
...node.nodeInfo.formValues,
427+
label: value,
428+
};
429+
if (jsxComponentWrapper.domElement) {
430+
let text = value;
431+
if (value) {
432+
text = `\n${value}`;
433+
}
434+
jsxComponentWrapper.domElement.textContent =
435+
`Fetch ${text}`.trim();
436+
}
437+
if (updated) {
438+
updated();
439+
}
440+
},
441+
},
401442
{
402443
fieldType: FormFieldType.Text,
403444
fieldName: 'url',

‎libs/web-flow-executor/src/nodes/if-condition.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,8 +262,12 @@ export const getIfCondition: NodeTaskFactory<NodeInfo> = (
262262
const jsxComponentWrapper = createNodeElement(
263263
'div',
264264
{
265-
class:
266-
'inner-node flex text-center items-center justify-center w-[150px] h-[150px] overflow-hidden bg-slate-500 rounded',
265+
class: `inner-node
266+
flex text-center items-center justify-center
267+
w-[150px] h-[150px]
268+
overflow-hidden
269+
bg-slate-500 text-white
270+
rounded`,
267271
style: {
268272
'clip-path': 'polygon(50% 0, 100% 50%, 50% 100%, 0 50%',
269273
},

0 commit comments

Comments
 (0)