@dataloop-ai/components 0.18.7 → 0.18.9

package/package.json

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

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

@@ -36,11 +36,18 @@
                 <div
                     ref="yAxis"
                     class="y-axis"
+                    style="min-height: 100%"
                 >
                     <div
                         v-for="(label, index) in labels"
                         :key="index"
                         class="y-axis__element"
+                        style="
+                            display: flex;
+                            flex-grow: 1;
+                            align-items: center;
+                            justify-content: center;
+                        "
                     >
                         <img
                             v-if="labelImages[0]"
@@ -118,43 +125,54 @@
                     class="x-axis"
                     style="margin-top: 10px"
                 >
-                    <span
+                    <div
                         v-for="(label, index) in visibleLabels"
-                        :ref="`xAxis-${index}`"
                         :key="index"
-                        class="x-axis__element"
-                        :style="`${
-                            !labelImages[0]
-                                ? `transform: rotate(${
-                                    rotateXLabels ? '70' : '0'
-                                }deg); line-height: ${
-                                    rotateXLabels ? 100 : 10
-                                }px`
-                                : ''
-                        }`"
+                        style="
+                            display: flex;
+                            flex-grow: 100;
+                            width: 100%;
+                            justify-content: center;
+                        "
                     >
-                        <span class="x-axis__element--text">
-                            <img
-                                v-if="labelImages[0]"
-                                class="legend-avatar"
-                                :src="labelImages[index]"
-                            >
-                            <span v-else>
-                                {{ label }}
+                        <span
+                            :ref="`xAxis-${index}`"
+                            class="x-axis__element"
+                            :style="`
+                                justify-content: center;
+                                display: flex;${
+                                !labelImages[0]
+                                    ? `transform: rotate(${
+                                        rotateXLabels ? '70' : '0'
+                                    }deg); line-height: ${
+                                        rotateXLabels ? 100 : 10
+                                    }px`
+                                    : ''
+                            };`"
+                        >
+                            <span class="x-axis__element--text">
+                                <img
+                                    v-if="labelImages[0]"
+                                    class="legend-avatar"
+                                    :src="labelImages[index]"
+                                >
+                                <span v-else>
+                                    {{ label }}
+                                </span>
                             </span>
+                            <dl-tooltip
+                                self="top middle"
+                                :offset="debouncedCalculateXAxisElOffset(index)"
+                            >
+                                {{ labelStrings[index] }}</dl-tooltip>
                         </span>
-                        <dl-tooltip
-                            self="top middle"
-                            :offset="calculateXAxisElOffset(index)"
-                        >
-                            {{ labelStrings[index] }}</dl-tooltip>
-                    </span>
+                    </div>
                 </div>
                 <dl-brush
                     track-size="18px"
                     thumb-size="20px"
                     :max="matrix.length"
-                    :max-range="2"
+                    :min-range="2"
                     :selection-color="getCellBackground(0.1)"
                     :color="getCellBackground()"
                     :step="1"
@@ -190,7 +208,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue-demi'
+import { defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi'
 import DlBrush from '../../components/DlBrush.vue'
 import { DlTooltip } from '../../../../shared'
 import {
@@ -255,16 +273,8 @@ export default defineComponent({
         }
     },
     setup(props) {
+        const vm = getCurrentInstance()
         const { variables } = useThemeVariables()
-
-        const tooltipState = ref<{
-            value?: number
-            xLabel?: string
-            yLabel?: string
-            x?: number
-            y?: number
-            visible?: boolean
-        } | null>(null)
         const currentBrushState = ref<{ min: number; max: number }>({
             min: 0,
             max: props.matrix.length
@@ -272,6 +282,7 @@ export default defineComponent({
         const cellWidth = ref<number | null>(null)
         const rotateXLabels = ref(true)
         const resizeObserver = ref<ResizeObserver>(null)
+        const isDisposed = ref(false)
 
         const getCellBackground = (value: number = 1): string => {
             const object: { [key: string]: any } = {
@@ -290,6 +301,25 @@ export default defineComponent({
             return `var(--dl-color-text${value < 0.5 ? '-darker' : ''}-buttons)`
         }
 
+        const calculateXAxisElOffset = (index: number): number[] => {
+            let el = vm.refs[`xAxis-${index}`] as HTMLElement
+            if (!el) return null
+            if (Array.isArray(el)) {
+                el = el[0]
+            }
+            if (!el) {
+                return [0, 0]
+            }
+            const height = el.clientHeight
+            const offsetHeight = -1 * (height / 2)
+            return [0, offsetHeight]
+        }
+
+        const debouncedCalculateXAxisElOffset = debounce(
+            calculateXAxisElOffset,
+            100
+        )
+
         return {
             resizeObserver,
             variables,
@@ -297,7 +327,10 @@ export default defineComponent({
             getCellTextColor,
             cellWidth,
             currentBrushState,
-            rotateXLabels
+            rotateXLabels,
+            calculateXAxisElOffset,
+            debouncedCalculateXAxisElOffset,
+            isDisposed
         }
     },
     computed: {
@@ -343,41 +376,49 @@ export default defineComponent({
     watch: {
         matrix: {
             handler(value) {
-                this.currentBrushState.max = value.length
-                this.resizeMatrix()
+                this.currentBrushState.max = Math.min(10, value.length)
+                this.$nextTick(() => {
+                    this.resizeMatrix()
+                })
             }
         },
         currentBrushState() {
-            const longest = Math.max(
-                ...this.visibleLabels.map(
-                    (el: DlConfusionMatrixLabel) =>
-                        (isObject(el) ? el.title : `${el}`).length
-                )
-            )
-            this.rotateXLabels = longest * 12 > getCellWidth()
+            this.calculateRotatedXLabels()
         },
         isEmpty(val) {
             this.handleResizeObserver({ dispose: !val })
         }
     },
     mounted() {
+        this.isDisposed = false
         if (!this.isValidMatrix) return
         if (this.isEmpty) return
 
         this.handleResizeObserver()
+        this.$nextTick(() => {
+            setTimeout(() => {
+                if (this.isDisposed) return
+                this.calculateRotatedXLabels()
+                this.updateBrush(this, this.currentBrushState)
+            }, 300)
+        })
+    },
+    beforeUnmount() {
+        this.isDisposed = true
+        this.handleResizeObserver({ dispose: true })
     },
     methods: {
-        calculateXAxisElOffset(index: number): number[] {
-            let el = this.$refs[`xAxis-${index}`] as HTMLElement
-            if (!el) return null
-            if (Array.isArray(el)) {
-                el = el[0]
-            }
-            const height = el.clientHeight
-            const offsetHeight = -1 * (height / 2)
-            return [0, offsetHeight]
+        calculateRotatedXLabels() {
+            const longest = Math.max(
+                ...this.visibleLabels.map(
+                    (el: DlConfusionMatrixLabel) =>
+                        (isObject(el) ? el.title : `${el}`).length
+                )
+            )
+            this.rotateXLabels = longest * 12 > getCellWidth()
         },
         handleResizeObserver(options: { dispose?: boolean } = {}) {
+            if (this.isDisposed) return
             const { dispose } = options
             if (dispose && this.resizeObserver) {
                 this.resizeObserver.unobserve(this.$refs.wrapper as Element)
@@ -393,6 +434,7 @@ export default defineComponent({
             }
         },
         resizeMatrix() {
+            if (this.isDisposed) return
             const colorSpectrum = this.$refs.colorSpectrum as HTMLElement
             const verticalWrapper = this.$refs.verticalWrapper as HTMLElement
             const labelY = this.$refs.labelY as HTMLElement
@@ -481,6 +523,7 @@ export default defineComponent({
     max-height: 100px;
     &__element {
         width: var(--cell-dimensions);
+        max-width: 100px;
         overflow: hidden;
         text-overflow: ellipsis;
         &--text {
@@ -532,7 +575,7 @@ export default defineComponent({
     grid-template-columns: repeat(var(--matrix-rows), 1fr);
 
     &__cell {
-        font-size: 12px;
+        font-size: max(calc(var(--cell-dimensions) * 0.1), 12px);
         cursor: pointer;
         border: 1px solid var(--dl-color-separator);
         box-sizing: border-box;

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

@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, watch, defineComponent } from 'vue-demi'
+import { ref, computed, watch, defineComponent, PropType } from 'vue-demi'
 
 import useSlider, {
     useSliderProps,
@@ -91,7 +91,12 @@ export default defineComponent({
                 }),
             validator: (v: Object) => 'min' in v && 'max' in v
         },
-
+        value: {
+            type: Object as PropType<{ min: number; max: number }>,
+            default: null,
+            required: false,
+            validator: (v: Object) => 'min' in v && 'max' in v
+        },
         dragRange: Boolean,
         dragOnlyRange: Boolean,
         trackColor: {
@@ -102,6 +107,10 @@ export default defineComponent({
             type: Number,
             default: null
         },
+        minRange: {
+            type: Number,
+            default: null
+        },
         selectionColor: {
             type: String,
             default: 'dl-color-chart-brush'
@@ -120,7 +129,8 @@ export default defineComponent({
         const rootRef = ref(null)
         const curMinRatio = ref(0)
         const curMaxRatio = ref(0)
-        const model = ref({ min: 0, max: 0 })
+
+        const model = ref(props.value ?? { min: 0, max: 0 })
 
         function normalizeModel() {
             model.value.min =
@@ -152,6 +162,15 @@ export default defineComponent({
             normalizeModel
         )
 
+        watch(
+            () => props.value,
+            (v) => {
+                if (v !== null) {
+                    model.value = v
+                }
+            }
+        )
+
         normalizeModel()
 
         const isMobile = computed(() => isMobileOrTablet())
@@ -392,7 +411,8 @@ export default defineComponent({
                     break
             }
 
-            if (pos.max - pos.min < props.maxRange) return
+            if (props.maxRange && pos.max - pos.min > props.maxRange) return
+            if (props.minRange && pos.max - pos.min < props.minRange) return
 
             model.value =
                 model.value.min === null || model.value.max === null

package/src/components/compound/DlCharts/types/DlConfusionMatrix.types.ts

@@ -1,10 +1,10 @@
 export interface DlConfusionMatrixCell {
     value: number
-    unnormalizedValue: number
-    xLabel: string | DlConfusionMatrixLabel
-    yLabel: string | DlConfusionMatrixLabel
-    x: number
-    y: number
+    unnormalizedValue?: number
+    xLabel?: string | DlConfusionMatrixLabel
+    yLabel?: string | DlConfusionMatrixLabel
+    x?: number
+    y?: number
     link?: string
 }
 

package/src/components/compound/DlSelect/DlSelect.vue

@@ -155,6 +155,7 @@
                 :disabled="disabled || readonly"
                 :arrow-nav-items="options"
                 :max-height="dropdownMaxHeight"
+                :trigger-percentage="triggerPercentage"
                 @show="onMenuOpen"
                 @hide="closeMenu"
                 @highlightedIndex="setHighlightedIndex"
@@ -389,7 +390,14 @@ export default defineComponent({
         clearButtonTooltip: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
         preserveSearch: { type: Boolean, default: false },
-        disabledTooltip: { type: String, default: 'Disabled' }
+        disabledTooltip: { type: String, default: 'Disabled' },
+        /**
+         * the % of the select element to display the menu
+         */
+        triggerPercentage: {
+            type: Number,
+            default: 1
+        }
     },
     emits: [
         'search-focus',

package/src/components/essential/DlMenu/DlMenu.vue

@@ -37,7 +37,10 @@ import {
 } from 'vue-demi'
 
 import useWindowSize from '../../../hooks/use-window-size'
-import useAnchor, { useAnchorProps } from '../../../hooks/use-anchor'
+import useAnchor, {
+    CheckAnchorElVisibility,
+    useAnchorProps
+} from '../../../hooks/use-anchor'
 import useScrollTarget from '../../../hooks/use-scroll-target'
 import useModelToggle, {
     useModelToggleProps,
@@ -149,6 +152,13 @@ export default defineComponent({
         zIndex: {
             type: [Number, String],
             default: 'var(--dl-z-index-menu)'
+        },
+        /**
+         * the % of the parent element that triggers the tooltips visibility
+         */
+        triggerPercentage: {
+            type: Number,
+            default: 1
         }
     },
 
@@ -373,16 +383,6 @@ export default defineComponent({
             hide(evt)
         }
 
-        function CheckAnchorElVisiblity(domElement: any) {
-            return new Promise((resolve) => {
-                const o = new IntersectionObserver(([entry]) => {
-                    resolve(entry.intersectionRatio === 1)
-                    o.disconnect()
-                })
-                o.observe(domElement)
-            })
-        }
-
         const updatePosition = async () => {
             const el = innerRef.value
 
@@ -390,8 +390,11 @@ export default defineComponent({
                 return
             }
 
-            const isAnchorElVisible = await CheckAnchorElVisiblity(
-                anchorEl.value
+            const isAnchorElVisible = await CheckAnchorElVisibility(
+                anchorEl.value,
+                {
+                    triggerPercentage: props.triggerPercentage
+                }
             )
 
             if (!isAnchorElVisible) {

package/src/components/shared/DlTooltip/DlTooltip.vue

@@ -34,7 +34,10 @@ import {
     PropType,
     onMounted
 } from 'vue-demi'
-import useAnchor, { useAnchorProps } from '../../../hooks/use-anchor'
+import useAnchor, {
+    CheckAnchorElVisibility,
+    useAnchorProps
+} from '../../../hooks/use-anchor'
 import useModelToggle, { AnchorEvent } from '../../../hooks/use-model-toggle'
 import usePortal from '../../../hooks/use-portal'
 import useScrollTarget from '../../../hooks/use-scroll-target'
@@ -272,17 +275,6 @@ export default defineComponent({
             cleanEvt(anchorEvents, 'tooltipTemp')
         }
 
-        function CheckAnchorElVisiblity(domElement: any) {
-            const intersectionRatio = props.triggerPercentage ?? 1
-            return new Promise((resolve) => {
-                const o = new IntersectionObserver(([entry]) => {
-                    resolve(entry.intersectionRatio >= intersectionRatio)
-                    o.disconnect()
-                })
-                o.observe(domElement)
-            })
-        }
-
         async function updatePosition() {
             const el = innerRef.value
 
@@ -290,8 +282,11 @@ export default defineComponent({
                 return
             }
 
-            const isAnchorElVisible = await CheckAnchorElVisiblity(
-                anchorEl.value
+            const isAnchorElVisible = await CheckAnchorElVisibility(
+                anchorEl.value,
+                {
+                    triggerPercentage: props.triggerPercentage
+                }
             )
             if (!isAnchorElVisible) {
                 hide()

package/src/demos/DlConfusionMatrixDemo.vue

@@ -1,67 +1,89 @@
 <template>
     <div>
-        <dl-confusion-matrix
-            :matrix="matrix"
-            :labels="labels"
-        />
-
-        <dl-confusion-matrix
-            :matrix="matrix"
-            :labels="labels"
-            is-empty
-            :empty-state-props="{
-                responsive: true,
-                style: 'min-height: 350px;',
-                bgSize: '130px',
-                bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
-                title: 'Lorem ipsum',
-                subtitle:
-                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
-                info: 'To learn more about this analytics, read our documentation.'
-            }"
-        >
-            <template #links="">
-                <div style="display: flex; gap: 5px; padding: 0 20px">
-                    <dl-button
-                        padding="0px"
-                        icon="icon-dl-sdk-documentation"
-                        flat
-                        uppercase
-                        label="SDK"
-                    />
-                    <div class="break" />
-                    <dl-button
-                        padding="0px"
-                        icon="icon-dl-file"
-                        flat
-                        label="Documentation"
-                    />
-                    <div class="break" />
-                    <dl-button
-                        padding="0px"
-                        icon="icon-dl-youtube"
-                        flat
-                        label="Video"
-                    />
-                </div>
-            </template>
-        </dl-confusion-matrix>
+        <dl-accordion title="Matrix">
+            <dl-confusion-matrix
+                :matrix="matrix"
+                :labels="labels"
+            />
+        </dl-accordion>
+        <dl-accordion title="one label matrix">
+            <dl-confusion-matrix
+                :matrix="oneLabelMatrix"
+                :labels="oneLabelLabels"
+            />
+        </dl-accordion>
+        <dl-accordion title="two label matrix">
+            <dl-confusion-matrix
+                :matrix="twoLabelMatrix"
+                :labels="twoLabelLabels"
+            />
+        </dl-accordion>
+        <dl-accordion title="a hundred label matrix">
+            <dl-confusion-matrix
+                :matrix="aHundredLabelMatrix"
+                :labels="aHundredLabelLabels"
+            />
+        </dl-accordion>
+        <dl-accordion title="empty state">
+            <dl-confusion-matrix
+                :matrix="matrix"
+                :labels="labels"
+                is-empty
+                :empty-state-props="{
+                    responsive: true,
+                    style: 'min-height: 350px;',
+                    bgSize: '130px',
+                    bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                    title: 'Lorem ipsum',
+                    subtitle:
+                        'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                    info: 'To learn more about this analytics, read our documentation.'
+                }"
+            >
+                <template #links="">
+                    <div style="display: flex; gap: 5px; padding: 0 20px">
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-sdk-documentation"
+                            flat
+                            uppercase
+                            label="SDK"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-file"
+                            flat
+                            label="Documentation"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-youtube"
+                            flat
+                            label="Video"
+                        />
+                    </div>
+                </template>
+            </dl-confusion-matrix>
+        </dl-accordion>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlConfusionMatrix, DlButton } from '../components'
+import { DlConfusionMatrix, DlButton, DlAccordion } from '../components'
+import { DlConfusionMatrixCell } from '../types'
 
 const getLink = (number: number) => {
     return `www.confusion-matrix.com/cell-${number}`
 }
 
 const getMatrix = (size: number) => {
-    const newMatrix = []
+    const newMatrix: DlConfusionMatrixCell[][] = []
 
     for (let i = 0; i < size; i++) {
-        const row = []
+        const row: DlConfusionMatrixCell[] = []
         for (let j = 0; j < size; j++) {
             const value = Math.floor(Math.random() * 10)
             row.push({
@@ -96,14 +118,34 @@ const getLabels = (size: number) => {
 export default defineComponent({
     components: {
         DlConfusionMatrix,
-        DlButton
+        DlButton,
+        DlAccordion
     },
     setup() {
         const SIZE = 10
         const matrix = getMatrix(SIZE)
         const labels = getLabels(SIZE)
 
-        return { matrix, labels, getLink }
+        const oneLabelMatrix = getMatrix(1)
+        const oneLabelLabels = getLabels(1)
+
+        const twoLabelMatrix = getMatrix(2)
+        const twoLabelLabels = getLabels(2)
+
+        const aHundredLabelMatrix = getMatrix(100)
+        const aHundredLabelLabels = getLabels(100)
+
+        return {
+            matrix,
+            labels,
+            getLink,
+            oneLabelMatrix,
+            oneLabelLabels,
+            aHundredLabelMatrix,
+            aHundredLabelLabels,
+            twoLabelMatrix,
+            twoLabelLabels
+        }
     }
 })
 </script>

package/src/hooks/use-anchor.ts

@@ -32,6 +32,21 @@ export const useAnchorProps = {
     contextMenu: Boolean
 }
 
+export function CheckAnchorElVisibility(
+    domElement: any,
+    options: { triggerPercentage?: number } = {}
+) {
+    const { triggerPercentage } = options
+    const intersectionRatio = triggerPercentage ?? 1
+    return new Promise((resolve) => {
+        const o = new IntersectionObserver(([entry]) => {
+            resolve(entry.intersectionRatio >= intersectionRatio)
+            o.disconnect()
+        })
+        o.observe(domElement)
+    })
+}
+
 export default function useAnchor({
     configureAnchorEl
 }: {