fix: in react ui, detail for 'Output of Program' should also show 'Output of Program'

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

Author: starpit

pdl-live-react/src/view/breadcrumbs/BreadcrumbBarForBlockId.tsx

@@ -33,23 +33,18 @@ export default function BreadcrumbBarForBlockId({
   const [searchParams] = useSearchParams()
   const s = searchParams.toString().length === 0 ? "" : "&" + searchParams
   const onClick = useCallback(
-    () =>
-      navigate(
-        `?detail&type=block&id=${id.replace(/\.Output of Program$/, "")}${s}${hash}`,
-      ),
+    () => navigate(`?detail&type=block&id=${id}${s}${hash}`),
     [id, hash, s, navigate],
   )
 
   // Notes:
-  // 1) in "compact" mode, don't show Text.3.If.1; instead show Text.If
-  // 2) also always strip of initial Text.
-  // 3) always simplify the presentation of the final output
-  const crumbs = (
-    isCompact
-      ? id.replace(/(text|empty|if)\.\d+/g, "$1").replace(/^text\./, "")
-      : id
-  )
-    .replace(/^.*(Output of Program)$/, "$1")
+  // 1) in compact mode, don't show "Text.3.If.1"; instead show "Text.If"
+  // 2) also in compact mode, always strip of initial "Text."
+  // 3) replace ids within dots (i.e. roots) with "Output of Program"
+  const crumbs = id
+    .replace(/^[^.]+$/, "Output of Program")
+    .replace(/(text|empty|if)\.\d+/g, (p0, p1) => (isCompact ? p1 : p0))
+    .replace(/^text\./, (p0) => (isCompact ? "" : p0))
     .split(/\./)
 
   if (def) {

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

@@ -17,7 +17,7 @@ function result(block: import("../../pdl_ast").PdlBlock) {
   if (hasResult(block) && hasTimingInformation(block)) {
     return [
       {
-        id: block.id + ".Output of Program",
+        id: block.id ?? "",
         depth: 0,
         parent: null,
         block,
@@ -72,7 +72,9 @@ export default function computeModel(block: import("../../pdl_ast").PdlBlock) {
       return []
     })
     .filter(removeFluff)
-    .sort((a, b) => a.id.localeCompare(b.id))
+    .sort((a, b) => (!/\./.test(a.id) ? 1 : a.id.localeCompare(b.id)))
+  // ^^^ re: the regexp test, we want to place the "final output"
+  // (i.e. blocks without a "." in their id) at the end
 
   const numbering = masonry.reduce(
     (N, node, idx) => {