@dataloop-ai/components 0.17.80 → 0.17.82

package/package.json

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

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

@@ -102,6 +102,8 @@ export default defineComponent({
     --jse-background-color: var(--dl-color-tooltip-text);
     --jse-value-color-boolean: #ae6307;
     --jse-value-color-string: #337433;
+    --jse-panel-background: var(--dl-color-fill);
+    --jse-panel-border: var(--dl-color-separator);
     height: 100%;
     .jse-error {
         display: none !important;

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

@@ -230,7 +230,7 @@ import {
 } from './utils/utils'
 import { v4 } from 'uuid'
 import { parseSmartQuery, stringifySmartQuery } from '../../../../utils'
-import { debounce } from 'lodash'
+import { debounce, isEqual } from 'lodash'
 
 export default defineComponent({
     components: {
@@ -376,9 +376,12 @@ export default defineComponent({
         }
 
         const modelRef: any = toRef(props, 'modelValue')
-
         watch(modelRef, (val: any) => {
             if (val) {
+                const currModel = parseSmartQuery(activeQuery.value.query)
+                if (isEqual(val, currModel)) {
+                    return
+                }
                 const stringQuery = stringifySmartQuery(val)
                 debouncedInputModel(stringQuery)
             }

package/src/demos/DlJsonEditorDemo.vue

@@ -26,7 +26,7 @@
                 />
             </template>
             <template #body>
-                <div style="height: 200px">
+                <div style="height: 350px">
                     <dl-json-editor v-model="dialogJsonModel" />
                 </div>
             </template>

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -12,6 +12,12 @@
                 label="Strict"
             />
         </div>
+        <dl-input
+            v-model="textQuery"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+        />
         <div
             style="width: 100px"
             class="props"
@@ -35,14 +41,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlSmartSearch, DlCheckbox } from '../../components'
+import { DlSmartSearch, DlCheckbox, DlInput } from '../../components'
 import { Query } from '../../components/types'
+import { parseSmartQuery } from '../../utils'
 
 export default defineComponent({
     name: 'DlSmartSearchDemo',
     components: {
         DlSmartSearch,
-        DlCheckbox
+        DlCheckbox,
+        DlInput
     },
     data() {
         const schema: any = {
@@ -98,6 +106,7 @@ export default defineComponent({
             strictState: false,
             isLoading: false,
             queryObject: {},
+            textQuery: '',
             filters: {
                 saved: [
                     {
@@ -122,6 +131,11 @@ export default defineComponent({
             } as { [key: string]: Query[] }
         }
     },
+    watch: {
+        textQuery(query: string) {
+            this.queryObject = parseSmartQuery(query)
+        }
+    },
     methods: {
         handleSearchQuery(query: Query, queryString: string) {
             this.isLoading = true

package/src/hooks/use-suggestions.ts

@@ -150,6 +150,14 @@ export const useSuggestions = (
                 continue
             }
 
+            if (operator && (!value || value === '')) {
+                const valueSuggestion = getValueSuggestions(dataType, operator)
+                if (valueSuggestion) {
+                    localSuggestions = valueSuggestion
+                    continue
+                }
+            }
+
             const ops: string[] = Array.isArray(dataType)
                 ? getGenericOperators()
                 : getOperatorByDataType(dataType)
@@ -480,3 +488,37 @@ export const removeBrackets = (str: string) => {
 const removeQuotes = (str: string) => {
     return str.replaceAll('"', '').replaceAll("'", '')
 }
+
+const getValueSuggestions = (dataType: string | string[], operator: string) => {
+    const types: string[] = Array.isArray(dataType) ? dataType : [dataType]
+    const suggestion: string[] = []
+
+    if (Array.isArray(dataType)) {
+        suggestion.push(
+            ...dataType.filter((type) => !knownDataTypes.includes(type))
+        )
+    }
+
+    for (const type of types) {
+        switch (type) {
+            case 'boolean':
+                if (operator === '=' || operator === '!=') {
+                    suggestion.push('true', 'false')
+                }
+                break
+            case 'date':
+            case 'time':
+            case 'datetime':
+                suggestion.push(
+                    dateIntervalSuggestionString,
+                    dateStartSuggestionString,
+                    dateEndSuggestionString
+                )
+            default:
+                // do nothing
+                break
+        }
+    }
+
+    return suggestion
+}

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

@@ -3,6 +3,10 @@
 import { isBoolean, isFinite, isNumber, isObject, isString } from 'lodash'
 
 const GeneratePureValue = (value: any) => {
+    if (value === '') {
+        return null
+    }
+
     if (typeof value === 'string') {
         if (value === 'true') {
             return true
@@ -40,32 +44,59 @@ export const parseSmartQuery = (query: string) => {
 
         let key: string
         let value: string | number | object
+        let pureValue:
+            | string
+            | number
+            | object
+            | boolean
+            | null
+            | (string | number | object | boolean)[]
 
         for (const term of andTerms) {
+            pureValue = null
+
             switch (true) {
                 case term.includes('>='):
                     [key, value] = term.split('>=').map((x) => x.trim())
-                    andQuery[key] = { $gte: GeneratePureValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue) {
+                        andQuery[key] = { $gte: pureValue }
+                    }
                     break
                 case term.includes('<='):
                     [key, value] = term.split('<=').map((x) => x.trim())
-                    andQuery[key] = { $lte: GeneratePureValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue) {
+                        andQuery[key] = { $lte: pureValue }
+                    }
                     break
                 case term.includes('>'):
                     [key, value] = term.split('>').map((x) => x.trim())
-                    andQuery[key] = { $gt: GeneratePureValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue) {
+                        andQuery[key] = { $gt: pureValue }
+                    }
                     break
                 case term.includes('<'):
                     [key, value] = term.split('<').map((x) => x.trim())
-                    andQuery[key] = { $lt: GeneratePureValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue) {
+                        andQuery[key] = { $lt: pureValue }
+                    }
                     break
                 case term.includes('!='):
                     [key, value] = term.split('!=').map((x) => x.trim())
-                    andQuery[key] = { $ne: GeneratePureValue(value) }
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue) {
+                        andQuery[key] = { $ne: pureValue }
+                    }
                     break
                 case term.includes('='):
                     [key, value] = term.split('=').map((x) => x.trim())
-                    andQuery[key] = GeneratePureValue(value)
+                    pureValue = GeneratePureValue(value)
+                    if (pureValue) {
+                        andQuery[key] = pureValue
+                    }
                     break
                 case term.includes('IN'):
                     [key, value] = term.split('IN').map((x) => x.trim())
@@ -78,14 +109,24 @@ export const parseSmartQuery = (query: string) => {
                             .map((x) => x.trim())[1]
                             .split(',')
                             .map((x) => GeneratePureValue(x.trim()))
-                        andQuery[key] = { $nin: GeneratePureValue(queryValue) }
+                            .filter((x) => x)
+
+                        pureValue = GeneratePureValue(queryValue)
+                        if (pureValue && Array.isArray(pureValue)) {
+                            andQuery[key] = { $nin: pureValue }
+                        }
                     } else {
                         queryValue = term
                             .split('IN')
                             .map((x) => x.trim())[1]
                             .split(',')
                             .map((x) => GeneratePureValue(x.trim()))
-                        andQuery[key] = { $in: GeneratePureValue(queryValue) }
+                            .filter((x) => x)
+
+                        pureValue = GeneratePureValue(queryValue)
+                        if (pureValue && Array.isArray(pureValue)) {
+                            andQuery[key] = { $in: pureValue }
+                        }
                     }
                     break
             }