Eui: Request: Icons for use in ML map view

[alvarezmelissa87]

ML will be introducing a graph/map view https://github.com/elastic/kibana/issues/75295
This view a visual way to connect jobs to their source indices/transforms and resulting inference models.

Icons to represent transform, index, and inference models will be needed. Another icon to use as the map action will also be needed. The 'graphApp' icon is being used temporarily.

It would be great to have a default icon for ML as well.

cc @mdefazio

[mdefazio]

Posting here from our discussion on Slack: Provided some EUI glyph options as a starting point. These should probably be single color icons as they will be used alongside other EUI glyphs.

[alvarezmelissa87]

Thanks for the glyph suggestions, @mdefazio! 🙏

Here are the glyphs to be used as a starting point:

• visMapRegion works for the map action icon
• aggregate should work for Transform
• indexMapping is probably suitable for index

Follow up comments:

• is there a default icon we can use for when the type is not known?
• it would be good to have an icon that's more reflective of what a 'training model' is to use for the model nodes
• would it be possible to get 16x16 (or whichever size matches the glyphs) for regression / outlier / classification icons to use in the map so the sizes are consistent?

[cchaos]

I think we're running into an issue here where we're trying too much to optimize for re-use of existing glyphs that it misconstrues the meaning of the glyph itself.

For example, the timeline icon was created and is used specifically for the SIEM app's timeline feature. It could possibly be used to represent other timeline style data visualizations. However, trying to match it to mean Index pattern is not right.

Index pattern is a global feature of Kibana and Elastic. Conflating it with timeline via an icon will be very confusing to the user. A more appropriate icon here would be reuse indexPatternApp as it directly relates to the concept of index patterns.

---

For the map icon, I would actually continue to use the graph icon (colored singularly) as it best represents that type of network graph.

---

I see that in the PR screenshot, it's currently using shapes and a legend to indicate the different types of nodes. I actually think this is a much better approach than trying to re-use icons inside the nodes.

1. Even if you switched to icons, you'd still need a legend
2. It allows the text to be the prominent information.
3. Easier to scan and see compare the nodes types. It's much easer to compare a diamond shape to a circle than it is to compare a line-art icon to a line-art icon.

You do currently have 2 circles, though, with the only difference being an outline color. I'd lean more into shading of the whole node.

Here's an example of how much easier it can be to scan if you lean into shapes, shading and borders

[alvarezmelissa87]

@cchaos - those are good points. Here is a screenshot with the added icons (except for trained model) discussed above for comparison:

I think the analytics job type icons are necessary as the user needs a visual way to differentiate between types of jobs. As for the other icons - I see your point of leaning into borders/shading. Though would that approach work just as well for dark mode?

@peteharverson - any thoughts on this?

[mdefazio]

I don't think there should be any issue with finding variations of borders/shading that work in both light and dark mode. At the size shown, I don't think the icons are that discernable that I could guess what they relate to—they're purposely a bit similar so they relate when in cards shown side by side.

I think we could create sub-variations using shapes that provide better distinction at this level, but still show they are related as job types. (For example, maybe a circle with a square inside, and a circle with a triangle inside).

[peteharverson]

I like the use of shape and border color to distinguish between the four node types. @alvarezmelissa87 is there a fourth shape Cytoscape provides that we could use for the trained (inference) model node?

If we are sticking with icons inside the shape, the trained (inference) model node needs an icon too. Otherwise with its grey border and lack of icon, it appears less prominent in the map.

@cchaos could we use the indexMapping icon type for the 'index' type node- note strictly speaking this represents an ES index, and not an index pattern (correct me if I'm wrong @alvarezmelissa87). I agree the timeline icon is not appropriate here. Otherwise the indexPatternApp one works for me.

We need some way to distinguish between the different types of analytics jobs node (currently 3 types - Outlier, Regression and Classification). The job IDs in the screenshot here give a clue to the job type, but many users will not include the job type in the ID. If you could come up with sub-variations of the larger icons used in the wizard that would be great @mdefazio. That would also link the shapes in the map to those buttons in the wizard.

Looking at those icons, how about something involving:

• Outlier - circle with a circle inside (or would concentric circles look odd, giving it a target like appearance!?)
• Regression - circle with a square inside
• Classification - circle with a plus inside

Is increasing the size of the shape in the map an option, which would give @mdefazio more room to play with when designing the sub-variations?