[147] hierarchical labels

README.md

@@ -5,7 +5,19 @@
 
 A tool to help with reading and analyzing the Gray Paper.
 
-# Updating available versions of the gray paper.
+# Related repositories
+- Gray Paper Reader community notes [graypaper-notes](https://github.com/fluffylabs/graypaper-notes).
+- Gray Paper Archive [graypaper-archive](https://github.com/fluffylabs/graypaper-archive).
+
+# Tooling
+
+- [matrix-bot](./tools/matrix-bot) - Listens to Matrix channel messages and
+  collects the ones containing GP Reader links. These messages can later be
+  turned into notes JSON file.
+- [links-check](./tools/links-check) - Scan a set of files for GP Reader links
+  and check their versions or generate notes JSON file.
+
+# Updating available versions of the Gray Paper
 
 Gray Paper versions are stored in [a separate repository](https://github.com/fluffylabs/graypaper-archive),
 added as a git submodule.

src/components/Label/Label.css

@@ -6,3 +6,25 @@
   border-radius: 6px;
   color: #eee;
 }
+
+.label-tree {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  color: #eee;
+}
+
+.label-tree-header {
+  text-align: left;
+  white-space: nowrap;
+  border-radius: 6px;
+  padding: 1px 5px;
+  margin: 2px;
+  color: #eee;
+}
+
+.label-tree-children {
+  display: flex;
+  justify-content: left;
+  gap: 10px;
+}

src/components/Label/Label.tsx

@@ -1,8 +1,73 @@
+import { LABEL_LOCAL, LABEL_REMOTE } from "../NotesProvider/consts/labels";
+import { type IDecoratedNote, NoteSource } from "../NotesProvider/types/DecoratedNote";
+import type { IStorageNote } from "../NotesProvider/types/StorageNote";
 import "./Label.css";
 import { useMemo } from "react";
 
+export type ILabel = {
+  label: string;
+  isActive: boolean;
+  parent: ILabel | null;
+  children: ILabel[];
+  notes: IDecoratedNote[];
+};
+
+export function generateLabelTree(notes: IDecoratedNote[]): ILabel[] {
+  const local: ILabel = {
+    label: LABEL_LOCAL,
+    isActive: true,
+    parent: null,
+    children: [],
+    notes: [],
+  };
+  const remote: ILabel = {
+    label: LABEL_REMOTE,
+    isActive: true,
+    parent: null,
+    children: [],
+    notes: [],
+  };
+
+  function addToTree(labelPath: string[], note: IDecoratedNote, currentNode: ILabel) {
+    if (labelPath.length === 0) {
+      currentNode.notes.push(note);
+      return;
+    }
+
+    const [head, ...rest] = labelPath;
+    let childNode = currentNode.children.find((child) => child.label === head);
+    if (!childNode) {
+      childNode = {
+        label: head,
+        isActive: true,
+        parent: currentNode,
+        children: [],
+        notes: [],
+      };
+      currentNode.children.push(childNode);
+    }
+    addToTree(rest, note, childNode);
+  }
+
+  for (const note of notes) {
+    for (const label of note.original.labels) {
+      const parts = label.trim().split("/");
+      const root = note.source === NoteSource.Local ? local : remote;
+      if (parts.length === 1) {
+        if (parts[0] === LABEL_LOCAL || parts[0] === LABEL_REMOTE) {
+          root.notes.push(note);
+          continue;
+        }
+      }
+      addToTree(parts, note, root);
+    }
+  }
+
+  return [local, remote];
+}
+
 export function Label({ label, prefix = "" }: { label: string; prefix?: string }) {
-  const backgroundColor = useMemo(() => labelToColor(label), [label]);
+  const backgroundColor = useMemo(() => labelToColor(label.split("/").pop() || ""), [label]);
   return (
     <span style={{ backgroundColor }} className="label">
       {prefix} {label}
@@ -41,3 +106,59 @@ function hslToHex(h: number, s: number, lightness: number) {
   };
   return `#${f(0)}${f(8)}${f(4)}`;
 }
+
+export function filterNotesByLabels(
+  labels: ILabel[],
+  { onlyInactive }: { onlyInactive: boolean } = { onlyInactive: true },
+): IStorageNote[] {
+  return filterDecoratedNotesByLabels(labels, { hasAllLabels: true, onlyInactive: onlyInactive }).map(
+    (note) => note.original,
+  );
+}
+
+export function filterDecoratedNotesByLabels(
+  labels: ILabel[],
+  { hasAllLabels, onlyInactive }: { hasAllLabels: boolean; onlyInactive: boolean } = {
+    hasAllLabels: true,
+    onlyInactive: false,
+  },
+): IDecoratedNote[] {
+  function traverseAndCollectNotes(labels: ILabel[], notes: Set<IDecoratedNote>, isActive = true) {
+    for (const label of labels) {
+      if (label.isActive === isActive) {
+        for (const note of label.notes) {
+          notes.add(note);
+        }
+      }
+
+      if (label.children) {
+        traverseAndCollectNotes(label.children, notes, isActive);
+      }
+    }
+    return notes;
+  }
+
+  // return notes from inactive labels
+  if (onlyInactive) {
+    return Array.from(traverseAndCollectNotes(labels, new Set(), false));
+  }
+
+  const activeNotes = traverseAndCollectNotes(labels, new Set());
+  if (hasAllLabels) {
+    const inactiveNotes = traverseAndCollectNotes(labels, new Set(), false);
+    for (const note of inactiveNotes) {
+      activeNotes.delete(note);
+    }
+  }
+  return Array.from(activeNotes);
+}
+
+export function getFullLabelName(label: ILabel): string {
+  let parentLabel = label.parent;
+  let fullName = label.label;
+  while (parentLabel) {
+    fullName = `${parentLabel.label}/${fullName}`;
+    parentLabel = parentLabel.parent;
+  }
+  return fullName;
+}

src/components/LabelsFilter/LabelsFilter.css

@@ -2,12 +2,12 @@
   margin: 15px 0;
 }
 
-.labels .label-link {
+.label-link {
   opacity: 50%;
   cursor: pointer;
 }
 
-.labels .label-link.active {
+.label-link.active {
   opacity: 100%;
 }
 

src/components/LabelsFilter/LabelsFilter.tsx

@@ -1,42 +1,54 @@
 import "./LabelsFilter.css";
-import { type MouseEventHandler, useCallback } from "react";
-import { Label } from "../Label/Label";
-import type { ILabel } from "../NotesProvider/hooks/useLabels";
+import { useState } from "react";
+import { type ILabel, Label, getFullLabelName } from "../Label/Label";
 
 export type LabelsFilterProps = {
   labels: ILabel[];
-  onToggleLabel: (label: string) => void;
+  onToggleLabel: (label: ILabel) => void;
 };
 
-export function LabelsFilter({ labels, onToggleLabel }: LabelsFilterProps) {
+export function LabelsFilterTree({ labels, onToggleLabel }: LabelsFilterProps) {
   return (
-    <div className="labels filter">
+    <div className="label-tree-content">
       {labels.map((label) => (
-        <LabelLink key={label.label} label={label} onToggleLabel={onToggleLabel} />
+        <LabelNode key={label.label} label={label} onToggleLabel={onToggleLabel} />
       ))}
     </div>
   );
 }
 
 type LabelLinkProps = {
   label: ILabel;
+  prefix?: string;
   onToggleLabel: LabelsFilterProps["onToggleLabel"];
 };
 
-function LabelLink({ label, onToggleLabel }: LabelLinkProps) {
-  const selectLabel = useCallback<MouseEventHandler>(
-    (e) => {
-      e.preventDefault();
-      onToggleLabel(label.label);
-    },
-    [label, onToggleLabel],
-  );
-
+function LabelNode({ label, onToggleLabel }: LabelLinkProps) {
+  const [expanded, setExpanded] = useState(true);
+  const hasChildren = Object.keys(label.children).length > 0;
+  const prefix = hasChildren ? (expanded ? "▼" : "▶") : label.isActive ? "⊙" : "∅";
   const clazz = `label-link ${label.isActive ? "active" : ""}`;
-  const ico = label.isActive ? "⊙" : "∅";
+
   return (
-    <a href="#" className={clazz} onClick={selectLabel}>
-      <Label label={label.label} prefix={ico} />
-    </a>
+    <div className="label-node">
+      <div
+        className="label-node-header"
+        onClick={() => onToggleLabel(label)}
+        onKeyUp={(e) => e.key === "Enter" && setExpanded(!expanded)}
+        tabIndex={0}
+        role="button"
+      >
+        <div className={clazz}>
+          <Label key={getFullLabelName(label)} label={label.label} prefix={prefix} />
+        </div>
+      </div>
+      {expanded && hasChildren && (
+        <div className="label-node-content">
+          {Object.values(label.children).map((child) => (
+            <LabelNode key={child.label} label={child} onToggleLabel={onToggleLabel} />
+          ))}
+        </div>
+      )}
+    </div>
   );
 }

src/components/LocationProvider/LocationProvider.tsx

@@ -46,6 +46,7 @@ export function LocationProvider({ children }: ILocationProviderProps) {
       const version =
         newParams?.version.substring(0, SHORT_COMMIT_HASH_LENGTH) ||
         metadata.versions[metadata.latest]?.hash.substring(0, SHORT_COMMIT_HASH_LENGTH);
+      const versionName = newParams ? metadata.versions[newParams.version]?.name : undefined;
 
       const stringifiedParams = [];
 
@@ -58,7 +59,8 @@ export function LocationProvider({ children }: ILocationProviderProps) {
         ].join("");
       }
 
-      window.location.hash = `${SEGMENT_SEPARATOR}${stringifiedParams.join(SEGMENT_SEPARATOR)}`;
+      const newHash = `${SEGMENT_SEPARATOR}${stringifiedParams.join(SEGMENT_SEPARATOR)}`;
+      window.location.hash = versionName ? `${newHash}?v=${versionName}` : newHash;
     },
     [metadata],
   );

src/components/NoteManager/NoteManager.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import "./NoteManager.css";
 import { validateMath } from "../../utils/validateMath";
-import { LabelsFilter } from "../LabelsFilter/LabelsFilter";
+import { LabelsFilterTree } from "../LabelsFilter/LabelsFilter";
 import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
 import { type INotesContext, NotesContext } from "../NotesProvider/NotesProvider";
 import { LABEL_LOCAL } from "../NotesProvider/consts/labels";
@@ -56,7 +56,6 @@ function Notes() {
       selectionStart: locationParams.selectionStart,
       selectionEnd: locationParams.selectionEnd,
       version: locationParams.version,
-      // TODO [ToDr] user defined labels?
       labels: [LABEL_LOCAL],
     };
 
@@ -89,7 +88,7 @@ function Notes() {
         </button>
       </div>
 
-      <LabelsFilter labels={labels} onToggleLabel={handleToggleLabel} />
+      <LabelsFilterTree labels={labels} onToggleLabel={handleToggleLabel} />
       {notes.map((note) => (
         <Note key={note.key} note={note} onEditNote={handleUpdateNote} onDeleteNote={handleDeleteNote} />
       ))}