chore(ui): Object viewer expand/collapse button simplification

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%'}}>

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';
@@ -23,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>;
@@ -44,11 +67,18 @@ 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;
   text-align: left;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
 `;
 Title.displayName = 'S.Title';
 
@@ -96,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)}
@@ -147,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');
@@ -159,7 +189,7 @@ const ObjectViewerSectionNonEmpty = ({
     getGroupIds().length - expandedIds.length < EXPANDED_IDS_LENGTH;
 
   const onClickExpanded = () => {
-    if (mode === 'expanded') {
+    if (isModeExpanded(mode)) {
       setTreeExpanded(true);
     }
     setMode('expanded');
@@ -172,6 +202,14 @@ const ObjectViewerSectionNonEmpty = ({
     }
   };
 
+  const onToggleExpansion = () => {
+    if (isModeExpanded(mode)) {
+      onClickCollapsed();
+    } else {
+      onClickExpanded();
+    }
+  };
+
   // On first render and when data changes, recompute expansion state
   useEffect(() => {
     const isSimple = isSimpleData(data);
@@ -187,41 +225,35 @@ 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(isModeHidden(mode) ? 'collapsed' : 'hidden')}>
+          <Icon
+            name={isModeHidden(mode) ? '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={isModeExpanded(mode) ? 'collapse' : 'expand-uncollapse'}
+          onClick={onToggleExpansion}
           tooltip={
-            isExpandAllSmall
+            isModeExpanded(mode)
+              ? 'View collapsed'
+              : isExpandAllSmall
               ? 'Expand all'
               : `Expand next ${EXPANDED_IDS_LENGTH} rows`
           }
         />
         <Button
           variant="quiet"
           icon="code-alt"
-          active={mode === 'json'}
+          active={isModeJson(mode)}
           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>

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