feat: in react ui, adjust visibility of Timeline and Topology based on SML selection

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

Author: starpit

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

@@ -20,13 +20,13 @@ export default function Masonry({ as, sml, model, children }: Props) {
   return (
     <ResponsiveMasonry columnsCountBreakPoints={breakpoints}>
       <MasonryView className="pdl-masonry-view">
-        {(!children ? [] : Array.isArray(children) ? children : [children]).map(
-          (child, idx) => (
+        {(!children ? [] : Array.isArray(children) ? children : [children])
+          .filter(Boolean)
+          .map((child, idx) => (
             <div key={idx} className="pdl-masonry-tile" data-padding={sml}>
               {child}
             </div>
-          ),
-        )}
+          ))}
         {model.map((props, idx) => (
           <MasonryTile
             key={props.id}

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

@@ -65,8 +65,8 @@ export default function MasonryCombo({ value }: Props) {
         aria-label="PDL Viewer main section"
       >
         <Masonry model={masonry} as={as} sml={sml}>
-          <Timeline model={base} numbering={numbering} />
-          <Memory block={block} numbering={numbering} />
+          {sml !== "s" && <Timeline model={base} numbering={numbering} />}
+          {sml === "l" && <Memory block={block} numbering={numbering} />}
         </Masonry>
       </PageSection>