Add color theme to highlighted labels

Author: stuartquin

css/widget.css

@@ -10,18 +10,22 @@
   margin: 5px 10px 5px 0;
   cursor: pointer;
   display: block;
-  padding: 1px 10px;
+  padding: 1px 8px 1px 5px;
   position: relative;
   border-radius: 4px;
   font-size: 16px;
 
+  white-space: nowrap;
+
   background-color: #D1D5DB;
 }
 .selected {
   background: white;
 }
 .labelContainer {
   display: flex;
+  max-width: 800px;
+  overflow-x: auto;
   flex-grow: 1;
   font-weight: bold;
   font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
@@ -33,6 +37,7 @@
 .topBar {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   color: #1F2937;
   width: 100%;
   padding: 12px;
@@ -53,12 +58,16 @@
 .span {
   font-size: 18px;
   padding: 0.25em 0.4em;
-  background: #ffe184;
+  padding-bottom: 2px;
   font-weight: bold;
   line-height: 1;
   cursor: pointer;
 }
 
+.span:hover {
+  border-bottom: solid 1px;
+}
+
 .spanLabel {
   font-size: 12px;
   padding-left: 8px;

examples/introduction.ipynb

@@ -1,6 +1,11 @@
+export interface ColorLabel {
+  text: string;
+  color: string;
+}
+
 export interface Span {
   start: number;
   end: number;
   text: string;
-  label: string;
+  label: ColorLabel;
 }

src/annotate.ts

@@ -1,9 +1,10 @@
 import { h, VNode } from "preact";
 import { useMemo, useState } from "preact/hooks";
-import { Span } from "../annotate";
+import { ColorLabel, Span } from "../annotate";
 
 import TopBar from "./TopBar";
 import Highlightable from "./Highlightable";
+import { HIGHLIGHT_COLORS } from "./colors";
 
 interface Props {
   docs: string[];
@@ -19,7 +20,7 @@ export default function Annotate({
   onUpdateSpans,
 }: Props): VNode {
   const totalDocs = docs.length;
-  const [selectedLabel, setSelectedLabel] = useState<string>("");
+  const [selectedLabel, setSelectedLabel] = useState<ColorLabel>();
   const [docIndex, setDocIndex] = useState<number>(0);
   const [docSpans, setDocSpans] = useState<Span[][]>(
     initialSpans.length
@@ -31,7 +32,7 @@ export default function Annotate({
     return docs[docIndex];
   }, [docIndex, docs]);
 
-  const onChangeLabel = (label: string) => {
+  const onChangeLabel = (label: ColorLabel) => {
     setSelectedLabel(label);
   };
 
@@ -48,15 +49,25 @@ export default function Annotate({
 
   const spans = docSpans[docIndex] || [];
 
+  const coloredLabels = useMemo(() => {
+    const colors = Object.keys(HIGHLIGHT_COLORS);
+    return labels.map((text, index) => ({
+      text,
+      color: colors[index % colors.length],
+    }));
+  }, [labels]);
+
+  const activeLabel = selectedLabel || coloredLabels[0];
+
   return h("div", null, [
     h(TopBar, {
-      selectedLabel,
-      labels,
+      selectedLabel: activeLabel,
+      labels: coloredLabels,
       totalDocs,
       docIndex,
       onChangeLabel,
       onChangeNav,
     }),
-    h(Highlightable, { text, selectedLabel, spans, onUpdate }),
+    h(Highlightable, { text, selectedLabel: activeLabel, spans, onUpdate }),
   ]);
 }

src/components/Annotate.ts

@@ -1,19 +1,26 @@
 import { h, VNode } from "preact";
 import { useEffect, useRef } from "preact/hooks";
-import { Span } from "../annotate";
+import { ColorLabel, Span } from "../annotate";
+import { HIGHLIGHT_COLORS } from "./colors";
 
 const SpanLabel = ({
   text,
   label,
   onClick,
 }: {
   text: string;
-  label: string;
+  label: ColorLabel;
   onClick: () => void;
 }): VNode => {
-  return h("span", { className: "span", onClick }, [
+  const color = HIGHLIGHT_COLORS[label.color] || HIGHLIGHT_COLORS.red;
+  const style = {
+    backgroundColor: color[50],
+    color: color[800],
+    borderColor: color[800],
+  };
+
+  return h("span", { style, className: "span", onClick, title: label.text }, [
     text,
-    h("span", { className: "spanLabel" }, label),
   ]);
 };
 
@@ -51,7 +58,7 @@ const getHighlightedText = (
 
 interface Props {
   text: string;
-  selectedLabel: string;
+  selectedLabel: ColorLabel;
   spans: Span[];
   onUpdate: (span: Span[]) => void;
 }

src/components/Highlightable.ts

@@ -1,20 +1,50 @@
 import { h, VNode } from "preact";
+import { ColorLabel } from "../annotate";
+import { HIGHLIGHT_COLORS } from "./colors";
 
-const Labels = ({
-  labels,
-  selectedLabel,
-  onChangeLabel,
+const Label = ({
+  label,
+  isSelected,
+  onClick,
 }: {
-  labels: string[];
-  selectedLabel: string;
-  onChangeLabel: (label: string) => void;
-}): VNode => {
-  const labelNodes = labels.map((label) => {
-    const className = label === selectedLabel ? "label selected" : "label";
+  label: ColorLabel;
+  isSelected: boolean;
+  onClick: (label: ColorLabel) => void;
+}) => {
+  const className = isSelected ? "label selected" : "label";
+  const color = HIGHLIGHT_COLORS[label.color] || HIGHLIGHT_COLORS.red;
 
-    return h("div", { className, onClick: () => onChangeLabel(label) }, label);
-  });
-  return h("div", { className: "labelContainer" }, labelNodes);
+  const borderColor = isSelected ? color[300] : color[800];
+
+  const style = {
+    borderLeft: `solid 4px ${borderColor}`,
+  };
+
+  return h(
+    "div",
+    { style, className, onClick: () => onClick(label) },
+    label.text
+  );
+};
+
+interface Props {
+  labels: ColorLabel[];
+  selectedLabel: ColorLabel;
+  onChangeLabel: (label: ColorLabel) => void;
+}
+
+const Labels = ({ labels, selectedLabel, onChangeLabel }: Props): VNode => {
+  return h(
+    "div",
+    { className: "labelContainer" },
+    labels.map((label) =>
+      h(Label, {
+        label,
+        isSelected: label.text === selectedLabel.text,
+        onClick: onChangeLabel,
+      })
+    )
+  );
 };
 
 export default Labels;

src/components/Labels.ts

@@ -1,13 +1,14 @@
 import { h, VNode } from "preact";
+import { ColorLabel } from "../annotate";
 import Labels from "./Labels";
 import Nav from "./Nav";
 
 interface Props {
-  labels: string[];
-  selectedLabel: string;
+  labels: ColorLabel[];
+  selectedLabel: ColorLabel;
   docIndex: number;
   totalDocs: number;
-  onChangeLabel: (label: string) => void;
+  onChangeLabel: (label: ColorLabel) => void;
   onChangeNav: (docIndex: number) => void;
 }
 

src/components/TopBar.ts

@@ -31,16 +31,21 @@ export const HIGHLIGHT_COLORS: { [key: string]: any } = {
     300: "#FCA5A5",
     800: "#991B1B",
   },
-  orange: {
-    50: "#FFF7ED",
-    300: "#FDBA74",
-    800: "#9A3412",
+  cyan: {
+    50: "#ECFEFF",
+    300: "#67E8F9",
+    800: "#155E75",
   },
   amber: {
     50: "#FFFBEB",
     300: "#FCD34D",
     800: "#92400E",
   },
+  violet: {
+    50: "#F5F3FF",
+    300: "#C4B5FD",
+    800: "#5B21B6",
+  },
   yellow: {
     50: "#FEFCE8",
     300: "#FDE047",
@@ -51,11 +56,6 @@ export const HIGHLIGHT_COLORS: { [key: string]: any } = {
     300: "#BEF264",
     800: "#3F6212",
   },
-  green: {
-    50: "#F0FDF4",
-    300: "#86EFAC",
-    800: "#166534",
-  },
   emerald: {
     50: "#ECFDF5",
     300: "#6EE7B7",
@@ -66,10 +66,10 @@ export const HIGHLIGHT_COLORS: { [key: string]: any } = {
     300: "#5EEAD4",
     800: "#115E59",
   },
-  cyan: {
-    50: "#ECFEFF",
-    300: "#67E8F9",
-    800: "#155E75",
+  orange: {
+    50: "#FFF7ED",
+    300: "#FDBA74",
+    800: "#9A3412",
   },
   sky: {
     50: "#F0F9FF",
@@ -86,11 +86,6 @@ export const HIGHLIGHT_COLORS: { [key: string]: any } = {
     300: "#A5B4FC",
     800: "#3730A3",
   },
-  violet: {
-    50: "#F5F3FF",
-    300: "#C4B5FD",
-    800: "#5B21B6",
-  },
   purple: {
     50: "#FAF5FF",
     300: "#D8B4FE",