Graph side bar redesign

[flash1293]

The side bar in the Graph app is a complex UI element that contains lots of different functions used to manipulate the shown Graph visualization.

For a new user it is often difficult to find a specific function. As part of rewriting Graph in Typescript and React (https://github.com/elastic/kibana/issues/44225), the usability of the side bar should be improved.

The side bar contains controls for the following functions - all of these should be available in some form:

• Top icon bar

  • Undo / redo
  • Explore new vertices (spidering out)
  • Fill in links between vertices
  • Remove vertices
  • Remove and blacklist vertices
  • Change color of selected vertices
  • Show drill-down links
  • Pause/start force layout

• Selections

  • Select all vertices
  • Unselect all vertices
  • Invert selection
  • Expand selection to vertices linked to currently selected vertices

• Shortcut drilldowns with icons (if there are drilldowns with icons configured)

  

• Vertex detail view

  • Group/ungroup selected vertices (if multiple or a group is selected)
  • Change vertex label

• Connection detail view

  • Group target of connection into source of connection
  • Group source of connection into target of connection
  • Venn diagram of overlapping documents

• Drilldown area

  • Open new tab for each configured drilldown

• Styling area

  • Change color for all selected vertices

cc @monfera @cchaos @shaunmcgough

[elasticmachine]

Pinging @elastic/kibana-app

[shaunmcgough]

One way to do this is like they do In Maps, the sidebars toggle very nicely on / off. If you click to edit, another flyout appears and moves the whole workspace over as well. In general I am a big fan of the first two Off / On which I've posted below. The toggle is black, as this was taken in dark mode.

Off

On

On w/ Edit

[flash1293]

Besides finding a nice way to represent all of the functions of the side bar (undo, redo, details viewer and so on), I would also like to change something about the flow the user adds vertices to the workspace. Currently the user is just clicking the plus button which calls the explore api underneath. The results are then merged into the graph. To give the user more control over what happens I would like to separate this into two steps. There is a side bar showing what would be added if the plus button would be clicked, and the user can either pick the vertices they are interested in or they "add all".

(redpen with a few remarks: https://redpen.io/kyca0cb1c695bbcfec)

This layout is also helpful when there are more ways to create vertices (all terms from a field, saved queries and probably more like this) Later when we add the features, it could look like this:

[rayafratkina]

+1 on the proposed flow change to add an explicit step including results of search in the graph

[miukimiu]

Hi all,

Here's a design prototype with some ideas for the sidebar. All suggestions and comments are welcome. You can add your comment right on Figma: https://www.figma.com/file/6ItUBrduSUo84oqZATwm4I/Graph-Sidebar?node-id=0%3A1

@shaunmcgough I used a similar widget/sidebar like the one you suggested.

[flash1293]

Hi @miukimiu ,

this looks great!

A few comments:

• The vertices in the sidebar should be individual terms of the fields, not just fields.
• Do you think it makes sense to have another panel in the explore sidebar when the user searches for something in the search bar? Or should this add the vertices directly to the workspace?
• We have to put detail-information about vertices and connections somewhere - one option would be another widget below the selection widget, but maybe popovers work better for this? Like if you hover a vertex or connection, a popover pops up showing detailed information about it. This could be extended later to show various metrics about a vertex.
• I'm not sure how drilldowns fit into this. It should be possible to drill down to a single vertex, a single connection or a selection of multiple vertices. It might make sense to have this as a part of the selection widget

[miukimiu]

Hi @flash1293, I'm still working on a few ideas. If you see the Figma Prototype there's a popover for connections.

But I guess I can share the designs in progress in our weekly meeting. 😃

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[timductive]

Closing this because it's not planned to be resolved in the foreseeable future. It will be tracked in our Icebox and will be re-opened if our priorities change. Feel free to re-open if you think it should be melted sooner.