Create a new CollapseButton that uses a single section.

frontend/src/components/CollapseButtonSingle.test.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2022 The Kubeflow Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import CollapseButton from './CollapseButtonSingle';
+
+describe('CollapseButtonSingle', () => {
+  const collapseSectionUpdateSpy = jest.fn();
+
+  it('Collapes an expanded section when clicked', () => {
+    render(
+      <CollapseButton
+        collapseSection={false}
+        collapseSectionUpdate={collapseSectionUpdateSpy}
+        sectionName='testSection'
+      />,
+    );
+
+    fireEvent.click(screen.getByText('testSection'));
+    expect(collapseSectionUpdateSpy).toHaveBeenCalledWith(true);
+  });
+
+  it('Expands a collapsed section when clicked', () => {
+    render(
+      <CollapseButton
+        collapseSection={true}
+        collapseSectionUpdate={collapseSectionUpdateSpy}
+        sectionName='testSection'
+      />,
+    );
+
+    fireEvent.click(screen.getByText('testSection'));
+    expect(collapseSectionUpdateSpy).toHaveBeenCalledWith(false);
+  });
+});

frontend/src/components/CollapseButtonSingle.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2022 The Kubeflow Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+import ExpandedIcon from '@material-ui/icons/ArrowDropUp';
+import { stylesheet, classes } from 'typestyle';
+import { color, fontsize } from '../Css';
+
+const css = stylesheet({
+  collapseBtn: {
+    color: color.strong,
+    fontSize: fontsize.title,
+    fontWeight: 'bold',
+    padding: 5,
+  },
+  collapsed: {
+    transform: 'rotate(180deg)',
+  },
+  icon: {
+    marginRight: 5,
+    transition: 'transform 0.3s',
+  },
+});
+
+interface CollapseButtonProps {
+  collapseSection: boolean;
+  collapseSectionUpdate: (collapseSection: boolean) => void;
+  sectionName: string;
+}
+
+function CollapseButton(props: CollapseButtonProps) {
+  const { collapseSection, collapseSectionUpdate, sectionName } = props;
+
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          collapseSectionUpdate(!collapseSection);
+        }}
+        title='Expand/Collapse this section'
+        className={css.collapseBtn}
+      >
+        <ExpandedIcon className={classes(css.icon, collapseSection ? css.collapsed : '')} />
+        {sectionName}
+      </Button>
+    </div>
+  );
+}
+
+export default CollapseButton;

frontend/src/pages/CompareV2.tsx

@@ -19,7 +19,7 @@ import { useQuery } from 'react-query';
 import { ApiRunDetail } from 'src/apis/run';
 import Hr from 'src/atoms/Hr';
 import Separator from 'src/atoms/Separator';
-import CollapseButton from 'src/components/CollapseButton';
+import CollapseButton from 'src/components/CollapseButtonSingle';
 import { QUERY_PARAMS, RoutePage } from 'src/components/Router';
 import { commonCss, padding } from 'src/Css';
 import { Apis } from 'src/lib/Apis';
@@ -42,8 +42,10 @@ function CompareV2(props: PageProps) {
   const { updateBanner, updateToolbar } = props;
 
   const runlistRef = useRef<RunList>(null);
-  const [collapseSections, setCollapseSections] = useState<{ [key: string]: boolean }>({});
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [isOverviewCollapsed, setIsOverviewCollapsed] = useState(false);
+  const [isParamsCollapsed, setIsParamsCollapsed] = useState(false);
+  const [isMetricsCollapsed, setIsMetricsCollapsed] = useState(false);
 
   const queryParamRunIds = new URLParser(props).get(QUERY_PARAMS.runlist);
   const runIds = (queryParamRunIds && queryParamRunIds.split(',')) || [];
@@ -77,14 +79,16 @@ function CompareV2(props: PageProps) {
     const buttons = new Buttons(props, refresh);
     updateToolbar({
       actions: buttons
-        .expandSections(() => setCollapseSections({}))
-        .collapseSections(() =>
-          setCollapseSections({
-            [OVERVIEW_SECTION_NAME]: true,
-            [PARAMS_SECTION_NAME]: true,
-            [METRICS_SECTION_NAME]: true,
-          }),
-        )
+        .expandSections(() => {
+          setIsOverviewCollapsed(false);
+          setIsParamsCollapsed(false);
+          setIsMetricsCollapsed(false);
+        })
+        .collapseSections(() => {
+          setIsOverviewCollapsed(true);
+          setIsParamsCollapsed(true);
+          setIsMetricsCollapsed(true);
+        })
         .refresh(refresh)
         .getToolbarActionMap(),
       breadcrumbs: [{ displayName: 'Experiments', href: RoutePage.EXPERIMENTS }],
@@ -98,10 +102,6 @@ function CompareV2(props: PageProps) {
     }
   }, [data]);
 
-  const collapseSectionsUpdate = (collapseSections: { [key: string]: boolean }): void => {
-    setCollapseSections({ ...collapseSections });
-  };
-
   const showPageError = async (message: string, error: Error | undefined) => {
     const errorMessage = await errorToMessage(error);
     updateBanner({
@@ -123,10 +123,10 @@ function CompareV2(props: PageProps) {
       {/* Overview section */}
       <CollapseButton
         sectionName={OVERVIEW_SECTION_NAME}
-        collapseSections={collapseSections}
-        collapseSectionsUpdate={collapseSectionsUpdate}
+        collapseSection={isOverviewCollapsed}
+        collapseSectionUpdate={setIsOverviewCollapsed}
       />
-      {!collapseSections[OVERVIEW_SECTION_NAME] && (
+      {!isOverviewCollapsed && (
         <div className={commonCss.noShrink}>
           <RunList
             onError={showPageError}
@@ -145,10 +145,10 @@ function CompareV2(props: PageProps) {
       {/* Parameters section */}
       <CollapseButton
         sectionName={PARAMS_SECTION_NAME}
-        collapseSections={collapseSections}
-        collapseSectionsUpdate={collapseSectionsUpdate}
+        collapseSection={isParamsCollapsed}
+        collapseSectionUpdate={setIsParamsCollapsed}
       />
-      {!collapseSections[PARAMS_SECTION_NAME] && (
+      {!isParamsCollapsed && (
         <div className={classes(commonCss.noShrink, css.outputsRow)}>
           <Separator orientation='vertical' />
           <p>Parameter Section V2</p>
@@ -159,10 +159,10 @@ function CompareV2(props: PageProps) {
       {/* Metrics section */}
       <CollapseButton
         sectionName={METRICS_SECTION_NAME}
-        collapseSections={collapseSections}
-        collapseSectionsUpdate={collapseSectionsUpdate}
+        collapseSection={isMetricsCollapsed}
+        collapseSectionUpdate={setIsMetricsCollapsed}
       />
-      {!collapseSections[METRICS_SECTION_NAME] && (
+      {!isMetricsCollapsed && (
         <div className={classes(commonCss.noShrink, css.outputsRow)}>
           <Separator orientation='vertical' />
           <p>Metrics Section V2</p>