Update expand/collapse section buttons on Runs page

js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx

@@ -38,6 +38,7 @@ import checklist from '../icon-svgs/checklist.svg';
 import chevron_left from '../icon-svgs/chevron_left.svg';
 import chevron_right from '../icon-svgs/chevron_right.svg';
 import close from '../icon-svgs/close.svg';
+import collapse_arrows from '../icon-svgs/collapse_arrows.svg';
 import concept_book from '../icon-svgs/concept-book.svg';
 import console_icon from '../icon-svgs/console.svg';
 import content_copy from '../icon-svgs/content_copy.svg';
@@ -55,6 +56,7 @@ import error from '../icon-svgs/error.svg';
 import error_outline from '../icon-svgs/error_outline.svg';
 import execute from '../icon-svgs/execute.svg';
 import expand from '../icon-svgs/expand.svg';
+import expand_arrows from '../icon-svgs/expand_arrows.svg';
 import expand_less from '../icon-svgs/expand_less.svg';
 import expand_more from '../icon-svgs/expand_more.svg';
 import filter_alt from '../icon-svgs/filter_alt.svg';
@@ -246,6 +248,7 @@ export const Icons = {
   close,
   console: console_icon,
   content_copy,
+  collapse_arrows,
   delete: deleteSVG,
   done,
   dot,
@@ -257,6 +260,7 @@ export const Icons = {
   error,
   error_outline,
   expand,
+  expand_arrows,
   expand_less,
   expand_more,
   filter_alt,

js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx

@@ -45,6 +45,10 @@ export class SplitPanelContainer extends React.Component<
     window.localStorage.setItem(this.state.key, `${size}`);
   };
 
+  getSize = () => {
+    return this.state.size;
+  };
+
   render() {
     const {firstMinSize, first, second} = this.props;
     const {size: _size, resizing} = this.state;
@@ -137,41 +141,6 @@ interface PanelToggleProps {
   container: React.RefObject<SplitPanelContainer>;
 }
 
-export const FirstOrSecondPanelToggle = ({container, axis}: PanelToggleProps) => {
-  const onClick = (id: string) => {
-    let size = 50;
-    if (id === 'first-pane') {
-      size = 100;
-    } else if (id === 'second-pane') {
-      size = 0;
-    }
-    container.current?.onChangeSize(size);
-  };
-
-  return (
-    <ButtonGroup
-      buttons={[
-        {
-          id: 'first-pane',
-          icon: axis === 'vertical' ? 'panel_show_top' : 'panel_show_left',
-          tooltip: axis === 'vertical' ? 'Show only top pane' : 'Show only left pane',
-        },
-        {
-          id: 'split',
-          icon: 'panel_show_both',
-          tooltip: 'Show both panes',
-        },
-        {
-          id: 'second-pane',
-          icon: axis === 'vertical' ? 'panel_show_bottom' : 'panel_show_right',
-          tooltip: axis === 'vertical' ? 'Show only bottom pane' : 'Show only right pane',
-        },
-      ]}
-      onClick={onClick}
-    />
-  );
-};
-
 // Todo: This component attempts to sync itself with the container, but it can't
 // observe the container's width without a React context or adding a listener, etc.
 // If we keep making components that manipulate panel state we may want to move it

js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx

@@ -8,6 +8,7 @@ import {
   Tooltip,
   Suggest,
   ExternalAnchorButton,
+  Button,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
@@ -43,6 +44,9 @@ interface ILogsToolbarProps {
   computeLogUrl: string | null;
 
   children?: React.ReactNode;
+
+  isSectionExpanded: boolean;
+  toggleExpanded: () => void;
 }
 
 const logQueryToString = (logQuery: LogFilterValue[]) =>
@@ -60,6 +64,8 @@ export const LogsToolbar: React.FC<ILogsToolbarProps> = (props) => {
     computeLogFileKey,
     onSetComputeLogKey,
     computeLogUrl,
+    isSectionExpanded,
+    toggleExpanded,
     children,
   } = props;
 
@@ -95,6 +101,12 @@ export const LogsToolbar: React.FC<ILogsToolbarProps> = (props) => {
         />
       )}
       {children}
+      <Tooltip content={isSectionExpanded ? 'Collapse' : 'Expand'}>
+        <Button
+          icon={<Icon name={isSectionExpanded ? 'collapse_arrows' : 'expand_arrows'} />}
+          onClick={toggleExpanded}
+        />
+      </Tooltip>
     </OptionsContainer>
   );
 };

js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx

@@ -1,9 +1,11 @@
 import {
   Box,
   NonIdealState,
-  FirstOrSecondPanelToggle,
   SplitPanelContainer,
   ErrorBoundary,
+  Button,
+  Icon,
+  Tooltip,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
@@ -166,7 +168,6 @@ const RunWithData: React.FC<RunWithDataProps> = ({
   onSetSelectionQuery,
 }) => {
   const onLaunch = useJobReExecution(run);
-  const splitPanelContainer = React.createRef<SplitPanelContainer>();
 
   const [queryLogType, setQueryLogType] = useQueryPersistedState<string>({
     queryKey: 'logType',
@@ -242,6 +243,38 @@ const RunWithData: React.FC<RunWithDataProps> = ({
     onSetSelectionQuery(newSelected.join(', ') || '*');
   };
 
+  const [splitPanelContainer, setSplitPanelContainer] = React.useState<null | SplitPanelContainer>(
+    null,
+  );
+  React.useEffect(() => {
+    const initialSize = splitPanelContainer?.getSize();
+    switch (initialSize) {
+      case 100:
+        setExpandedPanel('top');
+        return;
+      case 0:
+        setExpandedPanel('bottom');
+        return;
+    }
+  }, [splitPanelContainer]);
+
+  const [expandedPanel, setExpandedPanel] = React.useState<null | 'top' | 'bottom'>(null);
+  const isTopExpanded = expandedPanel === 'top';
+  const isBottomExpanded = expandedPanel === 'bottom';
+
+  const expandBottomPanel = () => {
+    splitPanelContainer?.onChangeSize(0);
+    setExpandedPanel('bottom');
+  };
+  const expandTopPanel = () => {
+    splitPanelContainer?.onChangeSize(100);
+    setExpandedPanel('top');
+  };
+  const resetPanels = () => {
+    splitPanelContainer?.onChangeSize(50);
+    setExpandedPanel(null);
+  };
+
   const gantt = (metadata: IRunMetadataDict) => {
     if (!run) {
       return <GanttChartLoadingState runId={runId} />;
@@ -260,7 +293,12 @@ const RunWithData: React.FC<RunWithDataProps> = ({
             }}
             toolbarActions={
               <Box flex={{direction: 'row', alignItems: 'center', gap: 12}}>
-                <FirstOrSecondPanelToggle axis="vertical" container={splitPanelContainer} />
+                <Tooltip content={isTopExpanded ? 'Collapse' : 'Expand'}>
+                  <Button
+                    icon={<Icon name={isTopExpanded ? 'collapse_arrows' : 'expand_arrows'} />}
+                    onClick={isTopExpanded ? resetPanels : expandTopPanel}
+                  />
+                </Tooltip>
                 <RunActionButtons
                   run={run}
                   onLaunch={onLaunch}
@@ -288,7 +326,9 @@ const RunWithData: React.FC<RunWithDataProps> = ({
   return (
     <>
       <SplitPanelContainer
-        ref={splitPanelContainer}
+        ref={(container) => {
+          setSplitPanelContainer(container);
+        }}
         axis="vertical"
         identifier="run-gantt"
         firstInitialPercent={35}
@@ -308,6 +348,8 @@ const RunWithData: React.FC<RunWithDataProps> = ({
                 onSetComputeLogKey={setComputeLogFileKey}
                 computeLogUrl={computeLogUrl}
                 counts={logs.counts}
+                isSectionExpanded={isBottomExpanded}
+                toggleExpanded={isBottomExpanded ? resetPanels : expandBottomPanel}
               />
               {logType !== LogType.structured ? (
                 !computeLogFileKey ? (