WIP

Author: orangecms

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;
   }
 };
 
@@ -87,33 +85,47 @@ 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>
+      </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";
@@ -81,6 +92,8 @@ const transformNode = (n: DTNode): DTNode => {
   const cnames = getStringProp(n, "clock-names");
   const compat = getStringProp(n, "compatible");
   const status = getStringProp(n, "status");
+  const model = getStringProp(n, "model");
+  const extra = getExtra(n);
   return {
     name,
     ...(phandle ? { phandle: phandle[0] } : null),
@@ -92,6 +105,8 @@ const transformNode = (n: DTNode): DTNode => {
     ...(cnames ? { cnames } : null),
     ...(compat ? { compat } : null),
     ...(status ? { status } : null),
+    ...(model ? { model } : null),
+    extra,
   };
 };
 
@@ -103,7 +118,7 @@ export const transform = (n: DTNode, id: string = "10000") => {
   }
 };
 
-const NODE_WIDTH = 160;
+const NODE_WIDTH = 260;
 const NODE_HEIGHT = 80;
 
 const weightedNode = (node: DTNode): DTNode => {
@@ -142,22 +157,21 @@ export const getNodesEdges = (tree: DTNode) => {
   const nodes: TransformedNode[] = [];
   const edges: TransformedEdge[] = [];
   const rec = (n: DTNode, d: number = 1, baseX: number = 0, baseY: number = 0) => {
-    const [name, addr] = n.name.split("@");
+    const { id, name, ...data } = n;
+    const [label, addr] = name.split("@");
     const baseAddr = transformAddr(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;