fix: in react ui, have topology adopt block numbering scheme

(already used in masonry and timeline)

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/masonry/MasonryCombo.tsx

@@ -66,7 +66,7 @@ export default function MasonryCombo({ value }: Props) {
       >
         <Masonry model={masonry} as={as} sml={sml}>
           <Timeline model={base} numbering={numbering} />
-          <Memory block={block} />
+          <Memory block={block} numbering={numbering} />
         </Masonry>
       </PageSection>
 

pdl-live-react/src/view/masonry/model.ts

@@ -75,7 +75,7 @@ export default function computeModel(block: import("../../pdl_ast").PdlBlock) {
 
   const numbering = masonry.reduce(
     (N, node, idx) => {
-      N[node.id] = idx
+      N[node.id] = idx + 1
       return N
     },
     {} as Record<string, number>,

pdl-live-react/src/view/memory/Memory.tsx

@@ -1,15 +1,16 @@
 import { useMemo } from "react"
-//import { Link, useLocation } from "react-router"
 
 import Topology from "./Topology"
 import extractVariables from "./model"
 
 type Props = {
   block: import("../../pdl_ast").PdlBlock
+
+  /** Block id -> ordinal */
+  numbering?: Record<string, number>
 }
 
-export default function Variables({ block }: Props) {
-  //const { hash } = useLocation()
+export default function Variables({ block, numbering }: Props) {
   const { nodes, edges } = useMemo(() => extractVariables(block), [block])
-  return <Topology nodes={nodes} edges={edges} />
+  return <Topology nodes={nodes} edges={edges} numbering={numbering ?? {}} />
 }

pdl-live-react/src/view/memory/Node.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from "react"
 import {
+  BadgeLocation,
   DefaultNode,
   type GraphElement,
   type WithSelectionProps,
@@ -12,16 +13,16 @@ type CustomNodeProps = WithSelectionProps & {
 const CustomNode: FunctionComponent<CustomNodeProps> = (
   props: CustomNodeProps,
 ) => {
+  const { ordinal } = props.element.getData()
   const label = props.element.getLabel()
-  const badge = label[0].toUpperCase()
-  const badgeColor = /read/.test(label)
+  const badge = ordinal
+  const badgeColor = /Read/.test(label)
     ? "var(--pf-t--global--color--nonstatus--orange--default)"
-    : /code/.test(label)
+    : /Code/.test(label)
       ? "var(--pf-t--global--color--nonstatus--blue--default)"
       : /LLM/.test(label)
         ? "var(--pf-t--global--color--nonstatus--teal--default)"
-        : undefined
-  console.error(label, badgeColor)
+        : "var(--pf-t--color--white)"
   /*const content =
     data && "content" in data && typeof data.content === "string"
       ? data.content
@@ -38,7 +39,13 @@ const CustomNode: FunctionComponent<CustomNodeProps> = (
 */
 
   return (
-    <DefaultNode {...props} badge={badge} badgeColor={badgeColor}>
+    <DefaultNode
+      {...props}
+      badge={badge}
+      badgeColor={badgeColor}
+      badgeTextColor="var(--pf-t--color--black)"
+      badgeLocation={BadgeLocation.below}
+    >
       {/*content && (
         <g
           transform={`translate(${(-Math.min(30, content.length - 1) * 3.5) / 2 + 5}, 10.5)`}

pdl-live-react/src/view/memory/Topology.tsx

@@ -4,6 +4,7 @@ import {
   EdgeAnimationSpeed,
   EdgeModel,
   EdgeStyle,
+  LabelPosition,
   Model,
   NodeModel,
   NodeShape,
@@ -22,9 +23,10 @@ const NODE_DIAMETER = 10
 type Props = {
   nodes: import("./model").Node[]
   edges: import("./model").Edge[]
+  numbering: Record<string, number>
 }
 
-export default function Topology({ nodes, edges }: Props) {
+export default function Topology({ nodes, edges, numbering }: Props) {
   const [selectedIds, setSelectedIds] = useState<string[]>([])
 
   const controller = useMemo(() => {
@@ -44,13 +46,17 @@ export default function Topology({ nodes, edges }: Props) {
       width: NODE_DIAMETER,
       height: NODE_DIAMETER,
       shape: NODE_SHAPE,
+      labelPosition: LabelPosition.top,
+      data: {
+        ordinal: numbering[id],
+      },
     }))
     const myEdges: EdgeModel[] = edges.map(({ source, target }) => ({
       id: `${source}-${target}`,
       type: "edge",
       source,
       target,
-      edgeStyle: EdgeStyle.dashedMd,
+      edgeStyle: EdgeStyle.dashedXl,
       animationSpeed: EdgeAnimationSpeed.medium,
     }))
     const model: Model = {
@@ -67,8 +73,10 @@ export default function Topology({ nodes, edges }: Props) {
   }, [nodes, edges, controller])
 
   return (
-    <VisualizationProvider controller={controller}>
-      <VisualizationSurface state={{ selectedIds }} />
-    </VisualizationProvider>
+    <div className="pdl-memory-topology">
+      <VisualizationProvider controller={controller}>
+        <VisualizationSurface state={{ selectedIds }} />
+      </VisualizationProvider>
+    </div>
   )
 }

pdl-live-react/src/view/memory/layout.ts

@@ -1,5 +1,5 @@
 import {
-  ForceLayout as ColaLayout,
+  ColaLayout,
   Graph,
   Layout,
   LayoutFactory,
@@ -9,11 +9,12 @@ const layoutFactory: LayoutFactory = (
   type: string,
   graph: Graph,
 ): Layout | undefined => {
+  const nodeDistance = 28
   switch (type) {
     case "Cola":
-      return new ColaLayout(graph)
+      return new ColaLayout(graph, { nodeDistance })
     default:
-      return new ColaLayout(graph, { layoutOnDrag: false })
+      return new ColaLayout(graph, { nodeDistance, layoutOnDrag: false })
   }
 }
 

pdl-live-react/src/view/memory/model.ts

@@ -29,7 +29,7 @@ function label(id: string) {
     case "model":
       return "LLM"
     default:
-      return l
+      return l[0].toUpperCase() + l.slice(1)
   }
 }
 
@@ -38,10 +38,12 @@ export default function extractVariables(block: PdlBlock): {
   edges: Edge[]
 } {
   const edges = extractVariablesIter(block)
-  const nodes = edges.flatMap(({ source, target }) => [
-    { id: source, label: label(source) },
-    { id: target, label: label(target) },
-  ])
+  const nodes = edges
+    .flatMap(({ source, target }) => [
+      { id: source, label: label(source) },
+      { id: target, label: label(target) },
+    ])
+    .sort((a, b) => -a.id.localeCompare(b.id))
   return { nodes, edges }
 }