@dataloop-ai/components 0.19.264 → 0.19.266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.264",
+  "version": "0.19.266",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -22,7 +22,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.87",
+    "@dataloop-ai/icons": "^3.0.91",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

package/src/assets/{constants.scss → constants.css}

@@ -1,5 +1,5 @@
 :root {
-    // Constants
+    /* Constants */
     --dl-color-alert-success: #38d079;
     --dl-color-alert-success-background: #e1fff0;
     --dl-color-alert-warn: #ffda3a;
@@ -10,13 +10,13 @@
     --dl-color-alert-info-background: #f3f9ff;
     --dl-color-alert-text: #171723;
 
-    // Z-Index
+    /* Z-Index */
     --dl-z-index-toast: 1052;
-    --dl-z-index-panel: 3000; // panel & panel contaiener content
-    --dl-z-index-panel-elements: 3010; // separator + glutter
+    --dl-z-index-panel: 3000; /* panel & panel contaiener content */
+    --dl-z-index-panel-elements: 3010; /* separator + glutter */
     --dl-z-index-panel-header-footer: 3020;
     --dl-z-index-panel-container-overlay: 3025;
-    --dl-z-index-panel-container-elements: 3030; // collapse icon + separator
+    --dl-z-index-panel-container-elements: 3030; /* collapse icon + separator */
 
     --dl-z-index-overlay: 5000;
     --dl-z-index-dialog: 5200;
@@ -24,7 +24,7 @@
     --dl-z-index-menu: 6000;
     --dl-z-index-tooltip: 9000;
 
-    // chart colors
+    /* chart colors */
     --dl-color-chart-1: #4db1d3;
     --dl-color-chart-2: #ff2f7a;
     --dl-color-chart-3: #d4e3ff;

package/src/assets/globals.scss

@@ -1,16 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-@import 'constants';
+@import "./theme.css";
 
 body {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-
     & > * {
         font-weight: 400;
         font-family: 'Roboto', sans-serif;
     }
-
-    background-color: var(--dl-color-bg);
 }
 
 // tranform
@@ -190,136 +184,6 @@ body {
     height: 100%;
 }
 
-:root {
-    // common
-    --dl-color-white: #fff;
-    --dl-color-black: #000;
-    --dl-color-bg: #fff;
-    --dl-color-background: var(--dl-color-bg);
-    --dl-color-transparent: transparent;
-
-    // fontSizes
-    --dl-font-size-h1: 30px;
-    --dl-font-size-h2: 20px;
-    --dl-font-size-h3: 16px;
-    --dl-font-size-h4: 14px;
-    --dl-font-size-h5: 12px;
-    --dl-font-size-h6: 10px;
-    --dl-font-size-body: 12px;
-    --dl-font-size-small: 10px;
-
-    // shadows
-    --dl-menu-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
-
-    // colors
-    --dl-color-tooltip-text: #fefefe;
-    --dl-color-tooltip-background: #171723d9;
-    --dl-color-text-darker-buttons: #171723;
-    --dl-color-secondary: #3452ff;
-    --dl-color-secondary-opaque: #3452ff10;
-    --dl-color-text-buttons: #ffffff;
-    --dl-color-darker: #171723;
-    --dl-color-medium: #767676;
-    --dl-color-lighter: #999999;
-    --dl-color-hover: #7b8cff;
-    --dl-color-disabled: #b3b3b3;
-    --dl-color-fill: #00000005;
-    --dl-color-fill-hover: #f8f8f8;
-    --dl-color-separator: #e4e4e4;
-    --dl-color-scrollbar: #e4e4e4;
-    --dl-color-body-background: #eef1ff;
-    --dl-color-panel-background: #ffffff;
-    --dl-color-side-panel: #18195c;
-    --dl-color-shadow: #ffffff;
-    --dl-color-icon-default: #171723;
-    --dl-color-fill-secondary: #fbf8f8;
-    --dl-color-fill-third: #fbfbfb;
-    --dl-color-link: #20abfa;
-    --dl-color-cell-background: #fffae2;
-    --dl-color-disabled-slider: #B3B3B3;
-    --q-color-positive: #38d079;
-    --q-color-warning: #e1b75b;
-
-    // alert colors
-    --dl-color-negative: var(--dl-color-alert-error);
-    --dl-color-negative-background: var(--dl-color-alert-error-background);
-    --dl-color-warning: var(--dl-color-alert-warn);
-    --dl-color-warning-background: var(--dl-color-alert-warn-background);
-    --dl-color-positive: var(--dl-color-alert-success);
-    --dl-color-positive-background: var(--dl-color-alert-success-background);
-    --dl-color-info: var(--dl-color-alert-info);
-    --dl-color-info-background: var(--dl-color-alert-info-background);
-
-    --dl-color-chart-brush: #eef1ff;
-
-    --dl-date-picker-shadow: 0px 3px 6px #101e7326;
-    --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
-    --dl-date-picker-selected-date: #8fa0ff;
-
-    // DlJsonEditor based on atom one themes
-    --dl-json-editor-key-color: #a626a4;
-    --dl-json-editor-background-color: #fafafa;
-    --dl-json-editor-panel-background: #fafafa;
-    --dl-json-editor-value-color-boolean: #0184bb;
-    --dl-json-editor-value-color-number: #c18401;
-    --dl-json-editor-value-color-string: #50a14f;
-}
-
-/* Define styles for the root window with dark - mode preference */
-[data-theme='dark-mode'] {
-    // shadows
-    --dl-menu-shadow: 0px 3px 6px rgba(41, 46, 53, 0.5);
-
-    // colors
-    --dl-color-bg: #30363d;
-    --dl-color-tooltip-text: #161616;
-    --dl-color-tooltip-background: #ffffffd9;
-    --dl-color-text-darker-buttons: #171723;
-    --dl-color-secondary: #7c8cff;
-    --dl-color-secondary-opaque: #7c8cff10;
-    --dl-color-text-buttons: #ffffff;
-    --dl-color-darker: #ffffffcc;
-    --dl-color-medium: #ffffff99;
-    --dl-color-lighter: #ffffff66;
-    --dl-color-hover: #aeb9ff;
-    --dl-color-disabled: #ffffff40;
-    --dl-color-fill: #ffffff05;
-    --dl-color-fill-secondary: #f8f8f81a;
-    --dl-color-fill-hover: #454a50;
-    --dl-color-separator: #ffffff26;
-    --dl-color-body-background: #24282d;
-    --dl-color-panel-background: #30363d;
-    --dl-color-side-panel: #2a343e;
-    --dl-color-shadow: #30363d;
-    --dl-color-icon-default: #ffffffbf;
-    --dl-color-fill-secondary: #ffffff1a;
-    --dl-color-fill-third: #9e9e9e1a;
-    --dl-color-link: #53b2e8;
-    --dl-color-cell-background: #fffae2;
-    --dl-color-disabled-slider: #64686d;
-    --q-color-positive: #a1e5b6;
-    --q-color-warning: #f8d29a;
-
-    // alert colors
-    --dl-color-negative-background: #734145;
-    --dl-color-warning-background: #7b7241;
-    --dl-color-positive-background: #3a644e;
-    --dl-color-info-background: #4b5a6b;
-    --dl-color-info: #92cdf2;
-
-    --dl-color-chart-brush: #475077;
-
-    --dl-date-picker-shadow: 0px 3px 6px #292e3580;
-    --dl-date-picker-selected-strip: rgb(124, 140, 255, 0.2);
-    --dl-date-picker-selected-date: #535e96;
-
-    --dl-json-editor-key-color: #c678dd;
-    --dl-json-editor-background-color: #282c34;
-    --dl-json-editor-panel-background: #282c34;
-    --dl-json-editor-value-color-boolean: #56b6c2;
-    --dl-json-editor-value-color-number: #d19a66;
-    --dl-json-editor-value-color-string: #98c379;
-}
 
 // scrollbar
 

package/src/assets/theme.css

@@ -0,0 +1,139 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import 'constants.css';
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    background-color: var(--dl-color-bg);
+}
+
+:root {
+    /* common */
+    --dl-color-white: #fff;
+    --dl-color-black: #000;
+    --dl-color-bg: #fff;
+    --dl-color-background: var(--dl-color-bg);
+    --dl-color-transparent: transparent;
+
+    /* fontSizes */
+    --dl-font-size-h1: 30px;
+    --dl-font-size-h2: 20px;
+    --dl-font-size-h3: 16px;
+    --dl-font-size-h4: 14px;
+    --dl-font-size-h5: 12px;
+    --dl-font-size-h6: 10px;
+    --dl-font-size-body: 12px;
+    --dl-font-size-small: 10px;
+
+    /* shadows */
+    --dl-menu-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
+
+    /* colors */
+    --dl-color-tooltip-text: #fefefe;
+    --dl-color-tooltip-background: #171723d9;
+    --dl-color-text-darker-buttons: #171723;
+    --dl-color-secondary: #3452ff;
+    --dl-color-secondary-opaque: #3452ff10;
+    --dl-color-text-buttons: #ffffff;
+    --dl-color-darker: #171723;
+    --dl-color-medium: #767676;
+    --dl-color-lighter: #999999;
+    --dl-color-hover: #7b8cff;
+    --dl-color-disabled: #b3b3b3;
+    --dl-color-fill: #00000005;
+    --dl-color-fill-hover: #f8f8f8;
+    --dl-color-separator: #e4e4e4;
+    --dl-color-scrollbar: #e4e4e4;
+    --dl-color-body-background: #eef1ff;
+    --dl-color-panel-background: #ffffff;
+    --dl-color-side-panel: #18195c;
+    --dl-color-shadow: #ffffff;
+    --dl-color-icon-default: #171723;
+    --dl-color-fill-secondary: #fbf8f8;
+    --dl-color-fill-third: #fbfbfb;
+    --dl-color-link: #20abfa;
+    --dl-color-cell-background: #fffae2;
+    --dl-color-disabled-slider: #B3B3B3;
+    --q-color-positive: #38d079;
+    --q-color-warning: #e1b75b;
+
+    /* alert colors */
+    --dl-color-negative: var(--dl-color-alert-error);
+    --dl-color-negative-background: var(--dl-color-alert-error-background);
+    --dl-color-warning: var(--dl-color-alert-warn);
+    --dl-color-warning-background: var(--dl-color-alert-warn-background);
+    --dl-color-positive: var(--dl-color-alert-success);
+    --dl-color-positive-background: var(--dl-color-alert-success-background);
+    --dl-color-info: var(--dl-color-alert-info);
+    --dl-color-info-background: var(--dl-color-alert-info-background);
+
+    --dl-color-chart-brush: #eef1ff;
+
+    --dl-date-picker-shadow: 0px 3px 6px #101e7326;
+    --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
+    --dl-date-picker-selected-date: #8fa0ff;
+
+    /* DlJsonEditor based on atom one themes */
+    --dl-json-editor-key-color: #a626a4;
+    --dl-json-editor-background-color: #fafafa;
+    --dl-json-editor-panel-background: #fafafa;
+    --dl-json-editor-value-color-boolean: #0184bb;
+    --dl-json-editor-value-color-number: #c18401;
+    --dl-json-editor-value-color-string: #50a14f;
+}
+
+/* Define styles for the root window with dark - mode preference */
+[data-theme='dark-mode'] {
+    /* shadows */
+    --dl-menu-shadow: 0px 3px 6px rgba(41, 46, 53, 0.5);
+
+    /* colors */
+    --dl-color-bg: #30363d;
+    --dl-color-tooltip-text: #161616;
+    --dl-color-tooltip-background: #ffffffd9;
+    --dl-color-text-darker-buttons: #171723;
+    --dl-color-secondary: #7c8cff;
+    --dl-color-secondary-opaque: #7c8cff10;
+    --dl-color-text-buttons: #ffffff;
+    --dl-color-darker: #ffffffcc;
+    --dl-color-medium: #ffffff99;
+    --dl-color-lighter: #ffffff66;
+    --dl-color-hover: #aeb9ff;
+    --dl-color-disabled: #ffffff40;
+    --dl-color-fill: #ffffff05;
+    --dl-color-fill-secondary: #f8f8f81a;
+    --dl-color-fill-hover: #454a50;
+    --dl-color-separator: #ffffff26;
+    --dl-color-body-background: #24282d;
+    --dl-color-panel-background: #30363d;
+    --dl-color-side-panel: #2a343e;
+    --dl-color-shadow: #30363d;
+    --dl-color-icon-default: #ffffffbf;
+    --dl-color-fill-secondary: #ffffff1a;
+    --dl-color-fill-third: #9e9e9e1a;
+    --dl-color-link: #53b2e8;
+    --dl-color-cell-background: #fffae2;
+    --dl-color-disabled-slider: #64686d;
+    --q-color-positive: #a1e5b6;
+    --q-color-warning: #f8d29a;
+
+    /* alert colors */
+    --dl-color-negative-background: #734145;
+    --dl-color-warning-background: #7b7241;
+    --dl-color-positive-background: #3a644e;
+    --dl-color-info-background: #4b5a6b;
+    --dl-color-info: #92cdf2;
+
+    --dl-color-chart-brush: #475077;
+
+    --dl-date-picker-shadow: 0px 3px 6px #292e3580;
+    --dl-date-picker-selected-strip: rgb(124, 140, 255, 0.2);
+    --dl-date-picker-selected-date: #535e96;
+
+    --dl-json-editor-key-color: #c678dd;
+    --dl-json-editor-background-color: #282c34;
+    --dl-json-editor-panel-background: #282c34;
+    --dl-json-editor-value-color-boolean: #56b6c2;
+    --dl-json-editor-value-color-number: #d19a66;
+    --dl-json-editor-value-color-string: #98c379;
+}

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -32,15 +32,15 @@
                         "
                     >
                         <img
-                            v-if="labelImages[0]"
+                            v-if="getLabelImage(label)"
                             class="legend-avatar"
-                            :src="labelImages[index]"
+                            :src="getLabelImage(label)"
                         />
                         <span v-else class="label label-y">
                             {{ label }}
                         </span>
                         <dl-tooltip :offset="[0, 0]">
-                            {{ labelStrings[index] }}
+                            {{ getLabelString(label) }}
                         </dl-tooltip>
                     </div>
                 </div>
@@ -115,7 +115,7 @@
                             :style="`
                                 justify-content: center;
                                 display: flex;${
-                                !labelImages[0]
+                                !getLabelImage(label)
                                     ? `transform: rotate(${
                                         rotateXLabels ? '70' : '0'
                                     }deg); line-height: ${
@@ -126,9 +126,9 @@
                         >
                             <span class="x-axis__element--text">
                                 <img
-                                    v-if="labelImages[0]"
+                                    v-if="getLabelImage(label)"
                                     class="legend-avatar"
-                                    :src="labelImages[index]"
+                                    :src="getLabelImage(label)"
                                 />
                                 <span v-else class="label label-x">
                                     {{ label }}
@@ -139,7 +139,7 @@
                             self="top middle"
                             :offset="debouncedCalculateXAxisElOffset(index)"
                         >
-                            {{ labelStrings[index] }}
+                            {{ getLabelString(label) }}
                         </dl-tooltip>
                     </div>
                 </div>
@@ -162,8 +162,8 @@
                 <div class="color-spectrum__gradient" />
                 <div class="color-spectrum__gradation">
                     <div
-                        v-for="value in gradationValues"
-                        :key="value"
+                        v-for="(value, index) in gradationValues"
+                        :key="index"
                         class="color-spectrum__gradation--element"
                     >
                         <span class="color-spectrum__gradation--element-line"
@@ -223,12 +223,12 @@ export default defineComponent({
         labels: {
             required: true,
             type: Array as PropType<string[] | DlConfusionMatrixLabel[]>,
-            default: (): string[] | DlConfusionMatrixLabel[] => []
+            default: () => [] as string[] | DlConfusionMatrixLabel[]
         },
         matrix: {
             required: true,
             type: Array as PropType<number[][] | DlConfusionMatrixCell[][]>,
-            default: (): number[][] | DlConfusionMatrixCell[][] => []
+            default: () => [] as number[][] | DlConfusionMatrixLabel[][]
         },
         normalized: {
             type: Boolean,
@@ -335,31 +335,23 @@ export default defineComponent({
         }
     },
     computed: {
-        visibleLabels(): DlConfusionMatrixLabel[] {
-            if (this.labels[0]) {
-                const arr = this.labels as DlConfusionMatrixLabel[]
-                return arr.slice(
-                    this.currentBrushState.min,
-                    this.currentBrushState.max
-                )
-            }
-            return []
-        },
-        labelStrings(): string[] | DlConfusionMatrixLabel[] {
-            if (isObject(this.labels[0])) {
-                const arr = this.labels as DlConfusionMatrixLabel[]
-                return arr.map((label: DlConfusionMatrixLabel) => label.title)
-            }
-            return this.labels
-        },
-        labelImages(): string[] {
-            return this.visibleLabels.map((label: any) => label.image)
+        visibleLabels(): DlConfusionMatrixLabel[] | string[] {
+            return this.labels.slice(
+                this.currentBrushState.min,
+                this.currentBrushState.max
+            )
         },
         isValidMatrix(): boolean {
             return validateMatrix(this.matrix, this.labels)
         },
         flattenedMatrix(): DlConfusionMatrixCell[] {
-            return flattenConfusionMatrix(this.matrix, this.labelStrings)
+            const labelStrings: string[] = []
+            for (const label of this.labels) {
+                const labelString = this.getLabelString(label)
+                labelStrings.push(labelString)
+            }
+
+            return flattenConfusionMatrix(this.matrix, labelStrings)
         },
         matrixStyles(): Record<string, number | string> {
             return {
@@ -413,14 +405,29 @@ export default defineComponent({
         this.handleResizeObserver({ dispose: true })
     },
     methods: {
+        getLabelString(label: DlConfusionMatrixLabel | string) {
+            if (isObject(label)) {
+                return (label as DlConfusionMatrixLabel).title
+            }
+            return label as string
+        },
+        getLabelImage(label: DlConfusionMatrixLabel | string) {
+            if (isObject(label)) {
+                return (label as DlConfusionMatrixLabel).image
+            }
+        },
         calculateRotatedXLabels() {
-            const longest = Math.max(
-                ...this.visibleLabels.map(
-                    (el: DlConfusionMatrixLabel) =>
-                        (isObject(el) ? el.title : `${el}`).length
-                )
-            )
-            this.rotateXLabels = longest * 12 > this.getMatrixCellWidth()
+            let maxStrLen = 0
+            for (const label of this.labels) {
+                const strLabel = this.getLabelString(label)
+                const strLabelLen = strLabel.length
+
+                if (strLabelLen > maxStrLen) {
+                    maxStrLen = strLabelLen
+                }
+            }
+
+            this.rotateXLabels = maxStrLen * 12 > this.getMatrixCellWidth()
         },
         handleResizeObserver(options: { dispose?: boolean } = {}) {
             if (this.isDisposed) return
@@ -450,6 +457,8 @@ export default defineComponent({
             this.cellWidth = Math.round(width / this.matrix.length)
             colorSpectrum.style.height = `${width}px`
             yAxisOuter.style.height = `${width}px`
+
+            this.resizeYAxis()
         },
         handleBrushUpdate(brush: DlConfusionMatrixBrushState) {
             if (
@@ -508,7 +517,7 @@ export default defineComponent({
     user-select: none;
 }
 .vertical_wrapper {
-    width: 80%;
+    width: calc(100% - 120px);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -556,6 +565,10 @@ export default defineComponent({
         &--text {
             font-size: 12px;
         }
+        .legend-avatar {
+            max-height: 30px;
+            max-width: 100%;
+        }
     }
 }
 .y-axis {
@@ -569,6 +582,11 @@ export default defineComponent({
         overflow: hidden;
         text-overflow: ellipsis;
         font-size: 12px;
+        min-width: 30px;
+        .legend-avatar {
+            max-height: 100%;
+            max-width: 30px;
+        }
     }
 }
 .y-axis-outer {
@@ -617,6 +635,7 @@ export default defineComponent({
 .color-spectrum {
     color: var(--dl-color-darker);
     display: flex;
+    width: 20px;
     margin: 0px 15px;
     &__gradient {
         width: 40%;
@@ -686,7 +705,5 @@ export default defineComponent({
 
 .legend-avatar {
     border-radius: 50%;
-    width: 30px;
-    height: 30px;
 }
 </style>

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/utils.ts

@@ -73,7 +73,7 @@ export function getGradationValues(
 
 export function flattenConfusionMatrix(
     matrix: number[][] | DlConfusionMatrixCell[][],
-    labelStrings: string[] | DlConfusionMatrixLabel[]
+    labelStrings: string[]
 ) {
     const toNormalize: DlConfusionMatrixCell[] = []
 

package/src/assets/grid.css

@@ -1,9 +0,0 @@
-grid {
-    display: grid;
-}
-.grid-cols-2 {
-    grid-template-columns: 1fr 1fr;
-}
-.grid-cols-3 {
-    grid-template-columns: 1fr 1fr 1fr;
-}