intermine / intermine/bluegenes

Rework tree lines of query builder model/data browser

Open
#491 0 comments 0 reactions 0 assignees View on GitHub
Medium priority Query Builder
Dominant language
Clojure
Stars
75
Forks
59
PR merge metrics
No merged PRs in 30d

Description

The lines connecting the nodes in the tree shown in the model and data browser use a hacky solution with borders and negative margins. This results in the height of the items collapsing if all the nodes are expanded. To avoid this, we adjusted the spacing, but the result is that the lines do not align perfectly with the nodes.

We should replace this with a more robust solution. Possibly inspired by the tree lines in the Organize modal (https://github.com/intermine/bluegenes/blob/dev/less/components/organize.less).

*Update; feedback from Gos: Maybe a circle with a horizontal line joining the sides? In which case the + might be in a circle touching the sides too. Perhaps lines as thin as the vertical lines? A related point, if you follow a long line down it can be a little difficult to be sure which column of words it corresponds to. If you were to have small circles for each word directly under the end of the verical line it would become clear.*

Contributor guide

Open the contributing guide

Research direction

Start with less/components/organize.less, then locate the current tree-line styling used by the model and data browser. Compare the approaches and define a robust replacement that keeps expanded item heights intact and aligns the connecting lines with nodes; use the issue's circle and horizontal-line suggestions as design considerations.

Written by the indexing model from the issue text.

Assessment

Tech stack
clojure
Domain
design, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.