Two issues noted when running kino's side by side. The colours are not consistent for the same nodes. We'd prefer a colour to be chosen based on a labels hash or similar, and that would give us consistency both side to side and down the page.
Enhancement — ArtefactKino side-by-side rendering: consistent colours and stable height
Description
When two ArtefactKino widgets are placed side by side using Kino.Layout.grid/2 — for
example, a section artefact on the left and a progressively integrated artefact on the right
— two visual problems arise that break the experience.
Colours shift between instances.
buildLabelHues assigns hues by sorted position within the label set of each artefact
(i / sorted.length * 360). A section artefact with two labels assigns SIGNAL a hue
based on its rank among two. The integrated artefact with seven labels assigns SIGNAL a
completely different hue based on its rank among seven. The same node type renders in a
different colour in each panel. The reader cannot track nodes across the two views.
Description height causes misalignment.
The header renders artefact.description in full. When the description is a multi-line
Cypher string — which is the natural content when building artefacts from yarn — the header
expands to many lines and the two panels no longer align. The graph viewport drops to a
different height in each panel. Side-by-side comparison breaks.
Reproduced in the diffo-dev/ieee1164 livebook, where each section artefact carries its
Cypher source as description:
elixirKino.Layout.grid([
ArtefactKino.new(section_artefact),
ArtefactKino.new(integrated_artefact)
], columns: 2)
What we need
Consistent colour mapping. The same label should always render with the same colour,
regardless of how many labels the artefact contains and regardless of which other instances
exist on the page. A reader watching the graph grow should be able to follow VALUE nodes
by colour from the first panel to the last.
Stable header height. A way to control or suppress the description in the header so
that widgets placed side by side share the same graph height. The decision of how to surface
this is the team's — an option, a separate widget constructor, or a rendering mode.
Why it matters
The primary livebook use of ArtefactKino is showing knowledge grow progressively — a
section on the left, the integrated whole on the right, advancing chapter by chapter. That
experience depends on visual continuity across panels. Without consistent colours the reader
cannot track concepts across the two views. Without stable heights the panels misalign and
the side-by-side illusion collapses.
A possible direction
For colours: replace position-based hue assignment with a deterministic hash of the
label string itself. The same label string always produces the same hue, independent of
what other labels are present.
javascriptfunction labelToHue(label) {
let h = 0;
for (let i = 0; i < label.length; i++) {
h = (h * 31 + label.charCodeAt(i)) & 0xffffffff;
}
return (h >>> 0) % 360;
}for height: a max_description_lines: option that caps the description area to a
given number of lines, with overflow: hidden and a trailing ellipsis beyond that.
The description text is still present and still names the chapter — it just does not
grow the layout. Callers place side-by-side widgets with the same value and the graph
panels share the same height regardless of how much description each artefact carries.
Both are offered as observations about where the gaps sit, not prescriptions.
Two issues noted when running kino's side by side. The colours are not consistent for the same nodes. We'd prefer a colour to be chosen based on a labels hash or similar, and that would give us consistency both side to side and down the page.
Enhancement — ArtefactKino side-by-side rendering: consistent colours and stable height
Description
When two ArtefactKino widgets are placed side by side using Kino.Layout.grid/2 — for
example, a section artefact on the left and a progressively integrated artefact on the right
— two visual problems arise that break the experience.
Colours shift between instances.
buildLabelHues assigns hues by sorted position within the label set of each artefact
(i / sorted.length * 360). A section artefact with two labels assigns SIGNAL a hue
based on its rank among two. The integrated artefact with seven labels assigns SIGNAL a
completely different hue based on its rank among seven. The same node type renders in a
different colour in each panel. The reader cannot track nodes across the two views.
Description height causes misalignment.
The header renders artefact.description in full. When the description is a multi-line
Cypher string — which is the natural content when building artefacts from yarn — the header
expands to many lines and the two panels no longer align. The graph viewport drops to a
different height in each panel. Side-by-side comparison breaks.
Reproduced in the diffo-dev/ieee1164 livebook, where each section artefact carries its
Cypher source as description:
What we need
Consistent colour mapping. The same label should always render with the same colour,
regardless of how many labels the artefact contains and regardless of which other instances
exist on the page. A reader watching the graph grow should be able to follow VALUE nodes
by colour from the first panel to the last.
Stable header height. A way to control or suppress the description in the header so
that widgets placed side by side share the same graph height. The decision of how to surface
this is the team's — an option, a separate widget constructor, or a rendering mode.
Why it matters
The primary livebook use of ArtefactKino is showing knowledge grow progressively — a
section on the left, the integrated whole on the right, advancing chapter by chapter. That
experience depends on visual continuity across panels. Without consistent colours the reader
cannot track concepts across the two views. Without stable heights the panels misalign and
the side-by-side illusion collapses.
A possible direction
For colours: replace position-based hue assignment with a deterministic hash of the
label string itself. The same label string always produces the same hue, independent of
what other labels are present.
for height: a max_description_lines: option that caps the description area to a
given number of lines, with overflow: hidden and a trailing ellipsis beyond that.
The description text is still present and still names the chapter — it just does not
grow the layout. Callers place side-by-side widgets with the same value and the graph
panels share the same height regardless of how much description each artefact carries.
Both are offered as observations about where the gaps sit, not prescriptions.