onioncollab/src/frontend/versioned_model/help_text.tsx

import * as React from "react";
import * as Mantine from "@mantine/core";

const graphEditorLegend = <>
  <Mantine.Divider label="Legend" labelPosition="center"/>
  <Mantine.Text>
    <b>Blue node</b>: Ordinary node (with GUID)<br/>
    <b>Orange node</b>: Value node<br/>
    <b>Arrow</b>: Edge (with label)<br/>
  </Mantine.Text>
</>;

const rountangleEditorLegend = <>
  <Mantine.Divider label="Legend" labelPosition="center"/>
  <Mantine.Text>
    <b>Rountangle</b>: Rountangle (with GUID)<br/>
  </Mantine.Text>
</>;

export const graphEditor = <>
  {graphEditorLegend}
  <Mantine.Divider label="Controls" labelPosition="center"/>
  <Mantine.Text>
    <b>Left-Drag</b>: Drag Node<br/>
    <b>Middle-Click</b>: Delete Node<br/>
    <b>Right-Click</b>: Create Node<br/>
    <b>Right-Drag</b>: Create Edge (to Node or Value)<br/>
    <b>Wheel</b>: Zoom<br/>
  </Mantine.Text>
</>;

export const graphEditorReadonly = <>
  {graphEditorLegend}
  <Mantine.Divider label="Controls (read-only mode)" labelPosition="center"/>
  <Mantine.Text>
    <b>Left-Drag</b>: Drag Node<br/>
    <b>Wheel</b>: Zoom<br/>
  </Mantine.Text>
</>;

export const rountangleEditor = <>
  <Mantine.Divider label="Controls" labelPosition="center"/>
  <Mantine.Text>
    <b>Right-Click</b>: Create Rountangle<br/>
    <b>Alt + Left-Click or Middle-Click</b>: Delete Rountangle<br/>
    <b>Left-Drag</b>: Move/Resize Rountangle / Pan Canvas<br/>
    <b>Wheel</b>: Zoom<br/>
  </Mantine.Text>
</>;

export const deltaGraph = <>
  <Mantine.Divider label="Legend" labelPosition="center"/>
  <Mantine.Text>
    <b>Node</b>: Delta<br/>
    <b>Arrow</b>: Dependency<br/>
    <b>Yellow line</b>: Conflict<br/>
    Active deltas are <b>bold</b>.
  </Mantine.Text>
  <Mantine.Divider label="Controls" labelPosition="center"/>
  <Mantine.Text>
    <b>Left-Drag</b>: Drag Node<br/>
  </Mantine.Text>
</>;

export const historyGraph = <>
  <Mantine.Divider label="Legend" labelPosition="center"/>
  <Mantine.Text>
    <b>Node</b>: Version<br/>
    <b>Arrow</b>: Parent-version-link<br/>
    Current version is <b>bold</b>.
  </Mantine.Text>
  <Mantine.Divider label="Controls" labelPosition="center"/>
  <Mantine.Text>
    <b>Left-Drag</b>: Drag Node<br/>
    <b>Right-Click</b>: Goto Version<br/>
  </Mantine.Text>
</>;