intermine / intermine/bluegenes
Rework tree lines of query builder model/data browser
- 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
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