feat: consolidate Show Source + Output of Program

We have been showing program output in the masonry view and program source under the top-level toolbar Show Source button. This consolidates these: we aleady have the capability to show source+output of any block in the drawer/detail view.

So: remove output from masonry, and update Show Source button so that, rather than special case a "source" object type, just show the root block detail.

Also: fixes a few react eslint warnings.

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

Author: starpit

pdl-live-react/src/page/PageBreadcrumbDropdownItem.tsx

@@ -19,7 +19,7 @@ export default function PageBreadcrumbDropdownItem({
 
   const onClick = useCallback(
     () => navigate("/" + url + "/" + name + search + hash),
-    [name],
+    [name, url, hash, search, navigate],
   )
   return (
     <DropdownItem onClick={onClick} isDisabled={name === current}>

pdl-live-react/src/view/detail/DrawerContent.tsx

@@ -28,9 +28,6 @@ type Props = {
 
 function header(objectType: string) {
   switch (objectType) {
-    case "source":
-    case "rawtrace":
-      return "Application Code"
     case "def":
       return "Variable Definition"
     default:

pdl-live-react/src/view/detail/DrawerContentBody.tsx

@@ -14,21 +14,6 @@ import {
   type NonScalarPdlBlock as Model,
 } from "../../helpers"
 
-function sourceBody(value: string) {
-  return [
-    <Tab key={0} eventKey={0} title={<TabTitleText>Source</TabTitleText>}>
-      <Suspense>
-        <SourceTabContent block={JSON.parse(value)} />
-      </Suspense>
-    </Tab>,
-    <Tab key={1} eventKey={1} title={<TabTitleText>Raw Trace</TabTitleText>}>
-      <Suspense>
-        <RawTraceTabContent block={JSON.parse(value)} />
-      </Suspense>
-    </Tab>,
-  ]
-}
-
 function defBody(_def: string | null, block: Model) {
   const value = hasResult(block) ? block.result : undefined
   return (
@@ -88,9 +73,6 @@ export default function DrawerContentBody({
   model,
 }: Props) {
   switch (objectType) {
-    case "source":
-    case "rawtrace":
-      return sourceBody(value)
     case "def":
       if (!model) {
         return (

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

@@ -90,7 +90,7 @@ export default function MasonryTile({
         </>
       ),
     }),
-    [myRun, start_nanos, end_nanos, timezone, sml],
+    [isRunning, tileActions, myRun, start_nanos, end_nanos, timezone, sml],
   )
 
   const maxHeight =

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

@@ -5,6 +5,8 @@ import ToolbarSMLToggle from "./ToolbarSMLToggle"
 import ToolbarReplayButton from "./ToolbarReplayButton"
 import ToolbarShowSourceButton from "./ToolbarShowSourceButton"
 
+import { isNonScalarPdlBlock } from "../../helpers"
+
 const alignEnd = { default: "alignEnd" as const }
 
 export type SML = "s" | "m" | "l" | "xl"
@@ -25,7 +27,9 @@ export default function MasonryToolbar({ block, run, sml, setSML }: Props) {
           <ToolbarReplayButton block={block} run={run} />
         </ToolbarGroup>
         <ToolbarGroup align={alignEnd} variant="action-group">
-          <ToolbarShowSourceButton />
+          {isNonScalarPdlBlock(block) && (
+            <ToolbarShowSourceButton root={block.id ?? ""} />
+          )}
           <ToolbarSMLToggle sml={sml} setSML={setSML} />
           <DarkModeToggle />
         </ToolbarGroup>

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

@@ -4,7 +4,12 @@ import { useLocation, useNavigate, useSearchParams } from "react-router"
 import { Button, Tooltip } from "@patternfly/react-core"
 import Icon from "@patternfly/react-icons/dist/esm/icons/code-icon"
 
-export default function ToolbarShowSourceButton() {
+type Props = {
+  /** Root of the program */
+  root: string
+}
+
+export default function ToolbarShowSourceButton({ root }: Props) {
   const { hash } = useLocation()
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
@@ -15,12 +20,12 @@ export default function ToolbarShowSourceButton() {
       navigate(hash)
     } else {
       // open detail
-      navigate("?detail&type=source" + hash)
+      navigate(`?detail&type=block&id=${root}${hash}`)
     }
-  }, [hash, navigate, searchParams])
+  }, [hash, navigate, searchParams, root])
 
   return (
-    <Tooltip content="Show program source">
+    <Tooltip content="Show program source and program output">
       <Button size="sm" variant="secondary" icon={<Icon />} onClick={onClick} />
     </Tooltip>
   )

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

@@ -6,7 +6,6 @@ import {
   hasInput,
   hasMessage,
   hasParser,
-  hasResult,
   hasScalarResult,
   hasTimingInformation,
   capitalizeAndUnSnakeCase,
@@ -17,7 +16,7 @@ import {
 import type Tile from "./Tile"
 
 /** The final result of the block */
-function result(block: import("../../pdl_ast").PdlBlock) {
+/* function result(block: import("../../pdl_ast").PdlBlock) {
   if (hasResult(block) && hasTimingInformation(block)) {
     return [
       {
@@ -31,7 +30,7 @@ function result(block: import("../../pdl_ast").PdlBlock) {
   }
 
   return []
-}
+} */
 
 /** Remove objects from the Masonry model that aren't helpful to display */
 function removeFluff({ kind }: { kind?: string }) {
@@ -44,7 +43,7 @@ export default function computeModel(block: import("../../pdl_ast").PdlBlock) {
   const base = computeBaseModel(block)
 
   const masonry: Tile[] = base
-    .concat(result(block))
+    // .concat(result(block))
     .flatMap(({ id, block, children }) => {
       if (children.length === 0 && hasTimingInformation(block)) {
         const { resultForDisplay, meta, lang } = isLLMBlock(block)