Combo with custom icon?

[cliffordfajardo]

Hi @Yanyan-Wang,

1. Is it currently possible to render a combo with a custom icon like in the reference example below?

2. If not ^, what type of work would it take to implement this feature?

• 2a. what area of the codebase would I need to look at to help enable this combo feature of using Image/Icon?
• 2b. what files do you think may need to be modified for this combo feature?
• 2c. is this something on the G6 roadmap?
  • If not, maybe this can be a place to discuss how to approach implementation 🙏
• 2d. What level of difficulty or size would you rate this task for a new contributor?
  • I've just begun starting to contribute to some of the Antv libraries like Graphin & I'm still fairly new to the world of non-DOM based rendering (svg/canvas based rendering), hence the reason trying to assess the level of effort required for this

New Combo features?

• allow user to specify an image icon for the combo

• when the icon representing the combo clicks the image transitions away and the real combo content is revealed
  

• allow user to add a halo / icon to the edges of the combo (top-left, top-right, bottom-left, bottom-right)

rectangular-combos-beta.mp4

CleanShot.2022-01-10.at.19.22.30.mp4

Reference article:

• Blog Article 1
• Blog Article 2

[Yanyan-Wang]

Thanks @cliffordfajardo !

Combo in G6 is not perfect yet. I'm working on 2 related features recently:

1. combo layout kinda like the first video in your description: concentric layout inside + force layout outside.
   And I'm extending it to allow the user to configure the inside and outside layout freely. Such as grid layout inside + fa2 layout outside ……

2. support position assignment for combo.
   Currently, the position of the combo is totally depends on the distribution of its children. I'm trying to open the way for assigning the position for the combos directly, and its children will follow it in the same time.

Polishing the combo mechanism is one of the target of G6 in this year, and all the requirements, ideas, and contributions are welcome!! I will finish the two features I mentioned above in a month. To avoid the code conflicts, I suggest contributors to do something related after that.

Before that, maybe getting familiar with core/Item/node, core/item/combo, core/element/combo, and the APIs related in core/graph/graph and core/controller/item will be helpful.

Thanks again!

[Yanyan-Wang]

We published G6 v4.6.0-beta.1 today (2022.2.11):

• combo supports position assignment (graph.updateItem)
• comboCombined layout: allow user to config the inner layout and outer layout of the combo. The innerLayout is concentric and the outerLayout is gForce by default.

here goes a demo with uncombo/combo interactions, and the layout keeps stable

It is still a beta version, the usage could be found here:

• assign position for the combo, and the children follow it:

  G6/packages/core/tests/unit/shape/combo-collapsed-pos-spec.ts

  Line 86 in 19fa2d6

  it('updateItem: combos from no pos update to pos', () => {

• comboForce Layout and part of interactions in the gif above:

  G6/packages/pc/tests/unit/layout/combo-combined-spec.ts

  Line 59 in af2e329

  describe('scenario', () => {

[cliffordfajardo]

Hi @Yanyan-Wang

• Do of you have an example of creating a custom combo (G6.registerCombo(...) that will display a custom icon for the combo node?

@pomelo-nwu

• do you happen to have an example of this in Graphin?

I'm having trouble finding an example online or when searching github for this use case custom icon for the combo (like in concept image shown above)
I started off with this starter code:

• https://codesandbox.io/s/goofy-mountain-zhsh1u?file=/shape/combo/iconFont.js:1087-1109

@pomelo-nwu - mentioned this:

You can customize combo, add one more textShape, and use iconfont

[sklinov]

@cliffordfajardo We had a similar problem on our project but decided to migrate from combos to nodes with all the custom rendering we need. But that requires manual positioning of inner nodes (in our case it's good).
So now all items on the graph are first-class nodes, we are just passing some custom props to their configs for extra functionality.

[cliffordfajardo]

Hi @sklinov ,
Are you saying that you are emulating combo with icon behavior using a custom node you created?

G6.registerNode('node_name_', {
 //...custom code for node to emulate combo?
})

Do you mind sharing a video/image or code snippets (codesandbox.io?) of this?
Github supports dragging and dropping videos/images up to 10MB

I'd like to adapt an example and to use as inspiration 🙏

Bummer 😢 , combo's seem great, I wish you could just pass an img property to them similar to a node.

// Node: https://g6.antv.vision/en/examples/item/defaultNodes#image
{
      id: 'my_node1',
      img: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
      x: 250,
      y: 150,
},

I wish combos allowed adding images this easily:

{
      id: 'my_combo1',
      img: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
      // OR
      fontIcon: {
         text: 'fa-sitemap' // https://fontawesome.com/v4/icon/sitemap
         color: '#.....',
      }
      x: 250,
      y: 150,
},

So now all items on the graph are first-class nodes, we are just passing some custom props to their configs for extra functionality.
Can you share more about this idea? This sounds interesting

Now that you are using nodes for all items, is there anything you feel you are missing out on that combo's had?
Ideally, what would you have wanted from the Combo API that perhaps would have saved you time from needing to create a custom node?

[sklinov]

@cliffordfajardo
Here's what we have now in development.
There are 2 types of nodes - one for "tables", and another for "columns".
So we're manually handling the size and positioning of everything (basically, it's the same dagre.js under the hood).
Sharing some code quickly might be complicated because it's a part of a large project.

Screen.Recording.2022-03-03.at.11.25.37.mov

[sklinov]

@cliffordfajardo

Now that you are using nodes for all items, is there anything you feel you are missing out on that combo's had?

Not really, combo's auto-resizing and positioning were PITA.
For our requirements, I wish combos were more like nested nodes, but that's complicated and looks hard to be abstracted in a good way.
I'm not a huge expert, but If you want to chat more about custom nodes feel free to reach out.

[cliffordfajardo]

Small progress on rendering custom Icons with Combos

G6 team mentioned this:

For custom for combos, similar to `G6.registerNode` and `G6.registerEdge`, you could  use the`addShape('image', ..)` method. in drawShape

Rendering custom Icon 🎉 - https://codesandbox.io/s/custom-combo-icon-image-sxwoql?file=/shape/combo/combo1.js:1305-1306

.....I am just starting to learn the API for custom combo/edges/nodes in general & working towards the goal in the concept images above in the thread

[cliffordfajardo]

I'm not a huge expert, but If you want to chat more about custom nodes feel free to reach out.

Hey @sklinov - I'd love to talk more about custom nodes, particularly nested nodes, I have not used that pattern yet. Let me know what works best for you.
I can hope on to a zoom video call, use a different chat app whatever works for you; I'll work on your time zone. My email is my github username at gmail dot com

Cheers 🎉

[Yanyan-Wang]

Hi, all. The combo supports image icon for collapsed status now (v4.6.8). See docs here: https://g6.antv.vision/en/docs/manual/middle/elements/combos/defaultCombo#collapsedsubstituteicon

[cliffordfajardo]

@Yanyan-Wang

1. for the new collapsedSubstitutionIcon is there a way to a way in G6 to add label indicators on the combo, for example this image below, without needing to use the G6.registerNode?

2. Graphin has the concept of badges and halos do such concepts exist in G6 for small circular label that look like notification indicators on Combos & Node types?

Code Sandbox Link: https://codesandbox.io/s/amazing-shape-fdvf5f?file=/App.tsx

[Kogl1n]

Hi everyone! @Yanyan-Wang Did combos make it into Graphin? Would you please share a minimum example? Thank you for your effort!