feat: in react ui, switch from tabs to toolbar ui

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

Author: starpit

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

@@ -1,7 +1,4 @@
 .pdl-page .pdl-content-section {
-  /* This places the content e.g. editors flush with the tabs. See Preview.css for other rules in this arena. */
-  padding-top: 0;
-
   /* These help to fit monaco-editor to the height of the tab content section */
   & > .pf-v6-c-page__main-body {
     display: flex;

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

@@ -6,7 +6,6 @@ import { Page, PageSection } from "@patternfly/react-core"
 import Viewer from "./Viewer"
 import Sidebar from "./Sidebar"
 import Masthead from "./Masthead"
-import ViewerTabs from "./ViewerTabs"
 import DrawerContent from "../view/detail/DrawerContent"
 import PageBreadcrumbs, { type PageBreadcrumbProps } from "./PageBreadcrumbs"
 
@@ -60,7 +59,6 @@ export default function PDLPage(props: Props) {
           <Masthead setDarkMode={setDarkMode} />
         </DarkModeContext.Provider>
       }
-      horizontalSubnav={<ViewerTabs hidden={typeof value !== "string"} />}
       groupProps={notFilled /* so breadcrumbs aren't filled */}
       isBreadcrumbGrouped
       breadcrumb={

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

@@ -1,9 +1,8 @@
-import { lazy, useEffect, useMemo, useState } from "react"
+import { useMemo } from "react"
 import { useLocation } from "react-router"
 
-const Code = lazy(() => import("../view/code/Code"))
-const Memory = lazy(() => import("../view/memory/Memory"))
-const Program = lazy(() => import("../view/masonry/MasonryTimelineCombo"))
+import { isView } from "../view/masonry/View"
+import Program from "../view/masonry/MasonryTimelineCombo"
 
 import "./Viewer.css"
 
@@ -12,17 +11,10 @@ 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
-  const activeTab = ["#source", "#raw", "#dataflow", "#program"].includes(
-    activeTabAsSpecified,
-  )
+  const activeTabAsSpecified = !hash || hash === "#" ? "program" : hash.slice(1)
+  const activeTab = isView(activeTabAsSpecified)
     ? activeTabAsSpecified
-    : "#program"
-
-  const [shown, setShown] = useState<Record<string, boolean>>({})
-  useEffect(() => {
-    setShown((shown) => Object.assign({}, shown, { [activeTab]: true }))
-  }, [activeTab, setShown])
+    : ("program" as const)
 
   const data = useMemo(
     () => (value ? (JSON.parse(value) as import("../pdl_ast").PdlBlock) : null),
@@ -32,44 +24,5 @@ export default function Viewer({ value }: { value: string }) {
     return "Invalid trace content"
   }
 
-  return (
-    <>
-      {[
-        <section
-          className="pdl-viewer-section"
-          data-no-scroll
-          key="#source"
-          data-hash="#source"
-          hidden={activeTab !== "#source"}
-        >
-          <Code block={data} limitHeight={false} />
-        </section>,
-        <section
-          className="pdl-viewer-section"
-          data-no-scroll
-          key="#raw"
-          data-hash="#raw"
-          hidden={activeTab !== "#raw"}
-        >
-          <Code block={data} limitHeight={false} raw />
-        </section>,
-        <section
-          className="pdl-viewer-section"
-          key="#dataflow"
-          data-hash="#dataflow"
-          hidden={activeTab !== "#dataflow"}
-        >
-          <Memory block={data} />
-        </section>,
-        <section
-          className="pdl-viewer-section"
-          key="#program"
-          data-hash="#program"
-          hidden={activeTab !== "#program"}
-        >
-          <Program block={data} />
-        </section>,
-      ].filter((_) => shown[_.props["data-hash"]])}
-    </>
-  )
+  return <Program block={data} view={activeTab} />
 }

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

@@ -32,7 +32,7 @@ export default function BreadcrumbBarForBlockId({
   const s = searchParams.toString().length === 0 ? "" : "&" + searchParams
   const onClick = useCallback(
     () => navigate(`?detail&type=block&id=${id}${s}${hash}`),
-    [id, hash, s],
+    [id, hash, s, navigate],
   )
 
   const crumbs = id.replace(/text\.\d+\./g, "").split(/\./)

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

@@ -1,51 +1,82 @@
-import { useEffect, useMemo, useState } from "react"
+import { useNavigate } from "react-router"
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  lazy,
+  Suspense,
+} from "react"
 
 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 } from "./Toolbar"
+import Toolbar, { type As, type SML, type View } from "./Toolbar"
 
 import "./Masonry.css"
 
 type Props = {
+  view: View
   block: import("../../pdl_ast").PdlBlock
 }
 
 const asLocalStorageKey = "pdl-viewer.masonry.as"
-export function getAsUserSetting(): As {
+function getAsUserSetting(): As {
   return (localStorage.getItem(asLocalStorageKey) as As) || "grid"
 }
-export function setAsUserSetting(as: As) {
+function setAsUserSetting(as: As) {
   localStorage.setItem(asLocalStorageKey, as)
 }
 
 const smlLocalStorageKey = "pdl-viewer.masonry.sml"
-export function getSMLUserSetting(): SML {
+function getSMLUserSetting(): SML {
   return (localStorage.getItem(smlLocalStorageKey) as SML) || "l"
 }
-export function setSMLUserSetting(sml: SML) {
+function setSMLUserSetting(sml: SML) {
   localStorage.setItem(smlLocalStorageKey, sml)
 }
 
-export default function MasonryTimelineCombo({ block }: Props) {
+export default function MasonryTimelineCombo({ block, view }: Props) {
   const [as, setAs] = useState<As>(getAsUserSetting())
   const [sml, setSML] = useState<SML>(getSMLUserSetting())
 
   useEffect(() => setAsUserSetting(as), [as])
   useEffect(() => setSMLUserSetting(sml), [sml])
 
+  const navigate = useNavigate()
+  const setView = useCallback(
+    (view: View) => {
+      navigate("#" + view)
+    },
+    [navigate],
+  )
+
   const { base, masonry, numbering } = useMemo(
     () => computeModel(block),
     [block],
   )
 
   return (
     <>
-      <Toolbar as={as} setAs={setAs} sml={sml} setSML={setSML} />
-      <Masonry model={masonry} as={as} sml={sml}>
-        <Timeline model={base} numbering={numbering} />
-      </Masonry>
+      <Toolbar
+        as={as}
+        setAs={setAs}
+        sml={sml}
+        setSML={setSML}
+        view={view}
+        setView={setView}
+      />
+      {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>
+      )}
     </>
   )
 }

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

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

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

@@ -0,0 +1,40 @@
+import { useCallback } from "react"
+import { ToggleGroup, ToggleGroupItem } from "@patternfly/react-core"
+
+export default function ToolbarProgramOrSourceToggle({
+  view,
+  setView,
+}: Pick<import("./Toolbar").Props, "view" | "setView">) {
+  const handleClickProgram = useCallback(() => {
+    setView("program")
+  }, [setView])
+  const handleClickSource = useCallback(() => {
+    setView("source")
+  }, [setView])
+  const handleClickRawTrace = useCallback(() => {
+    setView("rawtrace")
+  }, [setView])
+
+  return (
+    <ToggleGroup aria-label="masonry program-source toggle">
+      <ToggleGroupItem
+        text="Program"
+        aria-label="show program"
+        isSelected={view === "program"}
+        onClick={handleClickProgram}
+      />
+      <ToggleGroupItem
+        text="Source"
+        aria-label="show source"
+        isSelected={view === "source"}
+        onClick={handleClickSource}
+      />
+      <ToggleGroupItem
+        text="Raw Trace"
+        aria-label="show raw trace"
+        isSelected={view == "rawtrace"}
+        onClick={handleClickRawTrace}
+      />
+    </ToggleGroup>
+  )
+}

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

@@ -0,0 +1,5 @@
+export type View = "program" | "source" | "rawtrace"
+
+export function isView(v: string): v is View {
+  return v === "program" || v === "source" || v === "rawtrace"
+}