HumanSignal · yyassi-heartex · Aug 15, 2024 · Aug 12, 2024 · Aug 14, 2024 · Aug 14, 2024
diff --git a/web/dist/libs/datamanager/main.js b/web/dist/libs/datamanager/main.js
diff --git a/web/dist/libs/datamanager/main.js.map b/web/dist/libs/datamanager/main.js.map
diff --git a/web/dist/libs/editor/main.css b/web/dist/libs/editor/main.css
diff --git a/web/dist/libs/editor/main.css.map b/web/dist/libs/editor/main.css.map
diff --git a/web/dist/libs/editor/main.js b/web/dist/libs/editor/main.js
diff --git a/web/dist/libs/editor/main.js.map b/web/dist/libs/editor/main.js.map
@@ -14,7 +14,7 @@ import { AnnotationMixin } from "../../mixins/AnnotationMixin";
 import { TagParentMixin } from "../../mixins/TagParentMixin";
 import { FF_DEV_3391, FF_PROD_309, isFF } from "../../utils/feature-flags";
 import { Block, Elem } from "../../utils/bem";
-import "./Choice/Choice.styl";
+import "./Choice/Choice.scss";
 import { LsChevron } from "../../assets/icons";
 import { HintTooltip } from "../../components/Taxonomy/Taxonomy";
 import { sanitizeHtml } from "../../utils/html";

@@ -0,0 +1,70 @@
+.choice_leaf.choice_layout,
+.choice {
+  line-height: 40px;
+
+  &_leaf.choice_layout {
+
+    &_inline,
+    &_horizontal {
+      display: inline-block;
+    }
+
+    &_vertical {
+      display: block;
+      position: relative;
+    }
+  }
+
+  &_notLeaf {
+    line-height: 40px;
+  }
+
+  &_leaf &_hidden,
+  &_notLeaf &_hidden {
+    display: none;
+  }
+
+  &__item {
+    display: flex;
+    flex-flow: row nowrap;
+
+    &_notLeaf {
+      border-radius: 4px;
+      background: var(--sand_200);
+      position: relative;
+    }
+  }
+
+  &__checkbox {
+    padding-left: 8px;
+    flex: 100 0 1%;
+  }
+
+  &__toggle {
+    color: var(--grape_500);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: column;
+    width: 24px;
+    margin: 0 8px;
+    flex-shrink: 0;
+    align-self: center;
+
+    &:hover {
+      color: var(--grape_500);
+    }
+
+    &_collapsed {
+      transform: scaleY(-1);
+    }
+  }
+
+  &__children {
+    padding-left: 8px;
+
+    &_collapsed {
+      display: none;
+    }
+  }
+}
@@ -15,7 +15,7 @@ import { guidGenerator } from "../../core/Helpers";
 import ControlBase from "./Base";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
 import { Block } from "../../utils/bem";
-import "./Choices/Choises.styl";
+import "./Choices/Choices.scss";
 
 import "./Choice";
 import DynamicChildrenMixin from "../../mixins/DynamicChildrenMixin";

@@ -0,0 +1,8 @@
+.choices {
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  &_hidden {
+    display: none;
+  }
+}
@@ -15,7 +15,7 @@ import SelectedModelMixin from "../../../mixins/SelectedModel";
 import { Block } from "../../../utils/bem";
 import ControlBase from "../Base";
 import "../Label";
-import "./Labels.styl";
+import "./Labels.scss";
 
 /**
  * The `Labels` tag provides a set of labels for labeling regions in tasks for machine learning and data science projects. Use the `Labels` tag to create a set of labels that can be assigned to identified region and specify the values of labels to assign to regions.

@@ -0,0 +1,17 @@
+.labels {
+  margin: 1em 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-flow: wrap;
+
+  &_hidden {
+    display: none;
+  }
+
+  &:not(.labels_inline) {
+    margin: 0;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
@@ -32,7 +32,7 @@ import {
 import ControlBase from "../Base";
 import ClassificationBase from "../ClassificationBase";
 
-import styles from "./Taxonomy.styl";
+import styles from "./Taxonomy.scss";
 import messages from "../../../utils/messages";
 import { errorBuilder } from "../../../core/DataValidator/ConfigValidator";
 

@@ -0,0 +1,30 @@
+.taxonomy {
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  &__loading {
+    border: 1px solid var(--sand_300);
+    border-radius: 6px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 42px;
+    margin-bottom: 14px;
+    width: 90px;
+    position: relative;
+
+    & > div {
+      height: 14px;
+    }
+
+    & > div > span {
+      display: block;
+    }
+  }
+
+  &__new &__loading {
+    margin-top: 0;
+    height: 31px;
+  }
+}
@@ -29,7 +29,7 @@ import ControlBase from "../Base";
 import ClassificationBase from "../ClassificationBase";
 import "./TextAreaRegionView";
 
-import "./TextArea.styl";
+import "./TextArea.scss";
 
 const { TextArea } = Input;
 

@@ -0,0 +1,111 @@
+.textarea-tag {
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &__form {
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &_hidden {
+      display: none;
+    }
+  }
+
+  &__item {
+    position: relative;
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    button {
+      width: auto !important;
+    }
+  }
+
+  &__input {
+    color: var(--sand_700);
+    background: transparent;
+    font-size: 16px;
+    line-height: 22px;
+    height: 22px;
+    padding: 0 24px 0 0;
+    margin-bottom: 0;
+
+    &.ant-input {
+      border: none;
+      box-shadow: none;
+      outline: none;
+    }
+  }
+
+  &__action {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & :global(.anticon) {
+      margin: 0 !important;
+    }
+  }
+
+  &_outliner {
+    --border-color: var(--sand_300);
+  }
+
+  &_outliner &__item,
+  &_outliner &__form {
+    margin: 0 0 0 -8px;
+  }
+
+  &_outliner &__item + &__item,
+  &_outliner &__item + &__form,
+  &_outliner &__form + &__item,
+  &_outliner &__form + &__form {
+    margin-top: 8px;
+  }
+
+  &_outliner &__input {
+    display: block;
+    background: none;
+    font-size: 14px;
+    line-height: normal;
+    padding: 8px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    background-color: var(--sand_100);
+
+    .ff_outliner_optim & {
+      padding: 8px 20px 8px 8px;
+    }
+
+    &::placeholder {
+      color: var(--sand_500);
+    }
+  }
+
+  &_outliner &__input:focus {
+    background-color: var(--sand_0);
+    box-sizing: border-box;
+    border-color: var(--sand_300);
+    box-shadow: 0 0 0 3px var(--sand_300);
+  }
+
+  &_outliner &__action {
+    :not(.ff_outliner_optim) & {
+      margin: 4px;
+      margin-top: 5px;
+    }
+  }
+}