app/DTNode: visualize node status

Author: orangecms

app/DTNode.tsx

@@ -13,33 +13,53 @@ const style = {
   fontFamily: "Fira Code",
 };
 
-const DTNode = ({
+type DTStatus = "okay" | "disabled";
+
+export const Dot: FC<{ color: "blue" | "red" }> = ({ color }) => (
+  <div style={{ width: 10, height: 10, background: color, borderRadius: "100%" }} />
+);
+
+export const DataNode: FC<{ data?: object; status: DTStatus }> = ({
   data,
-  isConnectable,
-  targetPosition = Position.Top,
-  sourcePosition = Position.Bottom
-}: NodeProps) => {
+  status,
+}) => {
   const [hovered, setHovered] = useState(false);
 
   const hoverOn = () => setHovered(true);
   const hoverOff = () => setHovered(false);
 
   const borderColor = hovered ? "#987987" : "#789789";
   const borderStyle = hovered ? "dotted" : "solid";
+
+  const dotColor = status === "okay" ? "blue" : "red";
+
+  return (
+    <div
+      style={{...style, borderColor, borderStyle }}
+      onMouseEnter={hoverOn}
+      onMouseLeave={hoverOff}
+    >
+      {data?.label}
+      <Dot color={dotColor} />
+    </div>
+  );
+};
+
+const DTNode = ({
+  data,
+  isConnectable,
+  targetPosition = Position.Top,
+  sourcePosition = Position.Bottom
+}: NodeProps) => {
+  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}