Node Header and Footer

[sroussey]

How do you suggest altering the NodeHeader?

Also, it would be great if we could add a NodeFooter.

[clarkmcc]

When you say how do you alter it, are you asking how we should alter it through the config file? Or where in the code it should be edited?

[sroussey]

Is there a way as a user of the library? I can find the code location

I want to add some affordances for activity/state (I’m doing a task runner). Maybe a spinner in the header or a progress bar in the footer. I think you are planning other things for the header now that I think of it, so I may add an option for a footer.

Then I need to signal the node from node data somehow. Will look into that today.

[clarkmcc]

Ah interesting, so as the user of the library, you'd like the ability to customize the NodeHeader component that's used? Would this be the global node header, or would you like to customize it more granularly.

[clarkmcc]

I've seen this slot strategy used before. Would something along these lines meet your needs?

[sroussey]

Yeah, having slots would be great.

[sroussey]

The problem with a custom node is that you can't just tweak it. You can't use the input or output or inputGroups, as all of that is private inside node-types.tsx

[sroussey]

Oh, and maybe a good use for nodeKind (more than a theme now!)

[clarkmcc]

I'll get to work on a design for slots.

The problem with a custom node is that you can't just tweak it. You can't use the input or output or inputGroups, as all of that is private inside node-types.tsx

Yeah, that was an intentional design decision though. For the example color picker that's in the storybook, I needed to customize where and how the handle for the color picker worked. I also created a Monaco editor component in another private project and have the flexibility to design the entire thing is quite nice. But if you just need to make a slight tweak, it certainly does come at the cost of requiring you to re-implement most of what the default component looks like.

One option we could look at is a reverse slots mechanism. Where the built in components are provided via slots to the props of the custom component which you can then use, or ignore. We could have slots for

• Inputs
• OutputHandles
• NodeHeader
• NodeFooter

and then you could just use whichever slots you want. I'm not really sure how styling would work between them. But it's something we could experiment with.

[sroussey]

Sounds good!

[sroussey]

See https://github.com/clarkmcc/ngraph/pull/35