fix: in react ui, traces with empty topology model render as empty space

This also fixes some react eslint warnings.

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

Author: starpit

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

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from "react"
 import { BackToTop, PageSection } from "@patternfly/react-core"
 
-import Memory from "../memory/Memory"
+import Topology from "../memory/Topology"
+import extractVariables from "../memory/model"
 import Timeline from "../timeline/TimelineFromModel"
 
 import Masonry from "./Masonry"
@@ -50,6 +51,10 @@ export default function MasonryCombo({ value, setValue }: Props) {
     [block],
   )
 
+  // This is the <Topology/> model. We compute this here, so we can
+  // nicely not render anything if we have an empty topology model.
+  const { nodes, edges } = useMemo(() => extractVariables(block), [block])
+
   if (!block) {
     return "Invalid trace content"
   }
@@ -74,8 +79,13 @@ export default function MasonryCombo({ value, setValue }: Props) {
       >
         <Masonry model={masonry} as={as} sml={sml}>
           {sml !== "s" && <Timeline model={base} numbering={numbering} />}
-          {(as !== "list" || sml !== "s") && (
-            <Memory block={block} numbering={numbering} sml={sml} />
+          {(as !== "list" || sml !== "s") && nodes.length > 0 && (
+            <Topology
+              nodes={nodes}
+              edges={edges}
+              numbering={numbering}
+              sml={sml}
+            />
           )}
         </Masonry>
       </PageSection>

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

@@ -52,7 +52,7 @@ export default function MasonryTile({
             ),
           }
         : undefined,
-    [start_nanos, end_nanos, timezone, as],
+    [start_nanos, end_nanos, timezone, as, sml],
   )
 
   return (

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

@@ -1,18 +1,13 @@
-import { useCallback, useState } from "react"
-import { useLocation, useNavigate } from "react-router"
-
 import { invoke } from "@tauri-apps/api/core"
-
 import { Button, Tooltip } from "@patternfly/react-core"
+import { useCallback, useState } from "react"
 
 type Props = {
   block: import("../../pdl_ast").PdlBlock
   setValue(value: string): void
 }
 
 export default function ToolbarReplayButton({ block, setValue }: Props) {
-  const { hash } = useLocation()
-  const navigate = useNavigate()
   const [isReplaying, setIsReplaying] = useState(false)
 
   const handleClickSource = useCallback(async () => {
@@ -28,7 +23,7 @@ export default function ToolbarReplayButton({ block, setValue }: Props) {
     } finally {
       setIsReplaying(false)
     }
-  }, [hash, navigate, setIsReplaying])
+  }, [block, setValue, setIsReplaying])
 
   return (
     <Tooltip content="Re-run this program">

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

@@ -74,7 +74,7 @@ export default function Topology({ sml, nodes, edges, numbering }: Props) {
     }
 
     controller.fromModel(model, false)
-  }, [sml, nodes, edges, controller])
+  }, [sml, nodes, edges, numbering, controller])
 
   return (
     <div className="pdl-memory-topology">