@dataloop-ai/components 0.17.68 → 0.17.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.68",
+  "version": "0.17.69",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlWidget/DlWidget.vue

@@ -6,24 +6,22 @@
         <div
             :id="uuid"
             ref="widget"
-            :class="widgetStyles"
+            :class="widgetClasses"
             @mouseenter="handleVisibleDragIcon(true)"
             @mouseleave="handleVisibleDragIcon(false)"
         >
+            <dl-icon
+                :style="iconStyles"
+                class="dl-widget__drag-icon"
+                icon="icon-dl-drag"
+                color="dl-color-medium"
+                size="15px"
+                @mousedown="startDragging"
+            />
             <div class="dl-widget__header">
                 <div class="dl-widget__header--titles">
                     <slot name="header" />
                 </div>
-                <dl-icon
-                    :style="`visibility: ${
-                        visibleDragIcon && !isDragging ? 'visible' : 'hidden'
-                    }`"
-                    class="dl-widget__header--drag-icon"
-                    icon="icon-dl-drag"
-                    color="dl-color-medium"
-                    size="15px"
-                    @mousedown="startDragging"
-                />
                 <slot name="menu" />
             </div>
 
@@ -65,8 +63,19 @@ export default defineComponent({
         }
     },
     computed: {
-        widgetStyles() {
+        widgetClasses() {
             return `${this.isDragging ? 'dl-widget__drag' : 'dl-widget'}`
+        },
+        iconStyles() {
+            return {
+                '--dl-widget-drag-icon-left': `${
+                    (this.$refs.widget as HTMLElement)?.offsetWidth / 2
+                }px`,
+                visibility:
+                    this.visibleDragIcon && !this.isDragging
+                        ? 'visible'
+                        : 'hidden'
+            }
         }
     },
     methods: {
@@ -192,19 +201,14 @@ export default defineComponent({
     height: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
     &__header {
         display: flex;
         padding: 10px;
         border-bottom: 1px solid var(--dl-color-separator);
-
-        &--drag-icon {
-            flex-grow: 1;
-            cursor: grab;
-
-            &::v-deep .dl-icon {
-                transform: rotate(90deg) !important;
-            }
-        }
+        font-size: 20px;
+        color: var(--dl-color-darker);
+        justify-content: space-between;
 
         &--titles {
             width: 50%;
@@ -229,6 +233,18 @@ export default defineComponent({
         color: var(--dl-color-medium);
     }
 
+    &__drag-icon {
+        position: absolute;
+        top: 5px;
+        left: calc(var(--dl-widget-drag-icon-left) - 5px);
+        flex-grow: 1;
+        cursor: grab;
+
+        &::v-deep .dl-icon {
+            transform: rotate(90deg) !important;
+        }
+    }
+
     &__drag {
         position: relative;
         &::after {

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

@@ -61,9 +61,7 @@
                             class="matrix__cell"
                             :style="`background-color: ${getCellBackground(
                                 cell.value
-                            )}; color: var(--dl-color-text${
-                                cell.value < 0.5 ? '-darker' : ''
-                            }-buttons)`"
+                            )}; color: ${getCellTextColor(cell.value)}`"
                             @mouseenter="handleShowTooltip(cell, $event)"
                             @mouseleave="handleHideTooltip"
                             @mousedown="openLink(cell)"
@@ -140,14 +138,14 @@
         <div
             v-if="tooltipVisible"
             :style="tooltipStyles"
-            class="tooltip"
+            class="matrix-tooltip"
         >
-            <span class="tooltip__x">{{ tooltipState.xLabel }}</span>
-            <span class="tooltip__y">{{ tooltipState.yLabel }}</span>
+            <span class="matrix-tooltip__x">{{ tooltipState.xLabel }}</span>
+            <span class="matrix-tooltip__y">{{ tooltipState.yLabel }}</span>
             <span>
                 <span
                     v-if="tooltipState.value"
-                    class="tooltip__color"
+                    class="matrix-tooltip__color"
                     :style="`background-color: ${getCellBackground(
                         tooltipState.value
                     )}`"
@@ -238,9 +236,19 @@ export default defineComponent({
             const hex = object[props.color]
             return hexToRgbA(hex, value)
         }
+
+        const getCellTextColor = (value: number) => {
+            const isDark =
+                document.documentElement.getAttribute('data-theme') ===
+                'dark-mode'
+            if (isDark) return 'var(--dl-color-text-buttons)'
+            return `var(--dl-color-text${value < 0.5 ? '-darker' : ''}-buttons)`
+        }
+
         return {
             variables,
             getCellBackground,
+            getCellTextColor,
             cellWidth,
             tooltipState,
             currentBrushState
@@ -365,8 +373,8 @@ export default defineComponent({
                     value: ctx.normalized ? cell.value : cell.unnormalizedValue,
                     xLabel: cell.xLabel,
                     yLabel: cell.yLabel,
-                    x: e.pageX,
-                    y: e.pageY,
+                    x: e.x,
+                    y: e.y,
                     visible: true
                 }
             },
@@ -514,7 +522,7 @@ export default defineComponent({
     }
 }
 
-.tooltip {
+.matrix-tooltip {
     position: absolute;
     border: 1px solid var(--dl-color-separator);
     padding: 8px;
@@ -522,6 +530,7 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     background-color: var(--dl-color-shadow);
+    color: var(--dl-color-tooltip-background);
     border-radius: 3px;
     animation: fadeIn 0.4s;
 

package/src/components/compound/DlCharts/components/DlChartScrollBar.vue

@@ -142,6 +142,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .scroll-bar-wrapper {
     width: 1%;
+    min-width: 5px;
 }
 .scroll-bar {
     background: #d9d9d9;

package/src/demos/DlWidgetDemo.vue

@@ -38,7 +38,7 @@
             <dl-widget>
                 <template #header>
                     <span>Widget 1</span>
-                    <span style="font-size: 12px; color: gray">Subtitle</span>
+                    <span style="font-size: 12px; color: var(--dl-color-medium)">Subtitle</span>
                 </template>
                 <template #content>
                     <dl-bar-chart