feat: added separate colors for sideInput and dynamic legend #1292
Conversation
veds-g
commented
Oct 30, 2023
veds-g
commented
- Added separate color for each generator nodes as well as for the corresponding input to the vertices
- Added dynamic legend (only shows the nodes present in graph)
- Fix graph height to occupy 100% area, when summary is collapsed / uncollapsed
- Added tooltip for graph interaction buttons
- Styled the collapsed summary on pipeline view and adjusted the play/pause buttons, error panel and graph interaction panel
Signed-off-by: veds-g <guptavedant2312@gmail.com>
Signed-off-by: veds-g <guptavedant2312@gmail.com>
Signed-off-by: veds-g <guptavedant2312@gmail.com>
| @@ -301,6 +305,7 @@ export function SummaryPageLayout({ | |||
| ]); | |||
|
|
|||
| const contentMargin = useMemo(() => { | |||
| if (collapsable) return 0; | |||
There was a problem hiding this comment.
Confused about this change. We want "contentMargin" to be the number of px to push the main content down so the summary isn't overlaying it.
Wouldn't this always return 0 for the pipeline's usage, given it is "collapsable"?
Looking further into the changes, I see what you are doing. I think it would be best to have SummaryPageLayout still apply the marginTop as it did before. If you want it to not apply any margin when it collapses, just pass offsetOnCollapse as false.
Adding it to context to adjust your other items (buttons and etc.) is fine, but i think the main layout margin should be controlled here.
| GeneratorColorContext | ||
| ); | ||
|
|
||
| const getSideInputColor = (nodeName: string) => { |
There was a problem hiding this comment.
Or just put outside of the component so it is not in render loop.
| }; | ||
| }; | ||
|
|
||
| if (data?.type === "sideInput") { | ||
| const generatorImage = { |
There was a problem hiding this comment.
+1 can be moved outside of component (const at top of file)
| }} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| {data?.nodeInfo?.sideInputs?.map((_, idx) => { | ||
| {data?.nodeInfo?.sideInputs?.map((input, idx) => { | ||
| const inputImage = { |
Signed-off-by: veds-g <guptavedant2312@gmail.com>
…j#1292) Signed-off-by: veds-g <guptavedant2312@gmail.com> Co-authored-by: Bradley Behnke <bradleybehnke@yahoo.com>
