[feat] Adjust the controls section layout of the Figures explorer (#2150

)

CHANGELOG.md

@@ -7,7 +7,7 @@
 - Add the ability to attach/remove tags on the Run Page (roubkar)
 - Support dictionary as an argument of `Run.track` (alberttorosyan)
 - Display the tags of the run in the tables of the explorers (VkoHov)
-- Adjust the grouping section layout of the Figures explorer (VkoHov)
+- Revamp Figures explorer controls and grouping sections for better onboarding and usability (VkoHov, KaroMourad)
 
 ### Fixes:
 

aim/web/ui/src/components/GroupingItem/GroupingItem.scss

@@ -25,7 +25,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.18s ease-out;
+    transition: all $popover-opening-duration ease-out;
 
     &:last-child {
       margin-right: 0;

aim/web/ui/src/modules/BaseExplorer/components/Controls/BoxProperties/BoxProperties.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Tooltip } from '@material-ui/core';
 import { IBaseComponentProps } from 'modules/BaseExplorer/types';
 
 import ControlPopover from 'components/ControlPopover/ControlPopover';
-import { Icon } from 'components/kit';
+import { Button, Icon, Text } from 'components/kit';
 
 import BoxPropertiesPopover from './Popover';
 
@@ -25,24 +24,30 @@ function BoxProperties(props: IBoxPropertiesProps) {
   const boxProperties: IBoxConfigState = useStore(boxSelector);
   return (
     <ControlPopover
-      title='Box properties'
+      title='Configure box size'
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       anchor={({ onAnchorClick, opened }) => (
-        <Tooltip title='Box properties'>
-          <div
-            onClick={onAnchorClick}
-            className={classNames('Controls__anchor', {
+        <Button
+          size='xSmall'
+          onClick={onAnchorClick}
+          className={classNames('Control__anchor', {
+            active: opened || !boxProperties.isInitial,
+            outlined: !opened && !boxProperties.isInitial,
+          })}
+        >
+          <Icon
+            name='box-settings'
+            className={classNames('Control__anchor__icon', {
               active: opened || !boxProperties.isInitial,
-              outlined: !opened && !boxProperties.isInitial,
             })}
-          >
-            <Icon
-              className={classNames('Controls__icon', {
-                active: opened || !boxProperties.isInitial,
-              })}
-              name='box-settings'
-            />
-          </div>
-        </Tooltip>
+          />
+          <Text className='Control__anchor__label'>Box size</Text>
+          <Icon
+            name='arrow-down-contained'
+            className={classNames('Control__anchor__arrow', { opened })}
+            fontSize={6}
+          />
+        </Button>
       )}
       component={
         <BoxPropertiesPopover

aim/web/ui/src/modules/BaseExplorer/components/Controls/CaptionProperties/CaptionProperties.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Tooltip } from '@material-ui/core';
 import { IBaseComponentProps } from 'modules/BaseExplorer/types';
 
 import ControlPopover from 'components/ControlPopover/ControlPopover';
-import { Icon } from 'components/kit';
+import { Button, Icon, Text } from 'components/kit';
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
 
 import CaptionPropertiesPopover from './CaptionPropertiesPopover';
@@ -27,23 +26,29 @@ function CaptionProperties(props: ICaptionPropertiesProps) {
     <ErrorBoundary>
       <ControlPopover
         title='Configure box caption'
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         anchor={({ onAnchorClick, opened }) => (
-          <Tooltip title='Configure box caption'>
-            <div
-              onClick={onAnchorClick}
-              className={classNames('Controls__anchor', {
+          <Button
+            size='xSmall'
+            onClick={onAnchorClick}
+            className={classNames('Control__anchor', {
+              active: opened || !captionProperties.isInitial,
+              outlined: !opened && !captionProperties.isInitial,
+            })}
+          >
+            <Icon
+              name='info-circle-outline'
+              className={classNames('Control__anchor__icon', {
                 active: opened || !captionProperties.isInitial,
-                outlined: !captionProperties.isInitial,
               })}
-            >
-              <Icon
-                className={classNames('Controls__icon', {
-                  active: opened || !captionProperties.isInitial,
-                })}
-                name='info-circle-outline'
-              />
-            </div>
-          </Tooltip>
+            />
+            <Text className='Control__anchor__label'>Box caption</Text>
+            <Icon
+              name='arrow-down-contained'
+              className={classNames('Control__anchor__arrow', { opened })}
+              fontSize={6}
+            />
+          </Button>
         )}
         component={
           <CaptionPropertiesPopover

aim/web/ui/src/modules/BaseExplorer/components/Controls/Controls.scss

@@ -1,86 +1,71 @@
 @use 'src/styles/abstracts' as *;
 
-.Controls {
-  border-left: $border-separator;
-  width: 3.75rem;
-  max-height: 100%;
-  overflow-y: auto;
+.BaseControls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: $space-sm;
+  overflow: hidden;
   &__container {
-    padding: 0.75rem 0;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: auto;
-    & > .Control {
-      margin-bottom: 0.375rem;
+    overflow-x: auto;
+    .Control {
+      margin-right: $space-xxs;
       &:last-child {
-        margin-bottom: 0;
+        margin-right: 0;
+      }
+      &__anchor {
+        white-space: nowrap;
+        padding: $space-xxxxs $space-xxs;
+        height: 1.5rem;
+        display: flex;
+        cursor: pointer;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        transition: background-color $popover-opening-duration ease-out;
+        border: 0.0625rem solid transparent;
+        border-radius: 3px;
+        &.active {
+          background-color: $primary-color-10;
+          &.outlined {
+            border: $border-main-active;
+          }
+        }
+        &.disabled {
+          cursor: initial;
+          i {
+            color: $pico-50;
+          }
+          &:hover {
+            background-color: transparent;
+          }
+        }
+        &:hover {
+          background-color: $pico-5;
+        }
+        &__arrow {
+          margin-left: $space-xxs;
+          transition: transform $popover-opening-duration ease-out;
+          color: $pico-80;
+          &.opened {
+            transform: rotateX(180deg);
+            color: $primary-color;
+          }
+        }
+        &__label {
+          user-select: none;
+          white-space: nowrap;
+        }
+        &__icon {
+          color: $pico-70;
+          font-size: 1rem;
+          margin-right: $space-xxxs;
+          &.active {
+            color: $primary-color;
+          }
+        }
       }
     }
   }
 }
-
-.Controls__icon {
-  color: $pico-70;
-  font-size: 1.125rem;
-  &.active {
-    color: $primary-color;
-  }
-}
-
-.Controls__anchor {
-  height: 2.25rem;
-  width: 2.25rem;
-  display: flex;
-  cursor: pointer;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.18s ease-out;
-  border: 0.0625rem solid transparent;
-  border-radius: $border-radius-main;
-  &.active {
-    background-color: $primary-color-10;
-    &.outlined {
-      border: $border-main-active;
-    }
-  }
-  &.disabled {
-    cursor: initial;
-    i {
-      color: $pico-50;
-    }
-    &:hover {
-      background-color: transparent;
-    }
-  }
-  &:hover {
-    background-color: $pico-5;
-    .icon-arrow-left {
-      opacity: 1;
-    }
-  }
-}
-
-.Controls__anchor__arrow {
-  width: 0.6875rem;
-  height: 100%;
-  position: absolute;
-  left: -0.8125rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &.opened {
-    .icon-arrow-left {
-      opacity: 1;
-      transform: rotate(180deg);
-      color: $primary-color;
-    }
-  }
-  .icon-arrow-left {
-    opacity: 0;
-    font-size: 0.45rem;
-    transition: all 0.18s ease-out;
-    color: $pico-30;
-  }
-}

aim/web/ui/src/modules/BaseExplorer/components/Controls/Controls.tsx

@@ -26,8 +26,8 @@ function Controls(props: IControlsProps) {
 
   return (
     <ErrorBoundary>
-      <div className='Controls'>
-        <div className='Controls__container ScrollBar__hidden'>
+      <div className='BaseControls'>
+        <div className='BaseControls__container ScrollBar__hidden'>
           {Components}
         </div>
       </div>

aim/web/ui/src/modules/BaseExplorer/components/Grouping/Grouping/Grouping.scss

@@ -3,10 +3,6 @@
 .BaseGrouping {
   display: flex;
   align-items: center;
-  border-left: $border-main;
-  height: 2.5rem;
-  padding: $space-xxxs $space-lg;
-  border-bottom: $border-main;
   &__title {
     margin-right: $space-xxxs;
   }

aim/web/ui/src/modules/BaseExplorer/components/Grouping/GroupingItem/GroupingItem.scss

@@ -1,17 +1,15 @@
 @use 'src/styles/abstracts' as *;
 
 .BaseGroupingItem {
-  margin-right: $space-xxxxs;
+  margin-right: $space-xxxs;
   border: $border-transparent;
 
   &__label {
-    margin-right: $space-xxxxs;
     margin-top: toRem(1px);
   }
   &:last-child {
     margin-right: 0;
   }
-
   &.active {
     background-color: $primary-color-10;
   }
@@ -22,7 +20,13 @@
   &:hover {
     background-color: $pico-5;
   }
-  .Icon__container {
+  &__arrowIcon {
+    margin-left: $space-xxs;
+    transition: transform $popover-opening-duration ease-out;
     color: $pico-80;
+    &.opened {
+      transform: rotateX(180deg);
+      color: $primary-color;
+    }
   }
 }

aim/web/ui/src/modules/BaseExplorer/components/Grouping/GroupingItem/GroupingItem.tsx

@@ -39,7 +39,7 @@ function GroupingItem({
         anchor={({ onAnchorClick, opened }) => (
           <Tooltip title={`Group by ${groupName}`}>
             <Button
-              size='small'
+              size='xSmall'
               disabled={isDisabled}
               onClick={onAnchorClick}
               className={classNames('BaseGroupingItem', {
@@ -49,11 +49,14 @@ function GroupingItem({
                   !_.isEmpty(currentValues[groupName].fields),
               })}
             >
-              <Text size={12} weight={500} className='BaseGroupingItem__label'>
+              <Text size={12} weight={600} className='BaseGroupingItem__label'>
                 {groupName}
               </Text>
               <Icon
-                name={opened ? 'arrow-up-contained' : 'arrow-down-contained'}
+                name='arrow-down-contained'
+                className={classNames('BaseGroupingItem__arrowIcon', {
+                  opened,
+                })}
                 fontSize={6}
               />
             </Button>

aim/web/ui/src/modules/BaseExplorer/components/Visualizations/Visualizations.scss

@@ -3,7 +3,8 @@
 .Visualizations {
   display: flex;
   flex: 1;
-  max-height: calc(100% - 10.75rem);
+  flex-direction: column;
+  overflow: hidden;
   position: relative;
   .ProgressBar__container {
     padding-bottom: 6 * $space-unit;