refactor: in react ui, consolidate Viewer and MasonryCombo

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

Author: starpit

pdl-live-react/src/page/Viewer.css renamed to pdl-live-react/src/page/Page.css

@@ -3,9 +3,9 @@ import { useEffect, useState } from "react"
 
 import { Page, PageSection } from "@patternfly/react-core"
 
-import Viewer from "./Viewer"
 import Sidebar from "./Sidebar"
 import Masthead from "./Masthead"
+import MasonryCombo from "../view/masonry/MasonryCombo"
 import DrawerContent from "../view/detail/DrawerContent"
 import PageBreadcrumbs, { type PageBreadcrumbProps } from "./PageBreadcrumbs"
 
@@ -14,6 +14,8 @@ import DarkModeContext, {
   getDarkModeUserSetting,
 } from "./DarkModeContext"
 
+import "./Page.css"
+
 const withPadding = { default: "padding" as const }
 const withoutPadding = { default: "noPadding" as const }
 
@@ -65,7 +67,7 @@ export default function PDLPage(props: Props) {
       }
     >
       {!children ? (
-        value && value.length > 0 && <Viewer value={value} />
+        value && value.length > 0 && <MasonryCombo value={value} />
       ) : (
         <PageSection
           isFilled

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

@@ -10,7 +10,7 @@ import Toolbar, { type As, type SML } from "./Toolbar"
 import "./Masonry.css"
 
 type Props = {
-  block: import("../../pdl_ast").PdlBlock
+  value: string
 }
 
 const asLocalStorageKey = "pdl-viewer.masonry.as"
@@ -29,7 +29,14 @@ function setSMLUserSetting(sml: SML) {
   localStorage.setItem(smlLocalStorageKey, sml)
 }
 
-export default function MasonryTimelineCombo({ block }: Props) {
+/** Combines <Masonry/>, <Timeline/>, ... */
+export default function MasonryCombo({ value }: Props) {
+  const block = useMemo(
+    () =>
+      value ? (JSON.parse(value) as import("../../pdl_ast").PdlBlock) : null,
+    [value],
+  )
+
   const [as, setAs] = useState<As>(getAsUserSetting())
   const [sml, setSML] = useState<SML>(getSMLUserSetting())
 
@@ -41,6 +48,10 @@ export default function MasonryTimelineCombo({ block }: Props) {
     [block],
   )
 
+  if (!block) {
+    return "Invalid trace content"
+  }
+
   return (
     <>
       <PageSection type="subnav">