DTNode: migrate to styled-jsx and render compat string and status

lib: split up exposed properties and add status

Author: orangecms

app/DTNode.tsx

@@ -1,16 +1,122 @@
 import { memo, useState } from "react";
 import { Handle, NodeProps, Position } from "reactflow";
+import docs from "./compat-db.json";
 
-const style = {
-  // wordWrap: "break-word",
-  whiteSpace: "pre-wrap" as "pre-wrap", // This is weird, TypoScripto...
-  padding: 4,
-  border: "2px solid",
-  background: "#0c0c0c",
-  color: "#fff",
-  width: 150,
-  fontSize: 11,
-  fontFamily: "Fira Code",
+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;
+  }
+}
+
+export const Dot: FC<{ status?: DTStatus }> = ({ status }) => {
+  if (!status) {
+    return null;
+  }
+  const color = getDotColor(status);
+  return (
+    <div className="dot">
+      <style>{`
+        div.dot {
+          width: 10px;
+          height: 10px;
+          background: ${color};
+          border-radius: 100%;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+const docsbaseUrl = "https://docs.kernel.org"
+const dtBaseUrl = "https://www.kernel.org/doc/Documentation/devicetree/bindings";
+
+type DocsCategory = "binding" | "docs";
+
+type DocsEntry = {
+  category: DocsCategory;
+  path: string;
+};
+
+const getBaseUrl = (category: DocsCategory): string => {
+  switch(category) {
+    case "binding": return dtBaseUrl;
+    case "docs": return docsbaseUrl;
+  }
+};
+
+const getDocUrl = (compat: string) => {
+  const res = compat.split(";").find((c) => !!docs[c]);
+  if (!res) {
+    return null;
+  }
+  const d = docs[res];
+  const baseUrl = getBaseUrl(d);
+  return `${baseUrl}/${d.path}`;
+}
+
+const Compat: FC<{ compat?: string; }> = ({ compat }) => {
+  if (!compat) {
+    return null;
+  }
+  const docUrl = getDocUrl(compat);
+
+  if (!docUrl) {
+    return compat;
+  }
+
+  return (
+    <a className="compat" href={docUrl} target="_blank">
+      {compat}
+      <style>{`
+        a.compat {
+          color: #cdeeff;
+          text-decoration: underline;
+        }
+      `}</style>
+    </a>
+  );
+};
+
+export const DataNode: FC<{ data: object; status?: DTStatus }> = ({
+  data,
+  status,
+}) => {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div className="node">
+      <span>{data.label}</span>
+      <span>{data.baseAddr}</span>
+      <Compat compat={data.compat} />
+      <Dot status={status} />
+      <style>{`
+        div.node {
+          white-space: pre-wrap;
+          padding: 4px;
+          border: 2px solid #789789;
+          background: #0c0c0c;
+          color: #fff;
+          width: 150px;
+          font-size: 12px;
+          font-family: "Fira Code";
+          display: flex;
+          flex-direction: column;
+        }
+        div.node:hover {
+          border-color: #987987;
+          border-style: dotted;
+        }
+      `}</style>
+    </div>
+  );
 };
 
 const DTNode = ({
@@ -19,27 +125,15 @@ const DTNode = ({
   targetPosition = Position.Top,
   sourcePosition = Position.Bottom
 }: NodeProps) => {
-  const [hovered, setHovered] = useState(false);
-
-  const hoverOn = () => setHovered(true);
-  const hoverOff = () => setHovered(false);
-
-  const borderColor = hovered ? "#987987" : "#789789";
-  const borderStyle = hovered ? "dotted" : "solid";
+  const { status, ...nData } = data;
   return (
     <>
       <Handle
         type="target"
         position={targetPosition}
         isConnectable={isConnectable}
       />
-        <div
-          style={{...style, borderColor, borderStyle }}
-          onMouseEnter={hoverOn}
-          onMouseLeave={hoverOff}
-        >
-          {data?.label}
-        </div>
+      <DataNode data={nData} status={status} />
       <Handle
         type="source"
         position={sourcePosition}

app/lib.ts

@@ -21,6 +21,7 @@ type TransformedNode = {
   };
   data: {
     label: string;
+    status?: "okay" | "disabled";
   };
 };
 type TransformedEdge = any; // TODO
@@ -79,6 +80,7 @@ const transformNode = (n: DTNode): DTNode => {
   const clks = getProp(n, "clocks");
   const cnames = getStringProp(n, "clock-names");
   const compat = getStringProp(n, "compatible");
+  const status = getStringProp(n, "status");
   return {
     name,
     ...(phandle ? { phandle: phandle[0] } : null),
@@ -89,6 +91,7 @@ const transformNode = (n: DTNode): DTNode => {
     ...(clks ? { clks } : null),
     ...(cnames ? { cnames } : null),
     ...(compat ? { compat } : null),
+    ...(status ? { status } : null),
   };
 };
 
@@ -150,7 +153,11 @@ export const getNodesEdges = (tree: DTNode) => {
         y: baseY + d * NODE_HEIGHT,
       },
       data: {
-        label: `${name}\n${baseAddr}\n${n.size}`,
+        label: name,
+        baseAddr,
+        size: n.size,
+        compat: n.compat,
+        status: n.status,
       },
     });
     let offset = baseX;