@dataloop-ai/components 0.19.265 → 0.19.267

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +2 -2
  2. package/src/assets/{constants.scss → constants.css} +6 -6
  3. package/src/assets/globals.scss +1 -137
  4. package/src/assets/theme.css +139 -0
  5. package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue +43 -36
  6. package/src/components/compound/DlCharts/charts/DlConfusionMatrix/utils.ts +1 -1
  7. package/src/components/compound/DlSelect/DlSelect.vue +3 -0
  8. package/src/assets/grid.css +0 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.265",
3
+ "version": "0.19.267",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -22,7 +22,7 @@
22
22
  "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"
23
23
  },
24
24
  "dependencies": {
25
- "@dataloop-ai/icons": "^3.0.87",
25
+ "@dataloop-ai/icons": "^3.0.91",
26
26
  "@types/flat": "^5.0.2",
27
27
  "@types/lodash": "^4.14.184",
28
28
  "@types/sortablejs": "^1.15.7",
package/src/assets/{constants.scss → constants.css} RENAMED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- // Constants
2
+ /* Constants */
3
3
  --dl-color-alert-success: #38d079;
4
4
  --dl-color-alert-success-background: #e1fff0;
5
5
  --dl-color-alert-warn: #ffda3a;
@@ -10,13 +10,13 @@
10
10
  --dl-color-alert-info-background: #f3f9ff;
11
11
  --dl-color-alert-text: #171723;
12
12
 
13
- // Z-Index
13
+ /* Z-Index */
14
14
  --dl-z-index-toast: 1052;
15
- --dl-z-index-panel: 3000; // panel & panel contaiener content
16
- --dl-z-index-panel-elements: 3010; // separator + glutter
15
+ --dl-z-index-panel: 3000; /* panel & panel contaiener content */
16
+ --dl-z-index-panel-elements: 3010; /* separator + glutter */
17
17
  --dl-z-index-panel-header-footer: 3020;
18
18
  --dl-z-index-panel-container-overlay: 3025;
19
- --dl-z-index-panel-container-elements: 3030; // collapse icon + separator
19
+ --dl-z-index-panel-container-elements: 3030; /* collapse icon + separator */
20
20
 
21
21
  --dl-z-index-overlay: 5000;
22
22
  --dl-z-index-dialog: 5200;
@@ -24,7 +24,7 @@
24
24
  --dl-z-index-menu: 6000;
25
25
  --dl-z-index-tooltip: 9000;
26
26
 
27
- // chart colors
27
+ /* chart colors */
28
28
  --dl-color-chart-1: #4db1d3;
29
29
  --dl-color-chart-2: #ff2f7a;
30
30
  --dl-color-chart-3: #d4e3ff;
package/src/assets/globals.scss CHANGED
@@ -1,16 +1,10 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2
- @import 'constants';
1
+ @import "./theme.css";
3
2
 
4
3
  body {
5
- font-family: 'Roboto', sans-serif;
6
- font-weight: 400;
7
-
8
4
  & > * {
9
5
  font-weight: 400;
10
6
  font-family: 'Roboto', sans-serif;
11
7
  }
12
-
13
- background-color: var(--dl-color-bg);
14
8
  }
15
9
 
16
10
  // tranform
@@ -190,136 +184,6 @@ body {
190
184
  height: 100%;
191
185
  }
192
186
 
193
- :root {
194
- // common
195
- --dl-color-white: #fff;
196
- --dl-color-black: #000;
197
- --dl-color-bg: #fff;
198
- --dl-color-background: var(--dl-color-bg);
199
- --dl-color-transparent: transparent;
200
-
201
- // fontSizes
202
- --dl-font-size-h1: 30px;
203
- --dl-font-size-h2: 20px;
204
- --dl-font-size-h3: 16px;
205
- --dl-font-size-h4: 14px;
206
- --dl-font-size-h5: 12px;
207
- --dl-font-size-h6: 10px;
208
- --dl-font-size-body: 12px;
209
- --dl-font-size-small: 10px;
210
-
211
- // shadows
212
- --dl-menu-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
213
-
214
- // colors
215
- --dl-color-tooltip-text: #fefefe;
216
- --dl-color-tooltip-background: #171723d9;
217
- --dl-color-text-darker-buttons: #171723;
218
- --dl-color-secondary: #3452ff;
219
- --dl-color-secondary-opaque: #3452ff10;
220
- --dl-color-text-buttons: #ffffff;
221
- --dl-color-darker: #171723;
222
- --dl-color-medium: #767676;
223
- --dl-color-lighter: #999999;
224
- --dl-color-hover: #7b8cff;
225
- --dl-color-disabled: #b3b3b3;
226
- --dl-color-fill: #00000005;
227
- --dl-color-fill-hover: #f8f8f8;
228
- --dl-color-separator: #e4e4e4;
229
- --dl-color-scrollbar: #e4e4e4;
230
- --dl-color-body-background: #eef1ff;
231
- --dl-color-panel-background: #ffffff;
232
- --dl-color-side-panel: #18195c;
233
- --dl-color-shadow: #ffffff;
234
- --dl-color-icon-default: #171723;
235
- --dl-color-fill-secondary: #fbf8f8;
236
- --dl-color-fill-third: #fbfbfb;
237
- --dl-color-link: #20abfa;
238
- --dl-color-cell-background: #fffae2;
239
- --dl-color-disabled-slider: #B3B3B3;
240
- --q-color-positive: #38d079;
241
- --q-color-warning: #e1b75b;
242
-
243
- // alert colors
244
- --dl-color-negative: var(--dl-color-alert-error);
245
- --dl-color-negative-background: var(--dl-color-alert-error-background);
246
- --dl-color-warning: var(--dl-color-alert-warn);
247
- --dl-color-warning-background: var(--dl-color-alert-warn-background);
248
- --dl-color-positive: var(--dl-color-alert-success);
249
- --dl-color-positive-background: var(--dl-color-alert-success-background);
250
- --dl-color-info: var(--dl-color-alert-info);
251
- --dl-color-info-background: var(--dl-color-alert-info-background);
252
-
253
- --dl-color-chart-brush: #eef1ff;
254
-
255
- --dl-date-picker-shadow: 0px 3px 6px #101e7326;
256
- --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
257
- --dl-date-picker-selected-date: #8fa0ff;
258
-
259
- // DlJsonEditor based on atom one themes
260
- --dl-json-editor-key-color: #a626a4;
261
- --dl-json-editor-background-color: #fafafa;
262
- --dl-json-editor-panel-background: #fafafa;
263
- --dl-json-editor-value-color-boolean: #0184bb;
264
- --dl-json-editor-value-color-number: #c18401;
265
- --dl-json-editor-value-color-string: #50a14f;
266
- }
267
-
268
- /* Define styles for the root window with dark - mode preference */
269
- [data-theme='dark-mode'] {
270
- // shadows
271
- --dl-menu-shadow: 0px 3px 6px rgba(41, 46, 53, 0.5);
272
-
273
- // colors
274
- --dl-color-bg: #30363d;
275
- --dl-color-tooltip-text: #161616;
276
- --dl-color-tooltip-background: #ffffffd9;
277
- --dl-color-text-darker-buttons: #171723;
278
- --dl-color-secondary: #7c8cff;
279
- --dl-color-secondary-opaque: #7c8cff10;
280
- --dl-color-text-buttons: #ffffff;
281
- --dl-color-darker: #ffffffcc;
282
- --dl-color-medium: #ffffff99;
283
- --dl-color-lighter: #ffffff66;
284
- --dl-color-hover: #aeb9ff;
285
- --dl-color-disabled: #ffffff40;
286
- --dl-color-fill: #ffffff05;
287
- --dl-color-fill-secondary: #f8f8f81a;
288
- --dl-color-fill-hover: #454a50;
289
- --dl-color-separator: #ffffff26;
290
- --dl-color-body-background: #24282d;
291
- --dl-color-panel-background: #30363d;
292
- --dl-color-side-panel: #2a343e;
293
- --dl-color-shadow: #30363d;
294
- --dl-color-icon-default: #ffffffbf;
295
- --dl-color-fill-secondary: #ffffff1a;
296
- --dl-color-fill-third: #9e9e9e1a;
297
- --dl-color-link: #53b2e8;
298
- --dl-color-cell-background: #fffae2;
299
- --dl-color-disabled-slider: #64686d;
300
- --q-color-positive: #a1e5b6;
301
- --q-color-warning: #f8d29a;
302
-
303
- // alert colors
304
- --dl-color-negative-background: #734145;
305
- --dl-color-warning-background: #7b7241;
306
- --dl-color-positive-background: #3a644e;
307
- --dl-color-info-background: #4b5a6b;
308
- --dl-color-info: #92cdf2;
309
-
310
- --dl-color-chart-brush: #475077;
311
-
312
- --dl-date-picker-shadow: 0px 3px 6px #292e3580;
313
- --dl-date-picker-selected-strip: rgb(124, 140, 255, 0.2);
314
- --dl-date-picker-selected-date: #535e96;
315
-
316
- --dl-json-editor-key-color: #c678dd;
317
- --dl-json-editor-background-color: #282c34;
318
- --dl-json-editor-panel-background: #282c34;
319
- --dl-json-editor-value-color-boolean: #56b6c2;
320
- --dl-json-editor-value-color-number: #d19a66;
321
- --dl-json-editor-value-color-string: #98c379;
322
- }
323
187
 
324
188
  // scrollbar
325
189
 
package/src/assets/theme.css ADDED
@@ -0,0 +1,139 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2
+ @import 'constants.css';
3
+
4
+ body {
5
+ font-family: 'Roboto', sans-serif;
6
+ font-weight: 400;
7
+ background-color: var(--dl-color-bg);
8
+ }
9
+
10
+ :root {
11
+ /* common */
12
+ --dl-color-white: #fff;
13
+ --dl-color-black: #000;
14
+ --dl-color-bg: #fff;
15
+ --dl-color-background: var(--dl-color-bg);
16
+ --dl-color-transparent: transparent;
17
+
18
+ /* fontSizes */
19
+ --dl-font-size-h1: 30px;
20
+ --dl-font-size-h2: 20px;
21
+ --dl-font-size-h3: 16px;
22
+ --dl-font-size-h4: 14px;
23
+ --dl-font-size-h5: 12px;
24
+ --dl-font-size-h6: 10px;
25
+ --dl-font-size-body: 12px;
26
+ --dl-font-size-small: 10px;
27
+
28
+ /* shadows */
29
+ --dl-menu-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
30
+
31
+ /* colors */
32
+ --dl-color-tooltip-text: #fefefe;
33
+ --dl-color-tooltip-background: #171723d9;
34
+ --dl-color-text-darker-buttons: #171723;
35
+ --dl-color-secondary: #3452ff;
36
+ --dl-color-secondary-opaque: #3452ff10;
37
+ --dl-color-text-buttons: #ffffff;
38
+ --dl-color-darker: #171723;
39
+ --dl-color-medium: #767676;
40
+ --dl-color-lighter: #999999;
41
+ --dl-color-hover: #7b8cff;
42
+ --dl-color-disabled: #b3b3b3;
43
+ --dl-color-fill: #00000005;
44
+ --dl-color-fill-hover: #f8f8f8;
45
+ --dl-color-separator: #e4e4e4;
46
+ --dl-color-scrollbar: #e4e4e4;
47
+ --dl-color-body-background: #eef1ff;
48
+ --dl-color-panel-background: #ffffff;
49
+ --dl-color-side-panel: #18195c;
50
+ --dl-color-shadow: #ffffff;
51
+ --dl-color-icon-default: #171723;
52
+ --dl-color-fill-secondary: #fbf8f8;
53
+ --dl-color-fill-third: #fbfbfb;
54
+ --dl-color-link: #20abfa;
55
+ --dl-color-cell-background: #fffae2;
56
+ --dl-color-disabled-slider: #B3B3B3;
57
+ --q-color-positive: #38d079;
58
+ --q-color-warning: #e1b75b;
59
+
60
+ /* alert colors */
61
+ --dl-color-negative: var(--dl-color-alert-error);
62
+ --dl-color-negative-background: var(--dl-color-alert-error-background);
63
+ --dl-color-warning: var(--dl-color-alert-warn);
64
+ --dl-color-warning-background: var(--dl-color-alert-warn-background);
65
+ --dl-color-positive: var(--dl-color-alert-success);
66
+ --dl-color-positive-background: var(--dl-color-alert-success-background);
67
+ --dl-color-info: var(--dl-color-alert-info);
68
+ --dl-color-info-background: var(--dl-color-alert-info-background);
69
+
70
+ --dl-color-chart-brush: #eef1ff;
71
+
72
+ --dl-date-picker-shadow: 0px 3px 6px #101e7326;
73
+ --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
74
+ --dl-date-picker-selected-date: #8fa0ff;
75
+
76
+ /* DlJsonEditor based on atom one themes */
77
+ --dl-json-editor-key-color: #a626a4;
78
+ --dl-json-editor-background-color: #fafafa;
79
+ --dl-json-editor-panel-background: #fafafa;
80
+ --dl-json-editor-value-color-boolean: #0184bb;
81
+ --dl-json-editor-value-color-number: #c18401;
82
+ --dl-json-editor-value-color-string: #50a14f;
83
+ }
84
+
85
+ /* Define styles for the root window with dark - mode preference */
86
+ [data-theme='dark-mode'] {
87
+ /* shadows */
88
+ --dl-menu-shadow: 0px 3px 6px rgba(41, 46, 53, 0.5);
89
+
90
+ /* colors */
91
+ --dl-color-bg: #30363d;
92
+ --dl-color-tooltip-text: #161616;
93
+ --dl-color-tooltip-background: #ffffffd9;
94
+ --dl-color-text-darker-buttons: #171723;
95
+ --dl-color-secondary: #7c8cff;
96
+ --dl-color-secondary-opaque: #7c8cff10;
97
+ --dl-color-text-buttons: #ffffff;
98
+ --dl-color-darker: #ffffffcc;
99
+ --dl-color-medium: #ffffff99;
100
+ --dl-color-lighter: #ffffff66;
101
+ --dl-color-hover: #aeb9ff;
102
+ --dl-color-disabled: #ffffff40;
103
+ --dl-color-fill: #ffffff05;
104
+ --dl-color-fill-secondary: #f8f8f81a;
105
+ --dl-color-fill-hover: #454a50;
106
+ --dl-color-separator: #ffffff26;
107
+ --dl-color-body-background: #24282d;
108
+ --dl-color-panel-background: #30363d;
109
+ --dl-color-side-panel: #2a343e;
110
+ --dl-color-shadow: #30363d;
111
+ --dl-color-icon-default: #ffffffbf;
112
+ --dl-color-fill-secondary: #ffffff1a;
113
+ --dl-color-fill-third: #9e9e9e1a;
114
+ --dl-color-link: #53b2e8;
115
+ --dl-color-cell-background: #fffae2;
116
+ --dl-color-disabled-slider: #64686d;
117
+ --q-color-positive: #a1e5b6;
118
+ --q-color-warning: #f8d29a;
119
+
120
+ /* alert colors */
121
+ --dl-color-negative-background: #734145;
122
+ --dl-color-warning-background: #7b7241;
123
+ --dl-color-positive-background: #3a644e;
124
+ --dl-color-info-background: #4b5a6b;
125
+ --dl-color-info: #92cdf2;
126
+
127
+ --dl-color-chart-brush: #475077;
128
+
129
+ --dl-date-picker-shadow: 0px 3px 6px #292e3580;
130
+ --dl-date-picker-selected-strip: rgb(124, 140, 255, 0.2);
131
+ --dl-date-picker-selected-date: #535e96;
132
+
133
+ --dl-json-editor-key-color: #c678dd;
134
+ --dl-json-editor-background-color: #282c34;
135
+ --dl-json-editor-panel-background: #282c34;
136
+ --dl-json-editor-value-color-boolean: #56b6c2;
137
+ --dl-json-editor-value-color-number: #d19a66;
138
+ --dl-json-editor-value-color-string: #98c379;
139
+ }
package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue CHANGED
@@ -32,15 +32,15 @@
32
32
  "
33
33
  >
34
34
  <img
35
- v-if="labelImages[0]"
35
+ v-if="getLabelImage(label)"
36
36
  class="legend-avatar"
37
- :src="labelImages[index]"
37
+ :src="getLabelImage(label)"
38
38
  />
39
39
  <span v-else class="label label-y">
40
40
  {{ label }}
41
41
  </span>
42
42
  <dl-tooltip :offset="[0, 0]">
43
- {{ labelStrings[index] }}
43
+ {{ getLabelString(label) }}
44
44
  </dl-tooltip>
45
45
  </div>
46
46
  </div>
@@ -115,7 +115,7 @@
115
115
  :style="`
116
116
  justify-content: center;
117
117
  display: flex;${
118
- !labelImages[0]
118
+ !getLabelImage(label)
119
119
  ? `transform: rotate(${
120
120
  rotateXLabels ? '70' : '0'
121
121
  }deg); line-height: ${
@@ -126,9 +126,9 @@
126
126
  >
127
127
  <span class="x-axis__element--text">
128
128
  <img
129
- v-if="labelImages[0]"
129
+ v-if="getLabelImage(label)"
130
130
  class="legend-avatar"
131
- :src="labelImages[index]"
131
+ :src="getLabelImage(label)"
132
132
  />
133
133
  <span v-else class="label label-x">
134
134
  {{ label }}
@@ -139,7 +139,7 @@
139
139
  self="top middle"
140
140
  :offset="debouncedCalculateXAxisElOffset(index)"
141
141
  >
142
- {{ labelStrings[index] }}
142
+ {{ getLabelString(label) }}
143
143
  </dl-tooltip>
144
144
  </div>
145
145
  </div>
@@ -223,12 +223,12 @@ export default defineComponent({
223
223
  labels: {
224
224
  required: true,
225
225
  type: Array as PropType<string[] | DlConfusionMatrixLabel[]>,
226
- default: (): string[] | DlConfusionMatrixLabel[] => []
226
+ default: () => [] as string[] | DlConfusionMatrixLabel[]
227
227
  },
228
228
  matrix: {
229
229
  required: true,
230
230
  type: Array as PropType<number[][] | DlConfusionMatrixCell[][]>,
231
- default: (): number[][] | DlConfusionMatrixCell[][] => []
231
+ default: () => [] as number[][] | DlConfusionMatrixLabel[][]
232
232
  },
233
233
  normalized: {
234
234
  type: Boolean,
@@ -335,31 +335,23 @@ export default defineComponent({
335
335
  }
336
336
  },
337
337
  computed: {
338
- visibleLabels(): DlConfusionMatrixLabel[] {
339
- if (this.labels[0]) {
340
- const arr = this.labels as DlConfusionMatrixLabel[]
341
- return arr.slice(
342
- this.currentBrushState.min,
343
- this.currentBrushState.max
344
- )
345
- }
346
- return []
347
- },
348
- labelStrings(): string[] | DlConfusionMatrixLabel[] {
349
- if (isObject(this.labels[0])) {
350
- const arr = this.labels as DlConfusionMatrixLabel[]
351
- return arr.map((label: DlConfusionMatrixLabel) => label.title)
352
- }
353
- return this.labels
354
- },
355
- labelImages(): string[] {
356
- return this.visibleLabels.map((label: any) => label.image)
338
+ visibleLabels(): DlConfusionMatrixLabel[] | string[] {
339
+ return this.labels.slice(
340
+ this.currentBrushState.min,
341
+ this.currentBrushState.max
342
+ )
357
343
  },
358
344
  isValidMatrix(): boolean {
359
345
  return validateMatrix(this.matrix, this.labels)
360
346
  },
361
347
  flattenedMatrix(): DlConfusionMatrixCell[] {
362
- return flattenConfusionMatrix(this.matrix, this.labelStrings)
348
+ const labelStrings: string[] = []
349
+ for (const label of this.labels) {
350
+ const labelString = this.getLabelString(label)
351
+ labelStrings.push(labelString)
352
+ }
353
+
354
+ return flattenConfusionMatrix(this.matrix, labelStrings)
363
355
  },
364
356
  matrixStyles(): Record<string, number | string> {
365
357
  return {
@@ -413,14 +405,29 @@ export default defineComponent({
413
405
  this.handleResizeObserver({ dispose: true })
414
406
  },
415
407
  methods: {
408
+ getLabelString(label: DlConfusionMatrixLabel | string) {
409
+ if (isObject(label)) {
410
+ return (label as DlConfusionMatrixLabel).title
411
+ }
412
+ return label as string
413
+ },
414
+ getLabelImage(label: DlConfusionMatrixLabel | string) {
415
+ if (isObject(label)) {
416
+ return (label as DlConfusionMatrixLabel).image
417
+ }
418
+ },
416
419
  calculateRotatedXLabels() {
417
- const longest = Math.max(
418
- ...this.visibleLabels.map(
419
- (el: DlConfusionMatrixLabel) =>
420
- (isObject(el) ? el.title : `${el}`).length
421
- )
422
- )
423
- this.rotateXLabels = longest * 12 > this.getMatrixCellWidth()
420
+ let maxStrLen = 0
421
+ for (const label of this.labels) {
422
+ const strLabel = this.getLabelString(label)
423
+ const strLabelLen = strLabel.length
424
+
425
+ if (strLabelLen > maxStrLen) {
426
+ maxStrLen = strLabelLen
427
+ }
428
+ }
429
+
430
+ this.rotateXLabels = maxStrLen * 12 > this.getMatrixCellWidth()
424
431
  },
425
432
  handleResizeObserver(options: { dispose?: boolean } = {}) {
426
433
  if (this.isDisposed) return
package/src/components/compound/DlCharts/charts/DlConfusionMatrix/utils.ts CHANGED
@@ -73,7 +73,7 @@ export function getGradationValues(
73
73
 
74
74
  export function flattenConfusionMatrix(
75
75
  matrix: number[][] | DlConfusionMatrixCell[][],
76
- labelStrings: string[] | DlConfusionMatrixLabel[]
76
+ labelStrings: string[]
77
77
  ) {
78
78
  const toNormalize: DlConfusionMatrixCell[] = []
79
79
 
package/src/components/compound/DlSelect/DlSelect.vue CHANGED
@@ -782,6 +782,9 @@ export default defineComponent({
782
782
  },
783
783
  emitValue() {
784
784
  this.setSelectedIndex()
785
+ },
786
+ options() {
787
+ this.setSelectedIndex()
785
788
  }
786
789
  },
787
790
  beforeMount() {
package/src/assets/grid.css DELETED
@@ -1,9 +0,0 @@
1
- grid {
2
- display: grid;
3
- }
4
- .grid-cols-2 {
5
- grid-template-columns: 1fr 1fr;
6
- }
7
- .grid-cols-3 {
8
- grid-template-columns: 1fr 1fr 1fr;
9
- }