Skip to content

Commit

Permalink
#2033 Support new link line types (part 3) (#2043)
Browse files Browse the repository at this point in the history 
Signed-off-by: CTomlyn <[email protected]>
  • Loading branch information
@tomlyn
tomlyn authored Jun 29, 2024
1 parent 14ef775 commit 5359601
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 48 deletions.
74 changes: 37 additions & 37 deletions canvas_modules/harness/src/client/components/custom-canvases/network/network-flow.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"doc_type": "pipeline",
"version": "3.0",
"json_schema": "https://api.dataplatform.ibm.com/schemas/common-pipeline/pipeline-flow/pipeline-flow-v3-schema.json",
"id": "all-ports-123",
"id": "network-pipeline-flow",
"primary_pipeline": "54321",
"pipelines": [
{
Expand All @@ -16,8 +16,8 @@
"ui_data": {
"label": "Database - 4",
"image": "images/custom-canvases/flows/palette/icons/table.svg",
"x_pos": -735,
"y_pos": 540,
"x_pos": 17.5,
"y_pos": 405,
"description": "Database node"
}
},
Expand Down Expand Up @@ -58,8 +58,8 @@
"ui_data": {
"label": "Database - 6",
"image": "images/custom-canvases/flows/palette/icons/table.svg",
"x_pos": -735,
"y_pos": 810,
"x_pos": 17.5,
"y_pos": 675,
"description": "Database node"
}
},
Expand Down Expand Up @@ -107,8 +107,8 @@
"ui_data": {
"label": "Application - 8",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": -735,
"y_pos": 645,
"x_pos": 17.5,
"y_pos": 510,
"description": "Application node"
}
},
Expand Down Expand Up @@ -149,8 +149,8 @@
"ui_data": {
"label": "Database - 5",
"image": "images/custom-canvases/flows/palette/icons/table.svg",
"x_pos": -542.5,
"y_pos": 645,
"x_pos": 210,
"y_pos": 510,
"description": "Database node"
}
},
Expand Down Expand Up @@ -203,8 +203,8 @@
"ui_data": {
"label": "Commissions Calculator",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": -402.5,
"y_pos": 495,
"x_pos": 350,
"y_pos": 360,
"description": "Application node"
}
},
Expand Down Expand Up @@ -257,8 +257,8 @@
"ui_data": {
"label": "Database - 2",
"image": "images/custom-canvases/flows/palette/icons/table.svg",
"x_pos": -227.5,
"y_pos": 495,
"x_pos": 525,
"y_pos": 360,
"description": "Database node"
}
},
Expand Down Expand Up @@ -311,8 +311,8 @@
"ui_data": {
"label": "Queue Manager - 1",
"image": "images/custom-canvases/flows/palette/icons/userinput.svg",
"x_pos": -402.5,
"y_pos": 810,
"x_pos": 350,
"y_pos": 675,
"description": "Queue Manager node"
}
},
Expand Down Expand Up @@ -370,8 +370,8 @@
"ui_data": {
"label": "Application - 6",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": -227.5,
"y_pos": 735,
"x_pos": 525,
"y_pos": 600,
"description": "Application node"
}
},
Expand Down Expand Up @@ -412,8 +412,8 @@
"ui_data": {
"label": "Application - 3",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": -70,
"y_pos": 645,
"x_pos": 682.5,
"y_pos": 510,
"description": "Application node"
}
},
Expand Down Expand Up @@ -461,8 +461,8 @@
"ui_data": {
"label": "Application - 2",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": -35,
"y_pos": 315,
"x_pos": 717.5,
"y_pos": 180,
"description": "Application node"
}
},
Expand Down Expand Up @@ -525,8 +525,8 @@
"ui_data": {
"label": "Database - 1",
"image": "images/custom-canvases/flows/palette/icons/table.svg",
"x_pos": -192.5,
"y_pos": 165,
"x_pos": 560,
"y_pos": 30,
"description": "Database node"
}
},
Expand Down Expand Up @@ -579,8 +579,8 @@
"ui_data": {
"label": "Application - 5",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": 122.5,
"y_pos": 165,
"x_pos": 875,
"y_pos": 30,
"description": "Application node"
}
},
Expand Down Expand Up @@ -633,8 +633,8 @@
"ui_data": {
"label": "Queue Manager - 2",
"image": "images/custom-canvases/flows/palette/icons/userinput.svg",
"x_pos": 140,
"y_pos": 435,
"x_pos": 892.5,
"y_pos": 300,
"description": "Queue Manager node"
}
},
Expand Down Expand Up @@ -687,8 +687,8 @@
"ui_data": {
"label": "Application - 7",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": -35,
"y_pos": 465,
"x_pos": 717.5,
"y_pos": 330,
"description": "Application node"
}
},
Expand Down Expand Up @@ -729,8 +729,8 @@
"ui_data": {
"label": "Database - 3",
"image": "images/custom-canvases/flows/palette/icons/table.svg",
"x_pos": 140,
"y_pos": 600,
"x_pos": 892.5,
"y_pos": 465,
"description": "Database node"
}
},
Expand Down Expand Up @@ -778,8 +778,8 @@
"ui_data": {
"label": "Application - 4",
"image": "images/custom-canvases/flows/palette/icons/autodataprep.svg",
"x_pos": -70,
"y_pos": 825,
"x_pos": 682.5,
"y_pos": 690,
"description": "Application node"
}
},
Expand Down Expand Up @@ -820,8 +820,8 @@
"ui_data": {
"label": "Queue Manager - 3",
"image": "images/custom-canvases/flows/palette/icons/userinput.svg",
"x_pos": 70,
"y_pos": 810,
"x_pos": 822.5,
"y_pos": 675,
"description": "Queue Manager node"
}
},
Expand Down Expand Up @@ -860,8 +860,8 @@
"comments": [
{
"id": "e6381626-0d9e-4e22-9943-80ccaaee4ebb",
"x_pos": -735,
"y_pos": 165,
"x_pos": 17.5,
"y_pos": 30,
"width": 350,
"height": 180,
"class_name": "bkg-col-teal-20",
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/harness/src/client/components/custom-canvases/parallax/parallax-flow.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"doc_type": "pipeline",
"version": "3.0",
"json_schema": "https://api.dataplatform.ibm.com/schemas/common-pipeline/pipeline-flow/pipeline-flow-v3-schema.json",
"id": "parallax-flow-123",
"id": "parallax-pipeline-flow",
"primary_pipeline": "54321",
"pipelines": [
{
Expand Down
21 changes: 11 additions & 10 deletions docs/pages/03.06.01-node-customization.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,20 +343,21 @@ layoutHandler(data) {
## Overriding port positions and link directions
The four options for [enableLinkDirection](03.02.01-canvas-config.md/#enablelinkdirection) canvas config ("LeftRight", "RightLeft", "TopBottom" and "BottomTop") will control the default position of the input and output ports at the boundaries of the nodes as follows:
The four options for [enableLinkDirection](03.02.01-canvas-config.md/#enablelinkdirection) in the canvas config are "LeftRight", "RightLeft", "TopBottom" and "BottomTop". These will control the default position of the input and output ports at the boundaries of the nodes as follows:
* For "LeftRight" output ports will be on the right of the node and input ports will be on the left of the node
* For "RightLeft" output ports will be on the left of the node and input ports will be on the right of the node
* For "TopBottom" output ports will be on the bottom of the node and input ports will be on the top of the node
* For "BottomTop" output ports will be on the top of the node and input ports will be on the bottom of the node
* For "LeftRight" input ports will be on the left of the node and output ports will be on the right of the node
* For "RightLeft" input ports will be on the right of the node and output ports will be on the left of the node
* For "TopBottom" input ports will be on the top of the node and output ports will be on the bottom of the node
* For "BottomTop" input ports will be on the bottom of the node and output ports will be on the top of the node
The application can customize these default position of the ports using the `enableNodeLayout` object in the canvas config. This object has these fields:
The application can customize these port default positions using the `enableNodeLayout` object in the canvas config. This object has these fields for port placement customization:
* `inputPortAutoPosition` and `inputPortPositions` to customize input ports and
* `outputPortAutoPosition` and `outputPortPositions` to customize output ports.
So for example, with the following settings
So for example, the following settings:
```js
const config = {
enableNodeLayout: {
Expand All @@ -368,7 +369,8 @@ So for example, with the following settings
}
};
```
will position the input ports like this
will position the input ports like this:
<img src="../assets/cc-node-port-custom.png" width="100" />
Expand All @@ -390,9 +392,8 @@ If the config field [enableLinkMethod](03.02.01-canvas-config.md#enablelinkmetho
<img src="../assets/cc-link-multi-ports-connected.png" width="350" />
Note that the same technique is used to assign port 'directions' to the ports of the surrounding nodes as well as the center node.
This means an application like the one shown below can be built, where the links exit from the left of the 'Inp_1' node and point to the 'Stage Variables' node below it, but other links exist the 'Inp_1' node on the right and point to the 'Out_2'. This is achieved by positioning some (invisible) output nodes on the left of 'Inp_1' and some on the right of 'Inp_1'. Common Canvas takes care of drawing the links in the appropriate direction based on the port positions.
This means an application like the one shown below can be built, where the links exit from the left of the 'Inp_1' node and point to the 'Stage Variables' node below it. Meanwhile, other links exist the 'Inp_1' node on its right and point to the 'Out_2' node. This is achieved by positioning some (invisible) output nodes on the left of 'Inp_1' and some on the right of 'Inp_1'. Common Canvas takes care of drawing the links in the appropriate direction based on the port positions.
<img src="../assets/cc-link-mapping-transformer.png" width="900" />
Expand Down

0 comments on commit 5359601

Please sign in to comment.