extend node

app/DTNode.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
       baseAddr: {},
       compat: {},
     },
-    status: { control: 'radio', options: ['okay', 'disabled'] },
+    status: { control: 'radio', options: ['okay', 'disabled', undefined] },
   },
 } satisfies Meta<typeof DataNode>;
 
@@ -23,6 +23,7 @@ export const Simple: Story = {
     data: {
       label: "UART",
       baseAddr: "0x0c00_0000",
+      compat: "ns16550a",
     },
     status: "okay",
   },

app/DTNode.tsx

@@ -1,42 +1,39 @@
 import { memo, useState } from "react";
 import { Handle, NodeProps, Position } from "reactflow";
 import compatDb from "./compat-db.json";
+import genericNames from "./generic-names.json";
 
 type DTStatus = "okay" | "disabled";
 
-type DotColor = "blue" | "red";
-
-const getDotColor = (status?: DTStatus): DotColor | null => {
-  switch(status) {
-    case "okay": return "blue";
-    case "disabled": return "red";
-    default: return null;
-  }
-}
+const dotColors: Record<DTStatus, string> = {
+  okay: "blue",
+  disabled: "red"
+};
 
 export const Dot: FC<{ status?: DTStatus }> = ({ status }) => {
   if (!status) {
     return null;
   }
-  const color = getDotColor(status);
+  const color = dotColors[status];
   return (
-    <div className="dot">
+    <div className="dot" style={{ background: color }}>
       <style>{`
         div.dot {
           width: 10px;
           height: 10px;
-          background: ${color};
           border-radius: 100%;
         }
       `}</style>
     </div>
   );
 };
 
-const docsbaseUrl = "https://docs.kernel.org"
+const docsBaseUrl = "https://docs.kernel.org"
+const drvBaseUrl = "https://elixir.bootlin.com/linux/HEAD/source/drivers";
+//const drvBaseUrl = "https://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git/tree/drivers";
 const dtBaseUrl = "https://www.kernel.org/doc/Documentation/devicetree/bindings";
 
-type DocsCategory = "binding" | "docs";
+type DocsCategory = "binding" | "docs" | "driver";
 
 type DocsEntry = {
   category: DocsCategory;
@@ -46,7 +43,8 @@ type DocsEntry = {
 const getBaseUrl = (category: DocsCategory): string => {
   switch(category) {
     case "binding": return dtBaseUrl;
-    case "docs": return docsbaseUrl;
+    case "docs": return docsBaseUrl;
+    case "driver": return drvBaseUrl;
   }
 };
 
@@ -83,37 +81,94 @@ const Compat: FC<{ compat?: string; }> = ({ compat }) => {
   );
 };
 
+export const Extra: FC<{ data: object }> = ({ data }) => {
+  const {
+    resets,
+    clocks,
+    mboxes,
+    phandle,
+    phySupply,
+    phyHandle,
+  } = data;
+  const {
+    description,
+    type,
+    arch,
+    os,
+    kernel,
+    compression,
+    load,
+    entry,
+  } = data;
+
+  const e = JSON.stringify({
+    resets,
+    clocks,
+    mboxes,
+    phandle,
+    phySupply,
+    phyHandle,
+  }, null, 2);
+  const x = JSON.stringify({
+    description,
+    type,
+    arch,
+    os,
+    kernel,
+    compression,
+    load,
+    entry,
+  }, null, 2);
+
+  return <div>{e}{x}</div>
+};
+
 export const DataNode: FC<{ data: object; status?: DTStatus }> = ({
   data,
   status,
 }) => {
-  if (!data) {
-    return null;
-  }
-
+  const extraClass = genericNames.includes(data.label) ? "generic" : "";
   return (
     <div className="node">
-      <span>{data.label}</span>
-      <span>{data.baseAddr}</span>
-      <Compat compat={data.compat} />
-      <Dot status={status} />
+      <header className={extraClass}>{data.label}</header>
+      <main>
+        <span>{data.model}</span>
+        <span>{data.baseAddr}</span>
+        <Compat compat={data.compat} />
+        <Dot status={status} />
+        <span>{data.extra}</span>
+        <Extra data={data} />
+      </main>
       <style>{`
         div.node {
           white-space: pre-wrap;
-          padding: 4px;
-          border: 2px solid #789789;
-          background: #0c0c0c;
-          color: #fff;
-          width: 150px;
-          font-size: 12px;
+          border: 4px solid #789789;
+          border-radius: 6px;
+          width: 250px;
+          font-size: 14px;
           font-family: "Fira Code";
-          display: flex;
-          flex-direction: column;
         }
         div.node:hover {
           border-color: #987987;
           border-style: dotted;
         }
+        div.node header {
+          color: #0c0c0c;
+          background: #ccddcc;
+          font-weight: bold;
+          padding: 4px;
+        }
+        div.node header.generic {
+          color: #fff;
+          background: #850150;
+        }
+        div.node main {
+          color: #fff;
+          background: #0c0c0c;
+          padding: 4px;
+          display: flex;
+          flex-direction: column;
+        }
       `}</style>
     </div>
   );

app/compat-db.json

@@ -27,6 +27,10 @@
     "category": "binding",
     "path": "arm/cpus.yaml"
   },
+  "arm,cortex-a7-pmu": {
+    "category": "binding",
+    "path": "arm/pmu.yaml"
+  },
   "brcm,bcm2835-cprman": {
     "category": "binding",
     "path": "clock/brcm,bcm2835-cprman.txt"
@@ -38,5 +42,9 @@
   "spidev": {
     "category": "docs",
     "path": "spi/spidev.html"
+  },
+  "brcm,bcm2835-audio": {
+    "category": "driver",
+    "path": "staging/vc04_services/bcm2835-audio/bcm2835.c"
   }
 }

app/lib.ts

@@ -66,6 +66,17 @@ const getPropStr = (n: DTNode, pname: string): string | null => {
   return p ? p.join(", ") : null;
 };
 
+const getExtra = (n: DTNode) => {
+  if (n.name === "aliases" | n.name === "chosen") {
+    const ps = n.props.map((p) => {
+      const [k, v] = p;
+      return `${k}=${u8ArrToStr(v)}`;
+    });
+    return ps.join("\n");
+  }
+  return null;
+};
+
 // transform a node's props into numbers and strings, omitting many
 const transformNode = (n: DTNode): DTNode => {
   const name = n.name || "root";
@@ -75,23 +86,62 @@ const transformNode = (n: DTNode): DTNode => {
   // TODO: make list of props that are refs
   const phyHandle = getProp(n, "phy-handle");
   const phySupply = getProp(n, "phy-supply");
+  const mboxes = getProp(n, "mboxes");
   const resets = getProp(n, "resets");
   const dmas = getProp(n, "dmas");
-  const clks = getProp(n, "clocks");
+  const clocks = getProp(n, "clocks");
   const cnames = getStringProp(n, "clock-names");
   const compat = getStringProp(n, "compatible");
   const status = getStringProp(n, "status");
+  const model = getStringProp(n, "model");
+
+  const fitStrings = [
+    "description",
+    "type",
+    "arch",
+    "os",
+    "kernel",
+    "compression",
+  ];
+  const fit = fitStrings.reduce((a, p) => {
+    const s = getStringProp(n, p);
+    if (s) {
+      a[p] = s;
+    }
+    return a;
+  }, {});
+  const fitVals = [
+    "load",
+    "entry",
+  ];
+  const fitV = fitVals.reduce((a, p) => {
+    const s = getProp(n, p);
+    if (s) {
+      // console.info({ [p]: s });
+      a[p] = padHexStr(s[0].toString(16));
+    }
+    return a;
+  }, {});
+
+  const extra = getExtra(n);
+
   return {
     name,
     ...(phandle ? { phandle: phandle[0] } : null),
     ...(phySupply ? { phySupply: phySupply[0] } : null),
     ...(phyHandle ? { phyHandle: phyHandle[0] } : null),
     ...(resets ? { resets } : null),
     ...(dmas ? { dmas } : null),
-    ...(clks ? { clks } : null),
+    ...(clocks ? { clocks } : null),
     ...(cnames ? { cnames } : null),
     ...(compat ? { compat } : null),
     ...(status ? { status } : null),
+    ...(model ? { model } : null),
+    ...(mboxes ? { mboxes } : null),
+
+    ...fit,
+    ...fitV,
+    extra,
   };
 };
 
@@ -103,8 +153,8 @@ export const transform = (n: DTNode, id: string = "10000") => {
   }
 };
 
-const NODE_WIDTH = 160;
-const NODE_HEIGHT = 80;
+const NODE_WIDTH = 320;
+const NODE_HEIGHT = 480;
 
 const weightedNode = (node: DTNode): DTNode => {
   if (node.children && node.children.length > 0) {
@@ -123,11 +173,11 @@ const weightedNode = (node: DTNode): DTNode => {
  * Format to hex with leading 0x, padded with zeroes to groups of four digits.
  * At least print 8 digits, but omit the first 4 of 12 if they are all 0.
  */
-const transformAddr = (addr: string): string => {
-  if (addr === undefined) {
+const padHexStr = (val: string): string => {
+  if (val === undefined) {
     return "";
   }
-  const padded = addr.padStart(12, "0");
+  const padded = val.padStart(12, "0");
   const p1 = padded.substr(0, 4);
   const p2 = padded.substr(4, 4);
   const p3 = padded.substr(8, 4);
@@ -141,26 +191,33 @@ const transformAddr = (addr: string): string => {
 export const getNodesEdges = (tree: DTNode) => {
   const nodes: TransformedNode[] = [];
   const edges: TransformedEdge[] = [];
+  // map phandle -> id
+  const phandles = {};
   const rec = (n: DTNode, d: number = 1, baseX: number = 0, baseY: number = 0) => {
-    const [name, addr] = n.name.split("@");
-    const baseAddr = transformAddr(addr);
+    const { id, name, ...data } = n;
+    const [label, addr] = name.split("@");
+    const baseAddr = padHexStr(addr);
 
     nodes.push({
-      id: n.id,
+      id,
       type: NodeType.custom,
       position: {
         x: baseX + n.size * NODE_WIDTH / 2,
         y: baseY + d * NODE_HEIGHT,
       },
       data: {
-        label: name,
+        label,
         baseAddr,
-        size: n.size,
-        compat: n.compat,
-        status: n.status,
+        ...data,
       },
     });
     let offset = baseX;
+
+    // TODO: store ID + #*-size
+    const phandle = data.phandle;
+    if (phandle != null) {
+      phandles[phandle] = id;
+    }
     n.children.forEach((c: DTNode, i: number) => {
       edges.push({
         id: `${n.id}${c.id}`,
@@ -173,5 +230,34 @@ export const getNodesEdges = (tree: DTNode) => {
   };
   const t = weightedNode(tree);
   rec(t);
+  console.info({ phandles });
+  nodes.forEach((n) => {
+    if (n.data.clocks) {
+      const ref = n.data.clocks[0];
+      const refId = phandles[ref];
+      if (refId !== undefined) {
+        const e = {
+          id: `clocks-${refId}_${n.id}`,
+          source: n.id,
+          target: refId,
+        };
+        console.info({ ...e });
+        edges.push(e);
+      }
+    }
+    if (n.data.mboxes) {
+      const ref = n.data.mboxes[0];
+      const refId = phandles[ref];
+      if (refId !== undefined) {
+        const e = {
+          id: `mboxes-${refId}_${n.id}`,
+          source: n.id,
+          target: refId,
+        };
+        console.info({ ...e });
+        edges.push(e);
+      }
+    }
+  });
   return { nodes, edges };
 };