@dataloop-ai/components 0.16.45 → 0.16.47

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

@@ -1,5 +1,8 @@
 <template>
-    <div :class="chartWrapperClasses">
+    <div
+        :style="cssVars"
+        :class="chartWrapperClasses"
+    >
         <DlLine
             :id="id"
             ref="lineChart"
@@ -153,9 +156,10 @@ export default defineComponent({
             size: { height: number; width: number }
         ) => {
             if (chart?.scales?.x?.width) {
-                chartWidth.value = `${parseInt(
-                    chart.scales.x.width as unknown as string
-                )}px`
+                chartWidth.value = `${
+                    parseInt(chart.scales.x.width as unknown as string) -
+                    parseInt(brushProperties.value.thumbSize) / 4
+                }px`
             }
         }
 
@@ -268,6 +272,13 @@ export default defineComponent({
             return merge(defaultLineChartProps.legendProps, props.legendProps)
         })
 
+        const cssVars = computed(() => {
+            return {
+                '--dl-brush-thumb-size':
+                    parseInt(brushProperties.value.thumbSize) / 4 + 'px'
+            }
+        })
+
         const replaceDataColors = (data: ChartData) =>
             updateKeys(
                 data,
@@ -450,7 +461,10 @@ export default defineComponent({
             () => chart.value?.scales?.x?.width,
             (val: string) => {
                 if (val) {
-                    chartWidth.value = `${parseInt(val as unknown as string)}px`
+                    chartWidth.value = `${
+                        parseInt(val as unknown as string) -
+                        parseInt(brushProperties.value.thumbSize) / 4
+                    }px`
                 }
             },
             { deep: true }
@@ -619,7 +633,8 @@ export default defineComponent({
             onLeaveLegend,
             onChartLeave,
             chart,
-            labelStyles
+            labelStyles,
+            cssVars
         }
     }
 })
@@ -644,5 +659,6 @@ export default defineComponent({
 .dl-brush,
 .dl-legend {
     align-self: flex-end;
+    margin-right: var(--dl-brush-thumb-size);
 }
 </style>

package/src/components/compound/DlCharts/charts/index.ts

@@ -2,3 +2,4 @@ export * from './DlBarChart'
 export * from './DlColumnChart'
 export * from './DlDoughnutChart'
 export * from './DlLineChart'
+export * from './DlConfusionMatrix'

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

@@ -62,7 +62,7 @@ import useSlider, {
     useSliderEmits,
     dragType,
     Dragging
-} from '../../DlSlider/useSlider'
+} from '../../../compound/DlSlider/useSlider'
 
 import { between, isMobileOrTablet, getColor } from '../../../../utils'
 import BrushThumb from '../shared/BrushThumb.vue'
@@ -98,6 +98,10 @@ export default defineComponent({
             type: String,
             default: 'dl-color-panel-background'
         },
+        maxRange: {
+            type: Number,
+            default: null
+        },
         selectionColor: {
             type: String,
             default: 'dl-color-chart-brush'
@@ -387,6 +391,8 @@ export default defineComponent({
                     break
             }
 
+            if (pos.max - pos.min < props.maxRange) return
+
             model.value =
                 model.value.min === null || model.value.max === null
                     ? { min: pos.min || props.min, max: pos.max || props.max }
@@ -454,6 +460,7 @@ export default defineComponent({
             }
 
             & .thumb {
+                background-color: var(--color);
                 z-index: 1;
                 outline: 0;
                 transition: transform 0.18s ease-out, fill 0.18s ease-out,

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

@@ -1,9 +1,29 @@
+<template>
+    <div
+        ref="wrapper"
+        :style="wrapperStyles"
+        class="scroll-bar-wrapper"
+    >
+        <div
+            v-show="show"
+            ref="scroll"
+            :style="scrollStyles"
+            :class="scrollClasses"
+            @mousedown="startDragging"
+        />
+    </div>
+</template>
+
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
     name: 'DlChartScrollBar',
     props: {
+        show: {
+            type: Boolean,
+            default: true
+        },
         itemCount: {
             type: Number,
             default: 0
@@ -19,6 +39,14 @@ export default defineComponent({
         height: {
             type: String,
             default: null
+        },
+        scrollDeficit: {
+            type: Number,
+            default: 0
+        },
+        wrapperStyles: {
+            type: Object,
+            default: null
         }
     },
     emits: ['position-update'],
@@ -47,7 +75,7 @@ export default defineComponent({
             const space =
                 this.maxHeight -
                 (this.$refs.scroll as HTMLElement)?.offsetHeight -
-                50
+                this.scrollDeficit
             return top < space ? top : space
         },
         scrollClasses(): string {
@@ -62,7 +90,7 @@ export default defineComponent({
             }
         },
         maxScroll(): number {
-            return (this.$refs as any).wrapper.offsetHeight - 50 || 1
+            return (this.$refs.wrapper as HTMLElement)?.offsetHeight
         }
     },
     mounted() {
@@ -93,7 +121,7 @@ export default defineComponent({
                 marginTop >
                     this.maxHeight -
                         (this.$refs.scroll as HTMLElement).offsetHeight -
-                        50
+                        this.scrollDeficit
             )
                 return
             ;(
@@ -102,32 +130,17 @@ export default defineComponent({
             this.updatePosition(marginTop)
         },
         updatePosition(top: number) {
-            const newMin = Math.trunc((this.itemCount * top) / this.maxScroll)
-            if (newMin !== this.previousMin + 1) {
-                this.$emit('position-update', newMin)
+            const position = Math.trunc((this.itemCount * top) / this.maxScroll)
+            if (position !== this.previousMin + 1) {
+                this.$emit('position-update', { position, top })
             }
         }
     }
 })
 </script>
 
-<template>
-    <div
-        ref="wrapper"
-        class="scroll-bar-wrapper"
-    >
-        <div
-            ref="scroll"
-            :style="scrollStyles"
-            :class="scrollClasses"
-            @mousedown="startDragging"
-        />
-    </div>
-</template>
-
 <style scoped lang="scss">
 .scroll-bar-wrapper {
-    margin-top: 10px;
     width: 1%;
 }
 .scroll-bar {

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

@@ -0,0 +1,19 @@
+export interface DlConfusionMatrixCell {
+    value: number
+    unnormalizedValue: number
+    xLabel: string | DlConfusionMatrixLabel
+    yLabel: string | DlConfusionMatrixLabel
+    x: number
+    y: number
+    link?: string
+}
+
+export interface DlConfusionMatrixLabel {
+    title: string
+    image: string
+}
+
+export interface DlConfusionMatrixBrushState {
+    min: number
+    max: number
+}

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

@@ -1 +1,2 @@
-export type { DlChartProps, DlChartComponentRef } from './types'
+export * from './DlConfusionMatrix.types'
+export * from './types'

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

@@ -259,6 +259,20 @@ export const defaultLineChartProps = {
         alignItems: 'center'
     },
     options: {
+        clip: {
+            left: 4.5,
+            right: 5,
+            bottom: 5,
+            top: 0
+        },
+        layout: {
+            padding: {
+                left: 0,
+                right: 4,
+                top: 0,
+                bottom: 0
+            }
+        },
         responsive: true,
         maintainAspectRatio: false,
         animation: {

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -226,7 +226,7 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     z-index: var(--dl-z-index-menu);
-    max-height: 100vh;
+    max-height: 90vh;
 
     &--fullscreen {
         margin: 0;

package/src/components/compound/DlDialogBox/components/DlDialogBoxFooter.vue

@@ -18,5 +18,6 @@ export default defineComponent({
     width: 100%;
     align-items: flex-start;
     justify-content: flex-end;
+    gap: 15px;
 }
 </style>

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -29,6 +29,8 @@
                     (split === false && disableMainBtn === true) ||
                     disableDropdown === true
             "
+            :overflow="overflow"
+            :tooltip="tooltip"
             @click="onClickHide"
         />
         <dl-button
@@ -47,6 +49,9 @@
                     (split === false && disableMainBtn === true) ||
                     disableDropdown === true
             "
+            :no-wrap="noWrap"
+            :overflow="overflow"
+            :tooltip="tooltip"
         >
             <div
                 class="dl-btn-dropdown--separator"
@@ -111,17 +116,18 @@
         "
         :disabled="disabled === true || disableMainBtn === true"
         :style="mainBtnStyle"
-        no-wrap
+        :no-wrap="props.noWrap"
+        :tooltip="tooltip"
+        :max-width="maxWidth"
         @click="onClick"
     >
-        <div
-            style="
-                display: flex;
-                align-items: center;
-                justify-content: space-around;
-            "
-        >
-            <span style="margin-right: 5px">
+        <div class="dl-btn-dropdown--simple__title">
+            <span
+                :class="{
+                    'dl-button-no-wrap': noWrap
+                }"
+                style="margin-right: 5px"
+            >
                 {{ label }}
             </span>
             <dl-icon
@@ -154,10 +160,13 @@
             separate-close-popup
             :disabled="disabled"
             :max-height="maxHeight"
+            :arrow-nav-items="arrowNavItems"
             @before-show="onBeforeShow"
             @show="onShow"
             @before-hide="onBeforeHide"
             @hide="onHide"
+            @highlightedIndex="setHighlightedIndex"
+            @handleSelectedItem="handleSelectedItem"
         >
             <slot />
         </dl-menu>
@@ -231,7 +240,14 @@ export default defineComponent({
         uppercase: Boolean,
         outlined: Boolean,
         padding: { type: String, default: '5px' },
-        fitContent: Boolean
+        fitContent: Boolean,
+        noWrap: { type: Boolean, default: false, required: false },
+        overflow: { type: Boolean, default: false, required: false },
+        tooltip: { type: String, default: null, required: false },
+        arrowNavItems: {
+            type: [String, Array, Object],
+            default: () => [] as any[]
+        }
     },
     emits: [
         'update:model-value',
@@ -240,7 +256,9 @@ export default defineComponent({
         'before-show',
         'show',
         'before-hide',
-        'hide'
+        'hide',
+        'highlightedIndex',
+        'handleSelectedItem'
     ],
 
     setup(props, { emit }) {
@@ -352,6 +370,12 @@ export default defineComponent({
                 (menuRef.value as Record<string, Function>).hide(evt)
             }
         }
+        const setHighlightedIndex = (value: any) => {
+            emit('highlightedIndex', value)
+        }
+        const handleSelectedItem = (value: any) => {
+            emit('handleSelectedItem', value)
+        }
 
         onMounted(() => {
             if (props.modelValue) {
@@ -383,13 +407,22 @@ export default defineComponent({
             toggle,
             show,
             hide,
-            menuModel
+            menuModel,
+            props,
+            setHighlightedIndex,
+            handleSelectedItem
         }
     }
 })
 </script>
 
 <style scoped lang="scss">
+.dl-button-no-wrap {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .dl-btn-dropdown {
     padding-right: var(--dl-btn-padding-right) !important;
     &--split .dl-btn-dropdown__arrow-container {
@@ -425,6 +458,19 @@ export default defineComponent({
         ::v-deep .dl-button-no-wrap {
             padding-right: 8px;
         }
+        &__title {
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            text-align: center;
+            padding: 0;
+            flex: 10000 1 0%;
+            flex-wrap: nowrap;
+            line-height: 1;
+            z-index: 0;
+            user-select: none !important;
+            min-width: 1.5em;
+        }
     }
     &__arrow {
         transition: transform 0.28s;

package/src/components/compound/DlInput/DlInput.vue

@@ -121,17 +121,21 @@
                     :offset="[0, 3]"
                     fit-container
                     :fit-content="fitContent"
+                    :arrow-nav-items="suggestItems"
                     @click="onMenuShow"
+                    @highlightedIndex="setHighlightedIndex"
+                    @handleSelectedItem="handleSelectedItem"
                 >
                     <dl-list
                         bordered
                         :style="{ maxWidth: suggestMenuWidth }"
                     >
                         <dl-list-item
-                            v-for="item in suggestItems"
+                            v-for="(item, suggestIndex) in suggestItems"
                             :key="item"
                             clickable
                             style="font-size: 12px"
+                            :is-highlighted="suggestIndex === highlightedIndex"
                             @click="onClick($event, item)"
                         >
                             <span
@@ -197,7 +201,7 @@
 
 <script lang="ts">
 import { debounce } from 'lodash'
-import { defineComponent, PropType } from 'vue-demi'
+import { computed, defineComponent, PropType, ref } from 'vue-demi'
 import { DlInfoErrorMessage } from '../../shared'
 import { DlListItem } from '../../basic'
 import { DlMenu, DlIcon, DlList, DlTooltip } from '../../essential'
@@ -297,10 +301,7 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        withoutRootPadding: {
-            type: Boolean,
-            default: false
-        },
+        dense: Boolean,
         disableClearBtn: {
             type: Boolean,
             default: false
@@ -328,12 +329,45 @@ export default defineComponent({
         fitContent: Boolean
     },
     emits: ['input', 'focus', 'blur', 'clear', 'enter', 'update:model-value'],
+    setup(props, { emit }) {
+        const highlightedIndex = ref(-1)
+        const isMenuOpen = ref(false)
+        const suggestItems = computed<string[]>(() => {
+            return props.autoSuggestItems.filter((item) =>
+                item.includes(`${props.modelValue}`)
+            )
+        })
+
+        const setHighlightedIndex = (value: any) => {
+            highlightedIndex.value = value
+        }
+        const handleSelectedItem = (value: any) => {
+            onAutoSuggestClick(null, value)
+        }
+        const inputRef = ref<HTMLInputElement>(null)
+        const onAutoSuggestClick = (
+            e: Event,
+            item: string | HTMLInputElement
+        ): void => {
+            emit('input', item, e)
+            emit('update:model-value', item)
+            inputRef.value = item as HTMLInputElement
+        }
+
+        return {
+            suggestItems,
+            highlightedIndex,
+            onAutoSuggestClick,
+            isMenuOpen,
+            setHighlightedIndex,
+            handleSelectedItem
+        }
+    },
     data() {
         return {
             uuid: `dl-text-input-${v4()}`,
             showPass: false,
-            focused: false,
-            isMenuOpen: false
+            focused: false
         }
     },
     computed: {
@@ -350,8 +384,8 @@ export default defineComponent({
             if (this.isSmall) {
                 classes.push('dl-text-input--s')
             }
-            if (this.withoutRootPadding) {
-                classes.push('dl-text-input--without-root-padding')
+            if (this.dense) {
+                classes.push('dl-text-input--dense')
             }
             return classes
         },
@@ -429,11 +463,6 @@ export default defineComponent({
         showSuggestItems(): boolean {
             return !!this.suggestItems.length && !!this.modelValue
         },
-        suggestItems(): string[] {
-            return this.autoSuggestItems.filter((item) =>
-                item.includes(`${this.modelValue}`)
-            )
-        },
         debouncedBlur(): any {
             const debounced = debounce(this.onBlur.bind(this), 50)
             return debounced
@@ -502,13 +531,6 @@ export default defineComponent({
         onPassShowClick(): void {
             this.showPass = !this.showPass
         },
-        onAutoSuggestClick(e: Event, item: string): void {
-            this.$emit('input', item, e)
-            this.$emit('update:model-value', item)
-
-            const inputRef = this.$refs.input as HTMLInputElement
-            inputRef.value = item
-        },
         onMenuShow(): void {
             this.focus()
         },
@@ -608,7 +630,7 @@ export default defineComponent({
         -moz-appearance: textfield;
     }
 
-    &--without-root-padding {
+    &--dense {
         padding: 0;
     }
 

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -34,13 +34,6 @@
                         ref="jsonEditorRef"
                         class="json-editor"
                     />
-                    <dl-typography
-                        style="margin-top: 5px"
-                        variant="p"
-                        color="red"
-                    >
-                        {{ message }}
-                    </dl-typography>
                 </div>
             </template>
             <template #footer>
@@ -57,15 +50,13 @@
                     </div>
                     <div class="footer-save">
                         <dl-button
-                            :disabled="message !== ''"
                             outlined
                             label="Save As"
-                            @click="save"
+                            @click="handleSaveButton"
                         />
                         <dl-button
-                            :disabled="message !== ''"
                             label="Search"
-                            @click="$emit('search', activeQuery)"
+                            @click="handleSearchButton"
                         />
                     </div>
                 </div>
@@ -82,7 +73,6 @@ import { Query } from './types'
 import { DlSelect } from '../DlSelect'
 import { DlButton } from '../../basic'
 import { DlDialogBox, DlDialogBoxHeader } from '../DlDialogBox'
-import { DlTypography } from '../../essential'
 
 interface JSONContent {
     json: JSONValue
@@ -94,8 +84,7 @@ export default defineComponent({
         DlDialogBox,
         DlDialogBoxHeader,
         DlSelect,
-        DlButton,
-        DlTypography
+        DlButton
     },
     props: {
         modelValue: { type: Boolean, default: false },
@@ -122,8 +111,7 @@ export default defineComponent({
             selectedOption: {
                 label: this.query?.name,
                 value: this.query?.query
-            },
-            message: ''
+            }
         }
     },
     computed: {
@@ -158,26 +146,18 @@ export default defineComponent({
         },
         query(val) {
             this.$nextTick(() => {
-                if (val.name === 'New Query') return
                 this.selectedOption = {
                     label: val.name,
                     value: val.query
                 }
                 if (val.query && this.jsonEditor.set) {
-                    this.jsonEditor.set({
-                        text: val.query
-                    })
+                    this.activeQuery = {
+                        name: '',
+                        query: val.query
+                    }
                 }
                 this.alignText()
             })
-        },
-        activeQuery(val) {
-            try {
-                if (val.query) JSON.parse(val.query)
-                this.message = ''
-            } catch {
-                this.message = 'Invalid Query.'
-            }
         }
     },
     mounted() {
@@ -258,7 +238,7 @@ export default defineComponent({
             })
             this.alignText()
         },
-        save() {
+        handleSaveButton() {
             this.$emit(
                 'save',
                 this.activeQuery
@@ -268,6 +248,10 @@ export default defineComponent({
                           query: (this.jsonEditor?.get() as any).text || ''
                       }
             )
+        },
+        handleSearchButton() {
+            this.$emit('search', this.activeQuery)
+            this.$emit('update:modelValue', false)
         }
     }
 })