chore: 1.8.0 cherrypick 2023 06 01 (#1429)

* fix: LSDV-5213: Fix Ranker format for rank mode (#1423)

* fix: LSDV-5213: Fix Ranker format for rank mode

Rank mode (simple List+Ranker without Buckets) should produce
results with the same structure: dict under "ranker" key in "value",
keys of the dict are Buckets' names. For rank mode it's Ranker's name.

* Add unit test for Ranker in all modes

* Always add all columns to result, even empty

* Add more checks to Ranker unit test

Now check results as well

* Also store empty columns if no actions made

* Use ORIGINAL_ITEMS_KEY instead of unclear "_"

* Add List to result by default in pick mode as well

* fix: LSDV-5214: Multi-word labels containing spaces in regions list are broken down into multiple rows on every space character (#1424)

* fix: LSDV-5214: Multi-word labels containing spaces in regions list are broken down into multiple rows on every space character

* removing this icon alignment as it puts the region item out of alignment with the remaining contents

* fix: LSDV-5158: Hide prediction delete button as it doesn't actually allow prediction deletions at this time (#1427)

* feat: LSDV-5121: User Setting Improvements (#1420)

* feat: LSDV-5121: User Setting Improvements

* update to include changed copy and tags for editorsettings

* group the label related options

* Update index.tsx

---------

Co-authored-by: hlomzik <[email protected]>

Author: bmartel

src/assets/icons/close.svg

@@ -25,6 +25,7 @@ export { ReactComponent as LsExpandAlt } from './expand-alt.svg';
 export { ReactComponent as LsCollapse } from './collapse.svg';
 export { ReactComponent as LsCollapseSmall } from './collapse-small.svg';
 export { ReactComponent as LsDate } from './date.svg';
+export { ReactComponent as LsClose } from './close.svg';
 export { ReactComponent as IconPlusCircle } from './plus-circle.svg';
 export { ReactComponent as IconSlow } from './slow.svg';
 export { ReactComponent as IconFast } from './fast.svg';

src/assets/icons/index.tsx

@@ -7,7 +7,7 @@
   border-radius 12px
   position relative
   cursor pointer
-  color $accent_color
+  color var(--toggle-color, $accent_color)
   transition box-shadow 80ms ease
   background linear-gradient(0deg, rgba(#000, 0.05), rgba(#000, 0.05)), #FFFFFF
   box-shadow inset 0px 1px 0px rgba(#000, 0.05), inset 0px 0px 0px 1px rgba(#000, 0.05)

src/common/Toggle/Toggle.styl

@@ -133,7 +133,7 @@ export const AnnotationButton = observer(({ entity, capabilities, annotationStor
             Duplicate Annotation
           </Elem>
         )}
-        {capabilities.enableAnnotationDelete && (
+        {capabilities.enableAnnotationDelete && !isPrediction && (
           <>
             <Elem name="seperator"></Elem>
             <Elem name="option" mod={{ delete: true }} onClick={deleteAnnotation}>

src/components/AnnotationsCarousel/AnnotationButton.tsx

@@ -49,8 +49,6 @@ const Ranker = ({ inputData, handleChange, readonly }: BoardProps) => {
         [source.droppableId]: newCol,
       };
 
-      // delete newItemIds['_'];
-
       const newData = {
         ...data,
         itemIds: newItemIds,
@@ -77,8 +75,6 @@ const Ranker = ({ inputData, handleChange, readonly }: BoardProps) => {
       [destination.droppableId]: endItemIds,
     };
 
-    // delete newItemIds['_'];
-
     const newData = {
       ...data,
       itemIds: newItemIds,

src/components/Ranker/Ranker.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Checkbox, Modal, Table, Tabs } from 'antd';
 import { observer } from 'mobx-react';
 
@@ -10,7 +10,8 @@ import { triggerResizeEvent } from '../../utils/utilities';
 
 import EditorSettings from '../../core/settings/editorsettings';
 import * as TagSettings from './TagSettings';
-import { useMemo } from 'react';
+import { LsClose } from '../../assets/icons';
+import Toggle from '../../common/Toggle/Toggle';
 import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
 
 const HotkeysDescription = () => {
@@ -55,21 +56,63 @@ const HotkeysDescription = () => {
 };
 
 
+const newUI = isFF(FF_DEV_3873) ? { newUI: true } : {};
+
+const editorSettingsKeys = Object.keys(EditorSettings);
+
+if (isFF(FF_DEV_3873)) {
+  const enableTooltipsIndex = editorSettingsKeys.findIndex(key => key === 'enableTooltips');
+  const enableLabelTooltipsIndex = editorSettingsKeys.findIndex(key => key === 'enableLabelTooltips');
+
+  // swap these in the array
+  const tmp = editorSettingsKeys[enableTooltipsIndex];
+
+  editorSettingsKeys[enableTooltipsIndex] = editorSettingsKeys[enableLabelTooltipsIndex];
+  editorSettingsKeys[enableLabelTooltipsIndex] = tmp;
+}
+
+const SettingsTag = ({ children }) => {
+  return (
+    <Block name="settings-tag">{children}</Block>
+  );
+};
 
 const GeneralSettings = observer(({ store }) => {
   return (
-    <Block name="settings">
-      {Object.keys(EditorSettings).map((obj, index)=> {
+    <Block name="settings" mod={newUI}>
+      {editorSettingsKeys.map((obj, index) => {
         return (
           <Elem name="field" key={index}>
-            <Checkbox
-              key={index}
-              checked={store.settings[obj]}
-              onChange={store.settings[EditorSettings[obj].onChangeEvent]}
-            >
-              {EditorSettings[obj].description}
-            </Checkbox>
-            <br />
+            {isFF(FF_DEV_3873) ? (
+              <>
+                <Block name="settings__label">
+                  <Elem name="title">
+                    {EditorSettings[obj].newUI.title}
+                    {EditorSettings[obj].newUI.tags?.split(',').map((tag) => (<SettingsTag key={tag}>{tag}</SettingsTag>))}
+                  </Elem>
+                  <Block name="description">
+                    {EditorSettings[obj].newUI.description}
+                  </Block>
+                </Block>
+                <Toggle
+                  key={index}
+                  checked={store.settings[obj]}
+                  onChange={store.settings[EditorSettings[obj].onChangeEvent]}
+                  description={EditorSettings[obj].description}
+                />
+              </>
+            ) : (
+              <>
+                <Checkbox
+                  key={index}
+                  checked={store.settings[obj]}
+                  onChange={store.settings[EditorSettings[obj].onChangeEvent]}
+                >
+                  {EditorSettings[obj].description}
+                </Checkbox>
+                <br />
+              </>
+            )}
           </Elem>
         );
       })}
@@ -79,7 +122,7 @@ const GeneralSettings = observer(({ store }) => {
 
 const LayoutSettings = observer(({ store }) => {
   return (
-    <Block name="settings">
+    <Block name="settings" mod={newUI}>
       <Elem name="field">
         <Checkbox
           checked={store.settings.bottomSidePanel}
@@ -88,13 +131,13 @@ const LayoutSettings = observer(({ store }) => {
             setTimeout(triggerResizeEvent);
           }}
         >
-            Move sidepanel to the bottom
+          Move sidepanel to the bottom
         </Checkbox>
       </Elem>
 
       <Elem name="field">
         <Checkbox checked={store.settings.displayLabelsByDefault} onChange={store.settings.toggleSidepanelModel}>
-            Display Labels by default in Results panel
+          Display Labels by default in Results panel
         </Checkbox>
       </Elem>
 
@@ -106,7 +149,7 @@ const LayoutSettings = observer(({ store }) => {
             store.settings.toggleAnnotationsPanel();
           }}
         >
-            Show Annotations panel
+          Show Annotations panel
         </Checkbox>
       </Elem>
 
@@ -118,7 +161,7 @@ const LayoutSettings = observer(({ store }) => {
             store.settings.togglePredictionsPanel();
           }}
         >
-            Show Predictions panel
+          Show Predictions panel
         </Checkbox>
       </Elem>
 
@@ -149,6 +192,16 @@ if (!isFF(FF_DEV_3873)) {
 
 const DEFAULT_ACTIVE = Object.keys(Settings)[0];
 
+const DEFAULT_MODAL_SETTINGS = isFF(FF_DEV_3873) ? {
+  name: 'settings-modal',
+  title: 'Labeling Interface Settings',
+  closeIcon: <LsClose />,
+} : {
+  name: 'settings-modal-old',
+  title: 'Settings',
+  bodyStyle: { paddingTop: '0' },
+};
+
 export default observer(({ store }) => {
   const availableSettings = useMemo(() => {
     const availableTags = Object.values(store.annotationStore.names.toJSON());
@@ -165,12 +218,12 @@ export default observer(({ store }) => {
   }, []);
 
   return (
-    <Modal
+    <Block
+      tag={Modal}
       visible={store.showingSettings}
-      title="Settings"
-      bodyStyle={{ paddingTop: '0' }}
-      footer=""
       onCancel={store.toggleSettings}
+      footer=""
+      {...DEFAULT_MODAL_SETTINGS}
     >
       <Tabs defaultActiveKey={DEFAULT_ACTIVE}>
         {Object.entries(Settings).map(([key, { name, component }]) => (
@@ -180,10 +233,10 @@ export default observer(({ store }) => {
         ))}
         {availableSettings.map((Page) => (
           <Tabs.TabPane tab={Page.title} key={Page.tagName}>
-            <Page store={store}/>
+            <Page store={store} />
           </Tabs.TabPane>
         ))}
       </Tabs>
-    </Modal>
+    </Block>
   );
 });

src/components/Settings/Settings.js

@@ -1,7 +1,37 @@
+
+$settings__title
+  color #1F1F1F
+  font-family Roboto
+  font-size 16px
+  font-weight 500
+  line-height 24px
+  letter-spacing 0.15px
+  text-align left
+
 .settings
   &__field + &__field
     margin-top 10px
 
+.settings_newUI
+  .settings__field
+    display flex
+    align-items flex-start
+  .settings__field + .settings__field
+    margin-top 16px
+  .settings__label
+    flex 1
+    &__title
+      @extends $settings__title
+      align-items center
+      display flex
+      gap 8px
+    &__description
+      font-size 14px
+      font-weight 400
+      line-height 20px
+      letter-spacing 0.25px
+      text-align left
+
 .keys
   &__key
     padding 0 4px
@@ -27,3 +57,63 @@
   &__key-group + &__key-group
     margin-top 5px
     border-top 2px solid rgba(#000, 0.05)
+
+.settings-modal
+  --modal-button-text-color-active #40A9FF
+  --toggle-color #1890FF
+  --modal-border-radius 8px
+  --modal-padding 24px
+
+  width 100% !important
+  max-width 568px !important
+
+  :global(.ant-tabs-tab .ant-tabs-tab-btn)
+    @extends $settings__title
+    text-shadow none
+  :global(.ant-modal-close)
+    top: 28px
+    right: var(--modal-padding)
+  :global(.ant-modal-close-icon)
+    display none
+  :global(.ant-modal-close-x)
+    height 24px !important
+    width 24px !important
+    line-height 24px !important
+    color var(--modal-button-text-color-active)
+  :global(.ant-tabs-tab)
+    padding calc(var(--modal-padding) / 4) var(--modal-padding) !important
+  :global(.ant-tabs-tab + .ant-tabs-tab)
+    margin-left 0 !important
+  :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn)
+    color var(--modal-button-text-color-active) !important
+  :global(.ant-modal-content)
+    border-radius var(--modal-border-radius) !important
+  :global(.ant-modal-body)
+    padding 0 var(--modal-padding) var(--modal-padding) !important
+  :global(.ant-modal-header)
+    border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0 !important;
+    padding var(--modal-padding) !important
+    border none !important
+  :global(.ant-modal-title)
+    color #1F1F1F
+    font-family Roboto
+    font-size 24px
+    font-weight 400
+    line-height 32px
+    letter-spacing 0
+    text-align left
+
+  .settings-tag
+    display inline-flex
+    align-items center
+    justify-content center
+    padding-inline 4px
+    color #030852
+    background-color #D6E4FF
+    border-radius 2px
+    height 20px
+    font-size 11px
+    font-weight 500
+    line-height 16px
+    letter-spacing 0.5px
+    text-align center

src/components/Settings/Settings.styl

@@ -55,7 +55,6 @@
     width min-content
     align-items center
     justify-content center
-    align-self: flex-start;
     color var(--icon-color)
 
     svg
@@ -134,7 +133,6 @@
 
     &_newUI
       display flex
-      width 100%
       position initial
       justify-content space-between