@dataloop-ai/components 0.17.68 → 0.17.70

package/package.json

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

package/src/components/basic/DlContainer/DlContainer.vue

@@ -0,0 +1,70 @@
+<template>
+    <div
+        ref="wrapper"
+        class="container-wrapper"
+    >
+        <div
+            :id="uuid"
+            ref="container"
+            :class="containerStyles"
+        >
+            <div
+                v-if="hasHeaderSlot"
+                class="dl-container__header"
+            >
+                <slot name="header" />
+            </div>
+
+            <div class="dl-container__content">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlContainer',
+    data() {
+        return {
+            uuid: `dl-container-${v4()}`
+        }
+    },
+    computed: {
+        containerStyles() {
+            return 'dl-container'
+        },
+        hasHeaderSlot(): boolean {
+            return this.$slots.header !== undefined
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-container {
+    border: 1px solid var(--dl-color-separator);
+    user-select: none;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    &__header {
+        display: flex;
+        padding: 10px;
+        border-bottom: 1px solid var(--dl-color-separator);
+    }
+    &__content {
+        padding: 10px;
+        height: 100%;
+        overflow-y: auto;
+    }
+}
+
+.container-wrapper {
+    flex-basis: var(--container-flex-basis);
+    margin: var(--row-gap) var(--column-gap);
+    height: 100%;
+}
+</style>

package/src/components/basic/DlContainer/index.ts

@@ -0,0 +1,3 @@
+import DlContainer from './DlContainer.vue'
+
+export { DlContainer }

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/basic/index.ts

@@ -13,3 +13,4 @@ export * from './DlEllipsis'
 export * from './DlCard'
 export * from './DlGrid'
 export * from './DlMarkupTable'
+export * from './DlContainer'

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/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -84,7 +84,11 @@ export default defineComponent({
             validator: optionsValidator
         },
         type: { type: String, default: 'radio', validator: typeValidator },
-        modelValue: { type: [Array, String, Number, Boolean], required: true }
+        modelValue: {
+            type: [Array, String, Number, Boolean],
+            required: false,
+            default: null
+        }
     },
     data() {
         const logger = loggerFactory('DlOptionGroup')

package/src/components/essential/DlRadio/DlRadio.vue

@@ -77,7 +77,11 @@ export default defineComponent({
         id: { type: [String, Number], default: null },
         label: { type: String, default: null },
         padding: { type: String, default: '0' },
-        modelValue: { type: [String, Number, Boolean], required: true },
+        modelValue: {
+            type: [String, Number, Boolean],
+            required: false,
+            default: null
+        },
         value: { type: [String, Number, Boolean], required: true },
         tabindex: { type: String, default: '0' },
         subLabel: { type: String, default: '' },

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -79,7 +79,7 @@ export default defineComponent({
             type: String,
             default: '0'
         },
-        modelValue: { type: Any, required: true },
+        modelValue: { type: Any, required: false, default: null },
         labelProps: {
             type: Object as PropType<{ fontSize: number; color: string }>,
             default: () => ({

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -114,12 +114,6 @@ export default defineComponent({
                 : 0
         })
 
-        onMounted(() => {
-            window.addEventListener('load', setItemSize)
-        })
-
-        onUnmounted(() => window.removeEventListener('load', () => {}))
-
         const setItemSize = () => {
             scrollSizeItem.value = props.virtualScrollItemSize
                 ? props.virtualScrollItemSize
@@ -260,8 +254,11 @@ export default defineComponent({
 
         onMounted(() => {
             configureScrollTarget()
+            window.addEventListener('load', setItemSize)
         })
 
+        onUnmounted(() => window.removeEventListener('load', () => {}))
+
         onActivated(() => {
             configureScrollTarget()
         })

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

package/src/utils/parse-smart-query.ts

@@ -22,6 +22,12 @@ const GeneratePureValue = (value: any) => {
     return value
 }
 
+/**
+ * Method to convert a DlSmartSearch query string to Mongo based JSON query
+ *
+ * @param { string } query DlSmartSearch query string
+ * @returns Mongo based JSON
+ */
 export const parseSmartQuery = (query: string) => {
     const queryArr = query.split(' OR ')
     const orTerms: { [key: string]: any }[] = []
@@ -93,6 +99,12 @@ export const parseSmartQuery = (query: string) => {
     return builtQuery
 }
 
+/**
+ * Method to convert a Mongo based JSON query to a DlSmartSearch query string
+ *
+ * @param { { [key: string]: any } } query Mongo based JSON that represents a query
+ * @returns DlSmartSearch query string
+ */
 export const stringifySmartQuery = (query: { [key: string]: any }) => {
     let result = ''