@dataloop-ai/components 0.19.10 → 0.19.12

package/package.json

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

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

@@ -54,7 +54,10 @@
                             class="legend-avatar"
                             :src="labelImages[index]"
                         >
-                        <span v-else>
+                        <span
+                            v-else
+                            class="label"
+                        >
                             {{ label }}
                         </span>
                         <dl-tooltip :offset="[0, 0]">
@@ -121,10 +124,7 @@
                         </div>
                     </div>
                 </div>
-                <div
-                    class="x-axis"
-                    style="margin-top: 10px"
-                >
+                <div class="x-axis">
                     <div
                         v-for="(label, index) in visibleLabels"
                         :key="index"
@@ -133,6 +133,7 @@
                             flex-grow: 100;
                             width: 100%;
                             justify-content: center;
+                            overflow: hidden;
                         "
                     >
                         <span
@@ -156,16 +157,20 @@
                                     class="legend-avatar"
                                     :src="labelImages[index]"
                                 >
-                                <span v-else>
+                                <span
+                                    v-else
+                                    class="label"
+                                >
                                     {{ label }}
                                 </span>
                             </span>
-                            <dl-tooltip
-                                self="top middle"
-                                :offset="debouncedCalculateXAxisElOffset(index)"
-                            >
-                                {{ labelStrings[index] }}</dl-tooltip>
                         </span>
+                        <dl-tooltip
+                            self="top middle"
+                            :offset="debouncedCalculateXAxisElOffset(index)"
+                        >
+                            {{ labelStrings[index] }}
+                        </dl-tooltip>
                     </div>
                 </div>
                 <dl-brush
@@ -292,7 +297,7 @@ export default defineComponent({
     },
     setup(props) {
         const vm = getCurrentInstance()
-        const { variables } = useThemeVariables()
+        const { variables, isDark = { value: false } } = useThemeVariables()
         const currentBrushState = ref<{ min: number; max: number }>({
             min: 0,
             max: Math.min(props.matrix.length, props.cellDisplayLimit)
@@ -312,13 +317,22 @@ export default defineComponent({
         }
 
         const getCellTextColor = (value: number) => {
-            const isDark =
-                document.documentElement.getAttribute('data-theme') ===
-                'dark-mode'
-            if (isDark) return 'var(--dl-color-text-buttons)'
+            if (isDark.value) return 'var(--dl-color-text-buttons)'
             return `var(--dl-color-text${value < 0.5 ? '-darker' : ''}-buttons)`
         }
 
+        const gradationDarkColor = computed(() => {
+            return isDark.value
+                ? getCellBackground()
+                : 'var(--dl-color-secondary)'
+        })
+
+        const gradationLightColor = computed(() => {
+            return isDark.value
+                ? 'var(--dl-color-text-darker-buttons)'
+                : 'var(--dl-color-text-buttons)'
+        })
+
         const calculateXAxisElOffset = (index: number): number[] => {
             let el = vm.refs[`xAxis-${index}`] as HTMLElement
             if (!el) return null
@@ -330,7 +344,7 @@ export default defineComponent({
             }
             const height = el.clientHeight
             const offsetHeight = -1 * (height / 2)
-            return [0, offsetHeight]
+            return [0, offsetHeight + 30]
         }
 
         const debouncedCalculateXAxisElOffset = computed(() => {
@@ -350,7 +364,9 @@ export default defineComponent({
             rotateXLabels,
             calculateXAxisElOffset,
             debouncedCalculateXAxisElOffset,
-            isDisposed
+            isDisposed,
+            gradationDarkColor,
+            gradationLightColor
         }
     },
     computed: {
@@ -384,7 +400,8 @@ export default defineComponent({
             return {
                 '--matrix-rows': this.matrix.length,
                 '--cell-dimensions': `${this.cellWidth}px`,
-                '--general-color': this.getCellBackground()
+                '--gradation-dark': this.gradationDarkColor,
+                '--gradation-light': this.gradationLightColor
             }
         },
         gradationValues(): number[] {
@@ -524,6 +541,12 @@ export default defineComponent({
     align-items: center;
 }
 
+.label {
+    transform: translateX(40%);
+    display: block;
+    text-align: start;
+}
+
 .label-tag {
     font-size: 0.8em;
     color: var(--dl-color-medium);
@@ -541,7 +564,7 @@ export default defineComponent({
     width: 100%;
     display: flex;
     justify-content: space-evenly;
-    margin-top: 10px;
+    margin: 10px 0px 15px 0px;
     min-height: 100px;
     max-height: 100px;
     &__element {
@@ -568,6 +591,7 @@ export default defineComponent({
 }
 .y-axis-outer {
     overflow: hidden;
+    margin-right: 10px;
     width: 200px;
 }
 .y-axis,
@@ -615,8 +639,8 @@ export default defineComponent({
     &__gradient {
         width: 40%;
         background-image: linear-gradient(
-            var(--general-color),
-            var(--dl-color-text-buttons)
+            var(--gradation-dark),
+            var(--gradation-light)
         );
     }
     &__gradation {

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -237,8 +237,8 @@ export default defineComponent({
         // todo: these can be stale data. we need to update them on schema change.
         const { hasEllipsis } = useSizeObserver(input)
         const { suggestions, error, findSuggestions } = useSuggestions(
-            schema.value,
-            aliases.value,
+            schema,
+            aliases,
             { strict }
         )
         //#endregion
@@ -465,6 +465,9 @@ export default defineComponent({
             if (!focused.value) {
                 focus()
             }
+            nextTick(() => {
+                findSuggestions('')
+            })
         }
 
         const endsWithOperator = computed(() => {

package/src/demos/DlConfusionMatrixDemo.vue

@@ -61,7 +61,13 @@ const getMatrix = (size: number) => {
 }
 
 const getLabels = (size: number) => {
-    const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
+    const items = [
+        'Van',
+        'Truck',
+        'MotorcycleLooooooooooooooooooooooooooong',
+        'Car',
+        'Bus'
+    ]
 
     // const items = [
     //     { title: 'Van', image: 'https://picsum.photos/200/200' },

package/src/hooks/use-suggestions.ts

@@ -117,20 +117,20 @@ const mergeWords = (words: string[]) => {
 }
 
 export const useSuggestions = (
-    schema: Schema,
-    aliases: Alias[],
+    schema: Ref<Schema>,
+    aliases: Ref<Alias[]>,
     options: { strict?: Ref<boolean> } = {}
 ) => {
     const { strict } = options
     const initialSuggestions = Object.keys(schema)
-    const aliasedKeys = aliases.map((alias) => alias.key)
+    const aliasedKeys = aliases.value.map((alias) => alias.key)
     const aliasedSuggestions = initialSuggestions.map((suggestion) =>
         aliasedKeys.includes(suggestion)
-            ? aliases.find((alias) => alias.key === suggestion)?.alias
+            ? aliases.value.find((alias) => alias.key === suggestion)?.alias
             : suggestion
     )
 
-    for (const alias of aliases) {
+    for (const alias of aliases.value) {
         if (aliasedSuggestions.includes(alias.alias)) {
             continue
         }
@@ -185,7 +185,11 @@ export const useSuggestions = (
                 continue
             }
 
-            const dataType = getDataType(schema, aliases, matchedField)
+            const dataType = getDataType(
+                schema.value,
+                aliases.value,
+                matchedField
+            )
             if (!dataType) {
                 localSuggestions = []
                 continue
@@ -207,7 +211,7 @@ export const useSuggestions = (
 
             if (!operator) {
                 const dotSeparated = matchedField.split('.').filter((el) => el)
-                let fieldOf = schema
+                let fieldOf = schema.value
                 for (const key of dotSeparated) {
                     fieldOf = fieldOf[key] as Schema
                 }
@@ -276,7 +280,7 @@ export const useSuggestions = (
         }
 
         error.value = input.length
-            ? getError(schema, aliases, expressions, { strict })
+            ? getError(schema.value, aliases.value, expressions, { strict })
             : null
 
         suggestions.value = localSuggestions
@@ -337,7 +341,8 @@ const getError = (
         .filter(({ field, value }) => field !== null && value !== null)
         .reduce<string | null>((acc, { field, value, operator }, _, arr) => {
             if (acc === 'warning') return acc
-            const key: string = getAliasObjByAlias(aliases, field)?.key ?? field
+            const fieldKey: string =
+                getAliasObjByAlias(aliases, field)?.key ?? field
 
             /**
              * Handle nested keys to validate if the key exists in the schema or not.
@@ -352,14 +357,31 @@ const getError = (
                 }
             }
 
-            const isValid = isInputAllowed(key, keys)
-            if (!keys.includes(key) && !isValid) {
+            function hasValidExpression(
+                arr: string[],
+                pattern: RegExp
+            ): boolean {
+                for (const item of arr) {
+                    if (pattern.test(item)) {
+                        return true
+                    }
+                }
+                return false
+            }
+
+            const pattern = new RegExp(`${fieldKey}\\.\\d`)
+            const isValid = isInputAllowed(fieldKey, keys)
+            if (
+                !keys.includes(fieldKey) &&
+                !hasValidExpression(keys, pattern) &&
+                !isValid
+            ) {
                 return strict.value ? errors.INVALID_EXPRESSION : 'warning'
             }
 
             const valid = isValidByDataType(
                 validateBracketValues(value),
-                getDataType(schema, aliases, key),
+                getDataType(schema, aliases, fieldKey),
                 operator
             )
 

package/src/hooks/use-theme.ts

@@ -1,8 +1,8 @@
 import { getRootStyles } from '../utils/getRootStyles'
-import { inject, watch, reactive } from 'vue-demi'
+import { inject, watch, reactive, Ref } from 'vue-demi'
 
 export const useThemeVariables = () => {
-    const isDark = inject('theme')
+    const isDark = inject('theme') as Ref
 
     const variables = reactive(getRootStyles())
 
@@ -14,6 +14,6 @@ export const useThemeVariables = () => {
         { deep: true }
     )
 
-    if (variables) return { variables }
+    if (variables) return { variables, isDark }
     return
 }