Implement basic interproscan visualization component

frontend/package.json

@@ -15,6 +15,10 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.1.2",
+    "@nightingale-elements/nightingale-interpro-track": "^5.2.0",
+    "@nightingale-elements/nightingale-manager": "^5.2.0",
+    "@nightingale-elements/nightingale-navigation": "^5.2.0",
+    "@nightingale-elements/nightingale-sequence": "^5.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.0",
@@ -76,6 +80,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-jsdoc": "^1.3.0",
+    "type-fest": "^4.26.1",
     "typescript": "^5.5.4",
     "vite": "^5.4.2",
     "vite-plugin-svgr": "^4.2.0"

frontend/src/components/IPR.module.css

@@ -0,0 +1,44 @@
+.manager {
+  width: 100%;
+}
+
+.grid {
+  display: grid !important;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 5px 20px;
+  line-height: unset !important;
+}
+
+.grid > *:nth-child(1),
+.grid > *:nth-child(3) {
+  font-weight: var(--bold);
+}
+
+.grid > *:nth-child(odd) {
+  line-height: var(--compact);
+  text-align: right;
+}
+
+.grid > *:nth-child(even) {
+  width: 0;
+  min-width: 100%;
+}
+
+.legend {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(auto, 50px));
+  justify-content: center;
+  width: 100%;
+  gap: 20px;
+}
+
+.legend-entry {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+}
+
+:global(.zoom-polygon) {
+  fill: currentColor;
+}

frontend/src/components/IPR.tsx

@@ -0,0 +1,128 @@
+import { Fragment, useMemo } from "react";
+import type NightingaleInterproTrack from "@nightingale-elements/nightingale-interpro-track";
+import type NightingaleManager from "@nightingale-elements/nightingale-manager";
+import type NightingaleNavigation from "@nightingale-elements/nightingale-navigation";
+import type NightingaleSequence from "@nightingale-elements/nightingale-sequence";
+import Flex from "@/components/Flex";
+import { getColorMap } from "@/util/color";
+import classes from "./IPR.module.css";
+import "@nightingale-elements/nightingale-manager";
+import "@nightingale-elements/nightingale-navigation";
+import "@nightingale-elements/nightingale-sequence";
+import "@nightingale-elements/nightingale-interpro-track";
+
+/** track of features */
+type Track = {
+  label: string;
+  features: Feature[];
+};
+
+type Feature = {
+  /** unique id */
+  id: string;
+  /** human-readable label */
+  label?: string;
+  /** arbitrary type/category */
+  type?: string;
+  /** starting position of feature in sequence (1-indexed) */
+  start: number;
+  /** ending position of feature in sequence (1-indexed) */
+  end: number;
+};
+
+type Props = { sequence: string; tracks: Track[] };
+
+const IPR = ({ sequence, tracks }: Props) => {
+  /** props for all nightingale components */
+  const commonProps = {
+    length: sequence.length,
+    height: 50,
+    "display-start": 1,
+    "display-end": -1,
+    "margin-top": 0,
+    "margin-bottom": 0,
+    "margin-left": 0,
+    "margin-right": 0,
+  };
+
+  const managerProps: Partial<NightingaleManager> = {};
+
+  const navigationProps: Partial<NightingaleNavigation> = {
+    ...commonProps,
+  };
+
+  const sequenceProps: Partial<NightingaleSequence> = {
+    sequence,
+    ...commonProps,
+  };
+
+  const interproProps: Partial<NightingaleInterproTrack> = {
+    ...commonProps,
+    label: ".feature.label",
+    "show-label": true,
+    expanded: true,
+  };
+
+  /** map of feature types to colors */
+  const featureColors = useMemo(
+    () =>
+      getColorMap(
+        tracks
+          .map((track) => track.features.map((feature) => feature.type ?? ""))
+          .flat(),
+      ),
+    [tracks],
+  );
+
+  return (
+    <>
+      <nightingale-manager {...managerProps} class={classes.manager}>
+        <div className={classes.grid}>
+          <div>Navigator</div>
+          <nightingale-navigation {...navigationProps} />
+          <div>Sequence</div>
+          <nightingale-sequence {...sequenceProps} />
+          {tracks.map((track, index) => (
+            <Fragment key={index}>
+              <div>{track.label}</div>
+              <nightingale-interpro-track
+                ref={(ref: Partial<NightingaleInterproTrack> | null) => {
+                  if (!ref) return;
+
+                  ref.data = track.features.map(
+                    ({ id, label, type, start, end }) => ({
+                      accession: id,
+                      label: label ?? id,
+                      locations: [{ fragments: [{ start, end }] }],
+                      residues: [],
+                      color: featureColors[type ?? ""],
+                    }),
+                  );
+
+                  return ref;
+                }}
+                {...interproProps}
+                height={50}
+              />
+            </Fragment>
+          ))}
+        </div>
+      </nightingale-manager>
+
+      {/* legend */}
+      <div className={classes.legend}>
+        {Object.entries(featureColors).map(([type, color]) => (
+          <Flex key={color} gap="sm" hAlign="left" wrap={false}>
+            <span
+              className={classes["legend-entry"]}
+              style={{ background: color }}
+            />
+            <span>{type || "-"}</span>
+          </Flex>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default IPR;

frontend/src/pages/Testbed.tsx

@@ -1,6 +1,7 @@
 import {
   FaArrowRight,
   FaArrowsUpDown,
+  FaBarcode,
   FaBars,
   FaBeerMugEmpty,
   FaBrush,
@@ -26,7 +27,7 @@ import {
   FaStop,
   FaTableCells,
 } from "react-icons/fa6";
-import { sample, uniqueId } from "lodash";
+import { random, sample, uniqueId } from "lodash";
 import CustomIcon from "@/assets/custom-icon.svg?react";
 import Ago from "@/components/Ago";
 import Alert from "@/components/Alert";
@@ -36,6 +37,7 @@ import Collapsible from "@/components/Collapsible";
 import Flex from "@/components/Flex";
 import Form from "@/components/Form";
 import Heading from "@/components/Heading";
+import IPR from "@/components/IPR";
 import Link from "@/components/Link";
 import Meta from "@/components/Meta";
 import Network from "@/components/Network";
@@ -122,6 +124,41 @@ for (let times = 0; times < 10; times++) {
   edges.push({ ...edge, id: uniqueId(), source: id, target: id });
 }
 
+/** generate fake sequence data */
+const sequence = Array(random(10, 100))
+  .fill(null)
+  .map(() => sample(["G", "A", "T", "C"]))
+  .join("");
+
+/** generate fake interproscan track data */
+const tracks = Array(10)
+  .fill(null)
+  .map(() => ({
+    label: sample(["Lbl.", "Label", "Long Label", "Really Long Label"]),
+    features: Array(random(1, 3))
+      .fill(null)
+      .map(() => {
+        const start = random(1, Math.floor(sequence.length / 2));
+        const end = random(
+          start + Math.floor(sequence.length / 4),
+          sequence.length,
+        );
+        return {
+          id: uniqueId(),
+          label: sample([
+            "Lbl.",
+            "Label",
+            "Long Label",
+            "Really Long Label",
+            undefined,
+          ]),
+          type: sample(["cat", "dog", "bird", undefined]),
+          start,
+          end,
+        };
+      }),
+  }));
+
 /** test and example usage of formatting, elements, components, etc. */
 const TestbedPage = () => {
   return (
@@ -132,6 +169,15 @@ const TestbedPage = () => {
         <Heading level={1}>Testbed</Heading>
       </Section>
 
+      {/* IPR */}
+      <Section>
+        <Heading level={2} icon={<FaBarcode />}>
+          IPR
+        </Heading>
+
+        <IPR sequence={sequence} tracks={tracks} />
+      </Section>
+
       <Section>
         <Heading level={2} icon={<FaShareNodes />}>
           Network

frontend/src/vite-env.d.ts

@@ -1,6 +1,16 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
 
-/** no type def libraries for these libraries */
+/** no type defs for these libraries */
 declare module "cytoscape-cola";
 declare module "cytoscape-spread";
+
+namespace React.JSX {
+  // eslint-disable-next-line
+  interface IntrinsicElements {
+    "nightingale-manager": JSX.HTMLAttributes<CustomElement>;
+    "nightingale-navigation": JSX.HTMLAttributes<CustomElement>;
+    "nightingale-sequence": JSX.HTMLAttributes<CustomElement>;
+    "nightingale-interpro-track": JSX.HTMLAttributes<CustomElement>;
+  }
+}