feat: in react ui, relegate source/raw trace to a single button

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

Author: starpit

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

@@ -16,7 +16,6 @@ import DarkModeContext, {
 
 import "./Page.css"
 
-const notFilled = { isFilled: false }
 const withPadding = { default: "padding" as const }
 const withoutPadding = { default: "noPadding" as const }
 
@@ -59,8 +58,6 @@ export default function PDLPage(props: Props) {
           <Masthead setDarkMode={setDarkMode} />
         </DarkModeContext.Provider>
       }
-      groupProps={notFilled /* so breadcrumbs aren't filled */}
-      isBreadcrumbGrouped
       breadcrumb={
         <PageBreadcrumbs
           breadcrumb1={props.breadcrumb1}

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

@@ -1,21 +1,11 @@
 import { useMemo } from "react"
-import { useLocation } from "react-router"
 
-import { isView } from "../view/masonry/View"
 import Program from "../view/masonry/MasonryTimelineCombo"
 
 import "./Viewer.css"
 
 /** This is the main view component */
 export default function Viewer({ value }: { value: string }) {
-  // We will use this to find the current active tab
-  const { hash } = useLocation()
-
-  const activeTabAsSpecified = !hash || hash === "#" ? "program" : hash.slice(1)
-  const activeTab = isView(activeTabAsSpecified)
-    ? activeTabAsSpecified
-    : ("program" as const)
-
   const data = useMemo(
     () => (value ? (JSON.parse(value) as import("../pdl_ast").PdlBlock) : null),
     [value],
@@ -24,5 +14,5 @@ export default function Viewer({ value }: { value: string }) {
     return "Invalid trace content"
   }
 
-  return <Program block={data} view={activeTab} />
+  return <Program block={data} />
 }

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

@@ -1,4 +1,7 @@
-export default function BlockNotFound(props: { id: string; value: string }) {
+export default function BlockNotFound(props: {
+  id: string | null
+  value: string
+}) {
   console.error("Block not found", props.id, props.value)
   return <div>Block not found</div>
 }

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

@@ -11,7 +11,6 @@ import {
   type TabsProps,
 } from "@patternfly/react-core"
 
-import BlockNotFound from "./BlockNotFound"
 import drawerContentBody from "./DrawerContentBody"
 import BreadcrumbBarForBlock from "../breadcrumbs/BreadcrumbBarForBlock"
 
@@ -29,6 +28,9 @@ type Props = {
 
 function header(objectType: string) {
   switch (objectType) {
+    case "source":
+    case "rawtrace":
+      return "Code"
     case "def":
       return "Variable Definition"
     default:
@@ -81,21 +83,19 @@ export default function DrawerContent({ value }: Props) {
     [onCloseDrawer],
   )
 
-  if (!id || !objectType) {
+  if (!objectType) {
     // Should never happen. TODO error handling?
     return <></>
   } else if (!value) {
     // Nothing to show
     return <></>
-  } else if (!block) {
-    return <BlockNotFound id={id} value={value} />
   }
 
   return (
     <Card isPlain isLarge isFullHeight className="pdl-drawer-content">
       <CardHeader actions={actions}>
         <CardTitle>{header(objectType)}</CardTitle>
-        {description(block)}
+        {block && description(block)}
       </CardHeader>
       <CardBody>
         <Tabs
@@ -105,7 +105,7 @@ export default function DrawerContent({ value }: Props) {
           mountOnEnter
           unmountOnExit
         >
-          {drawerContentBody({ def, objectType, model: block })}
+          {drawerContentBody({ id, value, def, objectType, model: block })}
         </Tabs>
       </CardBody>
     </Card>

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

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from "react"
 import { Tab, TabTitleText } from "@patternfly/react-core"
 
+const BlockNotFound = lazy(() => import("./BlockNotFound"))
 const DefContent = lazy(() => import("./DefContent"))
 const SourceTabContent = lazy(() => import("./SourceTabContent"))
 const ContextTabContent = lazy(() => import("./ContextTabContent"))
@@ -13,6 +14,21 @@ import {
   type NonScalarPdlBlock as Model,
 } from "../../helpers"
 
+function sourceBody(value: string) {
+  return [
+    <Tab eventKey={0} title={<TabTitleText>Source</TabTitleText>}>
+      <Suspense>
+        <SourceTabContent block={JSON.parse(value)} />
+      </Suspense>
+    </Tab>,
+    <Tab 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 (
@@ -57,16 +73,42 @@ function blockBody(block: Model) {
 }
 
 type Props = {
+  id: string | null
+  value: string
   def: string | null
   objectType: string
-  model: Model
+  model: Model | null
 }
 
-export default function DrawerContentBody({ def, objectType, model }: Props) {
+export default function DrawerContentBody({
+  id,
+  value,
+  def,
+  objectType,
+  model,
+}: Props) {
   switch (objectType) {
+    case "source":
+    case "rawtrace":
+      return sourceBody(value)
     case "def":
+      if (!model) {
+        return (
+          <Suspense>
+            <BlockNotFound id={id} value={value} />
+          </Suspense>
+        )
+      }
       return defBody(def, model)
     default:
+      if (!model) {
+        return (
+          <Suspense>
+            <BlockNotFound id={id} value={value} />
+          </Suspense>
+        )
+      }
+
       return blockBody(model)
   }
 }

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

@@ -1,25 +1,15 @@
-import { useNavigate, useSearchParams } from "react-router"
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  lazy,
-  Suspense,
-} from "react"
+import { useEffect, useMemo, useState } from "react"
 import { PageSection } from "@patternfly/react-core"
 
 import Timeline from "../timeline/TimelineFromModel"
-const Code = lazy(() => import("../code/Code"))
 
 import Masonry from "./Masonry"
 import computeModel from "./model"
-import Toolbar, { type As, type SML, type View } from "./Toolbar"
+import Toolbar, { type As, type SML } from "./Toolbar"
 
 import "./Masonry.css"
 
 type Props = {
-  view: View
   block: import("../../pdl_ast").PdlBlock
 }
 
@@ -39,23 +29,13 @@ function setSMLUserSetting(sml: SML) {
   localStorage.setItem(smlLocalStorageKey, sml)
 }
 
-export default function MasonryTimelineCombo({ block, view }: Props) {
+export default function MasonryTimelineCombo({ block }: Props) {
   const [as, setAs] = useState<As>(getAsUserSetting())
   const [sml, setSML] = useState<SML>(getSMLUserSetting())
 
   useEffect(() => setAsUserSetting(as), [as])
   useEffect(() => setSMLUserSetting(sml), [sml])
 
-  const [searchParams] = useSearchParams()
-  const s = searchParams.toString().length === 0 ? "" : "?" + searchParams
-  const navigate = useNavigate()
-  const setView = useCallback(
-    (view: View) => {
-      navigate(s + "#" + view)
-    },
-    [navigate, s],
-  )
-
   const { base, masonry, numbering } = useMemo(
     () => computeModel(block),
     [block],
@@ -64,30 +44,17 @@ export default function MasonryTimelineCombo({ block, view }: Props) {
   return (
     <>
       <PageSection type="subnav">
-        <Toolbar
-          as={as}
-          setAs={setAs}
-          sml={sml}
-          setSML={setSML}
-          view={view}
-          setView={setView}
-        />
+        <Toolbar as={as} setAs={setAs} sml={sml} setSML={setSML} />
       </PageSection>
       <PageSection
         isFilled
         hasOverflowScroll
         className="pdl-content-section"
         aria-label="PDL Viewer main section"
       >
-        {view === "program" ? (
-          <Masonry model={masonry} as={as} sml={sml}>
-            <Timeline model={base} numbering={numbering} />
-          </Masonry>
-        ) : (
-          <Suspense>
-            <Code block={block} limitHeight={false} raw={view === "rawtrace"} />
-          </Suspense>
-        )}
+        <Masonry model={masonry} as={as} sml={sml}>
+          <Timeline model={base} numbering={numbering} />
+        </Masonry>
       </PageSection>
     </>
   )

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

@@ -7,10 +7,7 @@ import {
 
 import ToolbarAsToggle from "./ToolbarAsToggle"
 import ToolbarSMLToggle from "./ToolbarSMLToggle"
-import ToolbarViewToggle from "./ToolbarViewToggle"
-
-import { type View } from "./View"
-export { type View }
+import ToolbarShowSourceButton from "./ToolbarShowSourceButton"
 
 const alignEnd = { default: "alignEnd" as const }
 
@@ -23,31 +20,20 @@ export type Props = {
 
   sml: SML
   setSML(sml: SML): void
-
-  view: View
-  setView(view: View): void
 }
 
-export default function MasonryToolbar({
-  as,
-  setAs,
-  sml,
-  setSML,
-  view,
-  setView,
-}: Props) {
+export default function MasonryToolbar({ as, setAs, sml, setSML }: Props) {
   return (
     <Toolbar className="pdl-masonry-toolbar">
       <ToolbarContent>
-        <ToolbarGroup>
+        <ToolbarGroup align={alignEnd} variant="action-group">
           <ToolbarItem>
-            <ToolbarViewToggle view={view} setView={setView} />
+            <ToolbarShowSourceButton />
           </ToolbarItem>
-        </ToolbarGroup>
-
-        <ToolbarGroup variant="action-group-plain" align={alignEnd}>
           <ToolbarItem>
             <ToolbarSMLToggle sml={sml} setSML={setSML} />
+          </ToolbarItem>
+          <ToolbarItem>
             <ToolbarAsToggle as={as} setAs={setAs} />
           </ToolbarItem>
         </ToolbarGroup>

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

@@ -0,0 +1,21 @@
+import { useCallback } from "react"
+import { useLocation, useNavigate } from "react-router"
+
+import { Button, Tooltip } from "@patternfly/react-core"
+
+import CodeIcon from "@patternfly/react-icons/dist/esm/icons/code-icon"
+
+export default function ToolbarProgramOrSourceToggle() {
+  const { hash } = useLocation()
+  const navigate = useNavigate()
+
+  const handleClickSource = useCallback(() => {
+    navigate("?detail&type=source" + hash)
+  }, [hash, navigate])
+
+  return (
+    <Tooltip content="Show program source">
+      <Button size="sm" icon={<CodeIcon />} onClick={handleClickSource} />
+    </Tooltip>
+  )
+}