From 27c6bcb3b5a433bb6fb86f1936fc21bebe201096 Mon Sep 17 00:00:00 2001
From: Martin Mark <martin@martinmark.com>
Date: Mon, 23 Dec 2024 12:39:38 -0500
Subject: [PATCH 1/6] Update font-size

---
 .../Home/Browse3/pages/CallPage/ObjectViewerSection.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
index d02a2e881ca..6538faa5534 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
@@ -44,7 +44,7 @@ TitleRow.displayName = 'S.TitleRow';
 const Title = styled.div`
   flex: 1 1 auto;
   font-family: Source Sans Pro;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   line-height: 32px;
   letter-spacing: 0px;

From b3ab627d716764158732abb230b47832f58c4786 Mon Sep 17 00:00:00 2001
From: Martin Mark <martin@martinmark.com>
Date: Mon, 23 Dec 2024 13:01:28 -0500
Subject: [PATCH 2/6] Simplified ObjectViewer - size and spacing tweaks

---
 .../Browse3/pages/CallPage/CallDetails.tsx    |  4 +-
 .../pages/CallPage/ObjectViewerSection.tsx    | 51 +++++++++++--------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallDetails.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallDetails.tsx
index 03519960bf3..ac6afe35a6b 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallDetails.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallDetails.tsx
@@ -133,7 +133,7 @@ export const CallDetails: FC<{
           sx={{
             flex: '0 0 auto',
             maxHeight: `calc(100% - ${HEADER_HEIGHT_BUFFER}px)`,
-            p: 2,
+            padding: '4px 16px',
           }}>
           <CustomWeaveTypeProjectContext.Provider
             value={{entity: call.entity, project: call.project}}>
@@ -146,7 +146,7 @@ export const CallDetails: FC<{
             maxHeight: `calc(100% - ${
               multipleChildCallOpRefs.length > 0 ? HEADER_HEIGHT_BUFFER : 0
             }px)`,
-            p: 2,
+            padding: '4px 16px',
           }}>
           {'traceback' in excInfo ? (
             <div style={{overflow: 'auto', height: '100%'}}>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
index 6538faa5534..a0d9b35a672 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
@@ -22,6 +22,7 @@ import {WeaveCHTable, WeaveCHTableSourceRefContext} from './DataTableView';
 import {ObjectViewer} from './ObjectViewer';
 import {getValueType, traverse} from './traverse';
 import {ValueView} from './ValueView';
+import {Icon} from '../../../../../Icon';
 
 const EXPANDED_IDS_LENGTH = 200;
 
@@ -49,6 +50,13 @@ const Title = styled.div`
   line-height: 32px;
   letter-spacing: 0px;
   text-align: left;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  
+  &:hover {
+    opacity: 0.8;
+  }
 `;
 Title.displayName = 'S.Title';
 
@@ -172,6 +180,14 @@ const ObjectViewerSectionNonEmpty = ({
     }
   };
 
+  const onToggleExpansion = () => {
+    if (mode === 'expanded') {
+      onClickCollapsed();
+    } else {
+      onClickExpanded();
+    }
+  };
+
   // On first render and when data changes, recompute expansion state
   useEffect(() => {
     const isSimple = isSimpleData(data);
@@ -187,21 +203,23 @@ const ObjectViewerSectionNonEmpty = ({
   return (
     <Box sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
       <TitleRow>
-        <Title>{title}</Title>
-        <Button
-          variant="quiet"
-          icon="row-height-small"
-          active={mode === 'collapsed'}
-          onClick={onClickCollapsed}
-          tooltip="View collapsed"
-        />
+        <Title onClick={() => setMode(mode === 'hidden' ? 'collapsed' : 'hidden')}>
+          <Icon
+            name={mode === 'hidden' ? 'chevron-next' : 'chevron-down'}
+            width={16}
+            height={16}
+            style={{marginRight: '8px'}}
+          />
+          {title}
+        </Title>
         <Button
           variant="quiet"
-          icon="expand-uncollapse"
-          active={mode === 'expanded'}
-          onClick={onClickExpanded}
+          icon={mode === 'expanded' ? 'collapse' : 'expand-uncollapse'}
+          onClick={onToggleExpansion}
           tooltip={
-            isExpandAllSmall
+            mode === 'expanded'
+              ? 'View collapsed'
+              : isExpandAllSmall
               ? 'Expand all'
               : `Expand next ${EXPANDED_IDS_LENGTH} rows`
           }
@@ -213,15 +231,6 @@ const ObjectViewerSectionNonEmpty = ({
           onClick={() => setMode('json')}
           tooltip="View as JSON"
         />
-        {!noHide && (
-          <Button
-            variant="quiet"
-            icon="hide-hidden"
-            active={mode === 'hidden'}
-            onClick={() => setMode('hidden')}
-            tooltip="Hide"
-          />
-        )}
       </TitleRow>
       {body}
     </Box>

From da73779ab9d9d7f229ce452fb7aca5c3b9a6ccc3 Mon Sep 17 00:00:00 2001
From: Martin Mark <martin@martinmark.com>
Date: Mon, 23 Dec 2024 13:06:54 -0500
Subject: [PATCH 3/6] Lint fix

---
 .../Home/Browse3/pages/CallPage/ObjectViewerSection.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
index a0d9b35a672..cccb6264174 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
@@ -14,6 +14,7 @@ import {isWeaveObjectRef, parseRef} from '../../../../../../react';
 import {Alert} from '../../../../../Alert';
 import {Button} from '../../../../../Button';
 import {CodeEditor} from '../../../../../CodeEditor';
+import {Icon} from '../../../../../Icon';
 import {isWeaveRef} from '../../filters/common';
 import {isCustomWeaveTypePayload} from '../../typeViews/customWeaveType.types';
 import {CustomWeaveTypeDispatcher} from '../../typeViews/CustomWeaveTypeDispatcher';
@@ -22,7 +23,6 @@ import {WeaveCHTable, WeaveCHTableSourceRefContext} from './DataTableView';
 import {ObjectViewer} from './ObjectViewer';
 import {getValueType, traverse} from './traverse';
 import {ValueView} from './ValueView';
-import {Icon} from '../../../../../Icon';
 
 const EXPANDED_IDS_LENGTH = 200;
 

From 04b018f41b2d717101c514c6cd52e7dccfa02a45 Mon Sep 17 00:00:00 2001
From: Martin Mark <martin@martinmark.com>
Date: Mon, 30 Dec 2024 10:32:29 -0500
Subject: [PATCH 4/6] Update ObjectViewerSection.tsx

---
 .../Home/Browse3/pages/CallPage/ObjectViewerSection.tsx      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
index cccb6264174..0de27d51dca 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
@@ -53,7 +53,7 @@ const Title = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  
+
   &:hover {
     opacity: 0.8;
   }
@@ -203,7 +203,8 @@ const ObjectViewerSectionNonEmpty = ({
   return (
     <Box sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
       <TitleRow>
-        <Title onClick={() => setMode(mode === 'hidden' ? 'collapsed' : 'hidden')}>
+        <Title
+          onClick={() => setMode(mode === 'hidden' ? 'collapsed' : 'hidden')}>
           <Icon
             name={mode === 'hidden' ? 'chevron-next' : 'chevron-down'}
             width={16}

From 40f76beceffcc1c3c76f1a43518def7cf81ffe44 Mon Sep 17 00:00:00 2001
From: Martin Mark <martin@martinmark.com>
Date: Fri, 3 Jan 2025 11:07:07 -0500
Subject: [PATCH 5/6] Style: Function one-line checks

---
 .../pages/CallPage/ObjectViewerSection.tsx    | 46 ++++++++++++++-----
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
index 0de27d51dca..dbc8f07d190 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/ObjectViewerSection.tsx
@@ -24,6 +24,28 @@ import {ObjectViewer} from './ObjectViewer';
 import {getValueType, traverse} from './traverse';
 import {ValueView} from './ValueView';
 
+type Mode = 'hidden' | 'collapsed' | 'expanded' | 'json';
+
+function isModeHidden(mode: Mode): boolean {
+  return mode === 'hidden';
+}
+
+function isModeCollapsed(mode: Mode): boolean {
+  return mode === 'collapsed';
+}
+
+function isModeExpanded(mode: Mode): boolean {
+  return mode === 'expanded';
+}
+
+function isModeJson(mode: Mode): boolean {
+  return mode === 'json';
+}
+
+function isModeCollapsedOrExpanded(mode: Mode): boolean {
+  return isModeCollapsed(mode) || isModeExpanded(mode);
+}
+
 const EXPANDED_IDS_LENGTH = 200;
 
 type Data = Record<string, any>;
@@ -104,22 +126,22 @@ const ObjectViewerSectionNonEmpty = ({
   isExpanded,
 }: ObjectViewerSectionProps) => {
   const apiRef = useGridApiRef();
-  const [mode, setMode] = useState('collapsed');
+  const [mode, setMode] = useState<Mode>('collapsed');
   const [expandedIds, setExpandedIds] = useState<GridRowId[]>([]);
 
   const body = useMemo(() => {
-    if (mode === 'collapsed' || mode === 'expanded') {
+    if (isModeCollapsedOrExpanded(mode)) {
       return (
         <ObjectViewer
           apiRef={apiRef}
           data={data}
-          isExpanded={mode === 'expanded'}
+          isExpanded={isModeExpanded(mode)}
           expandedIds={expandedIds}
           setExpandedIds={setExpandedIds}
         />
       );
     }
-    if (mode === 'json') {
+    if (isModeJson(mode)) {
       return (
         <CodeEditor
           value={JSON.stringify(data, null, 2)}
@@ -155,7 +177,7 @@ const ObjectViewerSectionNonEmpty = ({
 
   // Re-clicking the button will reapply collapse/expand
   const onClickCollapsed = () => {
-    if (mode === 'collapsed') {
+    if (isModeCollapsed(mode)) {
       setTreeExpanded(false);
     }
     setMode('collapsed');
@@ -167,7 +189,7 @@ const ObjectViewerSectionNonEmpty = ({
     getGroupIds().length - expandedIds.length < EXPANDED_IDS_LENGTH;
 
   const onClickExpanded = () => {
-    if (mode === 'expanded') {
+    if (isModeExpanded(mode)) {
       setTreeExpanded(true);
     }
     setMode('expanded');
@@ -181,7 +203,7 @@ const ObjectViewerSectionNonEmpty = ({
   };
 
   const onToggleExpansion = () => {
-    if (mode === 'expanded') {
+    if (isModeExpanded(mode)) {
       onClickCollapsed();
     } else {
       onClickExpanded();
@@ -204,9 +226,9 @@ const ObjectViewerSectionNonEmpty = ({
     <Box sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
       <TitleRow>
         <Title
-          onClick={() => setMode(mode === 'hidden' ? 'collapsed' : 'hidden')}>
+          onClick={() => setMode(isModeHidden(mode) ? 'collapsed' : 'hidden')}>
           <Icon
-            name={mode === 'hidden' ? 'chevron-next' : 'chevron-down'}
+            name={isModeHidden(mode) ? 'chevron-next' : 'chevron-down'}
             width={16}
             height={16}
             style={{marginRight: '8px'}}
@@ -215,10 +237,10 @@ const ObjectViewerSectionNonEmpty = ({
         </Title>
         <Button
           variant="quiet"
-          icon={mode === 'expanded' ? 'collapse' : 'expand-uncollapse'}
+          icon={isModeExpanded(mode) ? 'collapse' : 'expand-uncollapse'}
           onClick={onToggleExpansion}
           tooltip={
-            mode === 'expanded'
+            isModeExpanded(mode)
               ? 'View collapsed'
               : isExpandAllSmall
               ? 'Expand all'
@@ -228,7 +250,7 @@ const ObjectViewerSectionNonEmpty = ({
         <Button
           variant="quiet"
           icon="code-alt"
-          active={mode === 'json'}
+          active={isModeJson(mode)}
           onClick={() => setMode('json')}
           tooltip="View as JSON"
         />

From 301cadd0f3bf670beacbf23c0951163527ed55a3 Mon Sep 17 00:00:00 2001
From: Martin Mark <martin@martinmark.com>
Date: Fri, 3 Jan 2025 11:08:34 -0500
Subject: [PATCH 6/6] Added Values title for objects

---
 .../Home/Browse3/pages/ObjectVersionPage.tsx                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx
index 085587a64d8..dffa40b8503 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx
@@ -334,7 +334,7 @@ const ObjectVersionPageInner: React.FC<{
                     <CustomWeaveTypeProjectContext.Provider
                       value={{entity: entityName, project: projectName}}>
                       <ObjectViewerSection
-                        title=""
+                        title="Values"
                         data={viewerDataAsObject}
                         noHide
                         isExpanded