[Design] More visual mappings (EuiTokenMap) for specific ES field types

[cchaos]

It would be great to incorporate these icons into the mappings editor at some point. I did a quick audit, and there are a few field types that are available in the mappings editor, but do not have a dedicated icon. Here is the list with a brief description, along with a link to the documentation.

• Binary: a binary value as a Base64-encoded string
• Completion suggester: provides autocomplete functionality
• Dense vector: stores vectors of float values
• Flattened: maps an object as a single field
• Join: defines parent-child relationships among documents of the same index
• Keyword: supports searching for an exact value
• Percolator: enables percolator queries
• Rank feature: accepts a number that will boost documents in rank_feature queries
• Rank features: accepts numeric vectors that will boost documents in rank_feature queries
• Search-as-you-type: breaks strings into subfields for search suggestions, and will match terms at any position in the string
• Text: supports full-text search by breaking strings into individual, searchable terms
• Token Count: accepts string values; these values are analyzed, and the number of tokens in the string are indexed

Originally posted by @alisonelizabeth in #57911 (comment)

[elasticmachine]

Pinging @elastic/kibana-design (Team:Design)

[mdefazio]

@alisonelizabeth , I've started some initial sketches on these (gh doesn't want to let me upload it at the time though). While I certainly expect to go through many iterations of these, the ones I'm struggling with mostly are Dense vector and Percolator. Could you provide some more explanation or any ideas you have to represent these?
Also curious how abstract we can go with these as well. Perhaps once the user sees it 1x or 2x, they understand it?

[mdefazio]

Here's the screenshot of where I am at the moment. Still very rough obviously.

[cchaos]

I would just be careful about making icons that are quite detailed at that small size, like the one you have for Join. I also think it's ok to use the same symbol for closely related fields like Rank feature and Rang features. Even something like Text could possibly use the same symbol as String (lowecase t).

[mdefazio]

Round 2: I've tried simplifying these some more and went a bit more abstract. I tweaked the join token to your point above.

These are still rough, so I think the sizing of these will need to be cleaned up still, but I'm trying to nail down the subject matter first.

[alisonelizabeth]

Thanks @mdefazio for working on these icons! This is awesome.

While I certainly expect to go through many iterations of these, the ones I'm struggling with mostly are Dense vector and Percolator.

Sorry for the late response here, but I think what you came up with for dense vector is fine. Percolator is a tough one. I don't have any alternative suggestions atm. As you mentioned, I do think a user will start to associate the icon with the type once they start seeing it together.

[joshdevins]

Dense vectors are commonly notated as an array: [0.234, 1.823, 0.235]. What about a dense vector representation as just []? Or too easily confused with array types?

[cchaos]

I think we'd be ok representing what format the field expects via the icon. As mentioned with the Dense vectors, if they always have to be represented as an array then showing as the array icon works. Similar to using the t icon for string and text

[mdefazio]

After discussing with @cjcenizal , here's another round of options.

For dense vector, I wanted to try to differentiate from the array token in some way. Not sure it's quite working yet, but want to continue to explore some options.

Hopefully there's a few in here that are closer.

[cchaos]

My only concern is that some of these are overly complicated for their size. Consider what they will look like on non-retina screens and the fact that Token icons are usually rendered at the smaller 12x12 size.

[mdefazio]

Need to add in token for Histogram #61003