@dataloop-ai/components 0.18.122 → 0.18.124

package/package.json

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

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

@@ -64,7 +64,8 @@
         </div>
         <dl-smart-search-json-editor-dialog
             v-model="showJSONEditor"
-            :json="stringifiedJSON"
+            :json="modelValue"
+            :options="selectOptions"
             @search="handleJSONSearch"
             @change="handleJSONChange"
         />
@@ -75,7 +76,7 @@ import { defineComponent, PropType, ref, computed, toRefs } from 'vue-demi'
 import { DlButton } from '../../../basic'
 import { DlSmartSearchInput, DlSmartSearchJsonEditorDialog } from './components'
 import { Schema, Alias } from '../../../../hooks/use-suggestions'
-import { Filters, ColorSchema, SearchStatus } from './types'
+import { ColorSchema, SearchStatus, DlSmartSearchFilter } from './types'
 import { v4 } from 'uuid'
 import { stateManager } from '../../../../StateManager'
 
@@ -115,8 +116,8 @@ export default defineComponent({
             })
         },
         filters: {
-            type: Object as PropType<Filters>,
-            default: () => ({} as Filters)
+            type: Array as PropType<DlSmartSearchFilter[]>,
+            default: () => [] as DlSmartSearchFilter[]
         },
         disabled: {
             type: Boolean,
@@ -179,8 +180,6 @@ export default defineComponent({
         //#endregion
 
         //#region computed
-        const stringifiedJSON = computed(() => JSON.stringify(modelValue.value))
-
         const cssVars = computed(() => ({
             '--dl-smart-search-max-width': isFocused.value
                 ? '100%'
@@ -196,24 +195,9 @@ export default defineComponent({
             }
         })
 
-        const selectedOptions = computed(() => {
-            const options: Record<string, string>[] = [
-                {
-                    label: 'New Query',
-                    value: '{}'
-                }
-            ]
-
-            const queryFilters = filters.value?.saved ?? []
-            for (const filter of queryFilters) {
-                options.push({
-                    label: filter.name,
-                    value: filter.query
-                })
-            }
-
-            return options
-        })
+        const selectOptions = computed<DlSmartSearchFilter[]>(
+            () => filters.value ?? []
+        )
         //#endregion
 
         //#region methods
@@ -271,10 +255,9 @@ export default defineComponent({
             preventUpdate,
             selectedOption,
             cssVars,
-            selectedOptions,
+            selectOptions,
             emitSearchQuery,
             showJSONEditor,
-            stringifiedJSON,
             handleJSONSearch,
             handleJSONChange
         }

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

@@ -1,5 +1,4 @@
 <template>
-    <!-- todo: Add support for saved queries-->
     <div>
         <dl-dialog-box
             v-model="isOpen"
@@ -21,10 +20,9 @@
                         style="margin-bottom: 10px"
                     >
                         <dl-select
-                            disabled
                             :model-value="selectedOption"
                             width="200px"
-                            :options="options"
+                            :options="selectOptions"
                             placeholder="New Query"
                             @update:model-value="onQuerySelect"
                         />
@@ -48,7 +46,7 @@
             <template #footer>
                 <div class="json-editor-footer">
                     <dl-button
-                        :disabled="true || canDelete"
+                        :disabled="!hasActiveFilter"
                         icon="icon-dl-delete"
                         label="Delete Query"
                         flat
@@ -58,15 +56,18 @@
                     />
                     <div class="json-editor-footer-actions">
                         <dl-button
-                            disabled
                             style="margin-right: 14px"
                             outlined
                             label="Save As"
                             @click="showSaveDialog = true"
                         />
                         <dl-button
-                            label="Search"
-                            @click="search"
+                            :label="
+                                hasActiveFilter ? 'Save & Search' : 'Search'
+                            "
+                            @click="
+                                () => (hasActiveFilter ? saveQuery() : search())
+                            "
                         />
                     </div>
                 </div>
@@ -97,6 +98,7 @@
                     <dl-button
                         :disabled="!newQueryName"
                         outlined
+                        style="margin-right: 5px"
                         @click="saveQuery"
                     >
                         Save
@@ -124,7 +126,8 @@
                     size="h3"
                     style="display: flex; justify-content: center"
                 >
-                    Are you sure you want to delete {{ selectedOption.label }}?
+                    Are you sure you want to delete
+                    {{ selectedOption.label }}?
                 </dl-typography>
             </template>
             <template #footer>
@@ -146,8 +149,6 @@ import {
     toRefs,
     computed,
     nextTick,
-    onMounted,
-    getCurrentInstance,
     watch
 } from 'vue-demi'
 import { DlSelect } from '../../../DlSelect'
@@ -158,8 +159,8 @@ import { DlJsonEditor } from '../../../DlJsonEditor'
 import { DlTypography } from '../../../../essential'
 import { DlInput } from '../../../DlInput'
 import { stateManager } from '../../../../../StateManager'
-import { isEqual } from 'lodash'
-import { registerToWindow } from '../../../../../utils'
+import { cloneDeep, isEqual, uniqBy } from 'lodash'
+import { DlSmartSearchFilter } from '../types'
 
 export default defineComponent({
     components: {
@@ -183,44 +184,105 @@ export default defineComponent({
         },
         json: {
             required: true,
-            type: String
+            type: Object as PropType<Record<string, any>>
         },
         options: {
             required: false,
             type: Array as PropType<DlSelectOption[]>,
             default: () => [] as DlSelectOption[]
+        },
+        selectedFilter: {
+            required: false,
+            type: String,
+            default: null
         }
     },
-    emits: ['update:modelValue', 'search', 'change', 'update:options'],
+    emits: [
+        'update:modelValue',
+        'search',
+        'change',
+        'update:options',
+        'save',
+        'delete',
+        'select'
+    ],
     setup(props, { emit }) {
-        const { modelValue, options, json } = toRefs(props)
+        const { modelValue, options, json, selectedFilter } = toRefs(props)
 
         const isOpen = computed({
             get: () => modelValue.value,
             set: (val) => emit('update:modelValue', val)
         })
 
+        const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
         const jsonEditor = ref<any>(null)
         const showSaveDialog = ref(false)
         const showDeleteDialog = ref(false)
-        const stringifiedJSON = ref(json.value)
         const newQueryName = ref('')
+
+        const selectOptions = computed<DlSelectOption[]>(() => {
+            return uniqBy(
+                [
+                    {
+                        label: 'New Query',
+                        value: cloneDeep(json.value ?? {})
+                    }
+                ].concat(options.value),
+                'label'
+            )
+        })
         const selectedOption = ref<DlSelectOption>(
-            options.value.find((o) => isEqual(o.value, json.value)) ?? {
+            options.value.find((o) => isEqual(o.value, currentQuery.value)) ?? {
                 label: 'New Query',
-                value: json.value
+                value: currentQuery.value
             }
         )
 
+        watch(
+            selectedFilter,
+            () => {
+                selectedOption.value = options.value.find(
+                    (o) => o.label === selectedFilter.value
+                ) ?? {
+                    label: 'New Query',
+                    value: currentQuery.value
+                }
+
+                if (selectedOption.value.label !== 'New Query') {
+                    currentQuery.value = cloneDeep(selectedOption.value.value)
+                }
+            },
+            { immediate: true }
+        )
+
         const alignJSON = () => {
-            jsonEditor.value.format()
+            jsonEditor.value?.format()
         }
 
         const onQuerySelect = (option: DlSelectOption) => {
-            selectedOption.value = option
-            stringifiedJSON.value = option.value
+            if (option.label === selectedOption.value.label) {
+                return
+            }
+
+            selectedOption.value = cloneDeep(option)
+            currentQuery.value = cloneDeep(option.value)
+            nextTick(() => {
+                alignJSON()
+                // wtf oa ?
+                nextTick(() => {
+                    alignJSON()
+                })
+            })
+            emit('select', option)
         }
 
+        const stringifiedJSON = computed<string>({
+            get: () => JSON.stringify(currentQuery.value),
+            set: (val) => {
+                currentQuery.value = toObject(val)
+            }
+        })
+
         const toObject = (json: string) => {
             try {
                 return JSON.parse(json)
@@ -231,9 +293,8 @@ export default defineComponent({
         }
 
         const search = () => {
-            const parsed = toObject(stringifiedJSON.value)
-            if (!parsed) return
-            emit('search', parsed)
+            if (!currentQuery.value) return
+            emit('search', currentQuery.value)
             isOpen.value = false
         }
 
@@ -244,16 +305,23 @@ export default defineComponent({
         }
 
         const saveQuery = (searchAfterSave = false) => {
-            const newOptions = options.value.concat([
-                {
-                    label: newQueryName.value,
-                    value: stringifiedJSON.value
-                }
-            ])
+            let toSave: DlSmartSearchFilter = hasActiveFilter.value
+                ? selectedOption.value
+                : ({} as DlSmartSearchFilter)
+            toSave = Object.assign({}, toSave, {
+                label: hasActiveFilter.value
+                    ? selectedOption.value.label
+                    : newQueryName.value,
+                value: currentQuery.value
+            })
+
+            const newOptions = options.value.concat([toSave])
 
+            emit('save', toSave)
             emit('update:options', newOptions)
 
             showSaveDialog.value = false
+            newQueryName.value = ''
             nextTick(() => {
                 if (searchAfterSave) {
                     search()
@@ -261,25 +329,38 @@ export default defineComponent({
             })
         }
 
-        const canDelete = computed(
+        const hasActiveFilter = computed(
             () => selectedOption.value.label !== 'New Query'
         )
 
         const deleteQuery = () => {
+            const toDelete = options.value.find(
+                (o: DlSelectOption) => o.label === selectedOption.value.label
+            )
             const newOptions = options.value.filter(
-                (o: DlSelectOption) => o.value !== selectedOption.value.label
+                (o: DlSelectOption) => o.label !== selectedOption.value.label
             )
 
+            emit('delete', toDelete)
             emit('update:options', newOptions)
             selectedOption.value = {
                 label: 'New Query',
-                value: '{}'
+                value: {}
             }
+            currentQuery.value = {}
             showDeleteDialog.value = false
         }
 
         watch(json, () => {
-            stringifiedJSON.value = json.value
+            currentQuery.value = cloneDeep(json.value)
+            nextTick(() => {
+                alignJSON()
+            })
+        })
+        watch(isOpen, () => {
+            nextTick(() => {
+                alignJSON()
+            })
         })
 
         return {
@@ -288,11 +369,12 @@ export default defineComponent({
             showSaveDialog,
             stringifiedJSON,
             selectedOption,
-            canDelete,
+            hasActiveFilter,
             alignJSON,
             onQuerySelect,
             newQueryName,
             showDeleteDialog,
+            selectOptions,
             search,
             onChange,
             saveQuery,

package/src/components/compound/DlSearches/DlSmartSearch/index.ts

@@ -1,4 +1,4 @@
-import { DlSmartSearchInput } from './components'
+import { DlSmartSearchInput, DlSmartSearchJsonEditorDialog } from './components'
 import DlSmartSearch from './DlSmartSearch.vue'
 
-export { DlSmartSearch, DlSmartSearchInput }
+export { DlSmartSearch, DlSmartSearchInput, DlSmartSearchJsonEditorDialog }

package/src/components/compound/DlSearches/DlSmartSearch/types.ts

@@ -50,12 +50,14 @@ import {
     Alias as DlSmartSearchAlias,
     Schema as DlSmartSearchSchema
 } from '../../../../hooks/use-suggestions'
+import { DlSelectOption } from '../../types'
 
-type DlSmartSearchFilters = Filters & { [key: string]: any }
+// type DlSmartSearchFilters = Filters & { [key: string]: any }
+type DlSmartSearchFilter = DlSelectOption
 
 export type {
     DlSmartSearchAlias,
     DlSmartSearchSchema,
     ColorSchema as DlSmartSearchColorSchema,
-    DlSmartSearchFilters
+    DlSmartSearchFilter
 }

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

@@ -740,10 +740,7 @@ export default defineComponent({
 
             this.selectedIndex = this.options.findIndex(
                 (option: string | Record<string, string | number> | number) =>
-                    isEqual(
-                        (option as any).value,
-                        (this.modelValue as any).value
-                    )
+                    isEqual(option, this.modelValue)
             )
         },
         getOptionValue(option: any) {

package/src/components/essential/DlLabel/DlLabel.vue

@@ -200,7 +200,7 @@ export default defineComponent({
     &__content {
         color: var(--dl-label-text-color);
         display: flex;
-        width: 95%;
+        width: 100%;
     }
     &__text {
         overflow: hidden;

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -100,7 +100,7 @@ import {
     DlCheckbox,
     DlInput
 } from '../../components'
-import { DlSmartSearchFilters, Query } from '../../components/types'
+import { DlSmartSearchFilter, Query } from '../../components/types'
 import { parseSmartQuery } from '../../utils'
 
 export default defineComponent({
@@ -195,29 +195,47 @@ export default defineComponent({
                 key: 'metadata.system.width'
             }
         ]
+        const filters: DlSmartSearchFilter[] = [
+            {
+                label: 'Query 1',
+                value: { q: 1 }
+            },
+            {
+                label: 'Query 2',
+                value: { query2: 'query2' }
+            },
+            {
+                label: 'Query 3',
+                value: { query3: 'query3' }
+            },
+            {
+                label: 'Query 4',
+                value: { age: 12, name: 'john' }
+            }
+        ]
 
-        const filters: DlSmartSearchFilters = {
-            saved: [
-                {
-                    name: 'Query 1',
-                    query: '{"q": 1}'
-                },
-                {
-                    name: 'Query 2',
-                    query: '{"query2": "query2"}'
-                },
-                {
-                    name: 'Query 3',
-                    query: '{"query3": "query3"}'
-                },
-                {
-                    name: 'Query 4',
-                    query: '{"age": 12, "name": "john"}'
-                }
-            ],
-            recent: [],
-            suggested: []
-        }
+        // const filters: DlSmartSearchFilters = {
+        //     saved: [
+        //         {
+        //             name: 'Query 1',
+        //             query: {"q": 1}
+        //         },
+        //         {
+        //             name: 'Query 2',
+        //             query: {"query2": "query2"}
+        //         },
+        //         {
+        //             name: 'Query 3',
+        //             query: {"query3": "query3"}
+        //         },
+        //         {
+        //             name: 'Query 4',
+        //             query: {"age": 12, "name": "john"}
+        //         }
+        //     ],
+        //     recent: [],
+        //     suggested: []
+        // }
 
         return {
             schema,
@@ -249,27 +267,33 @@ export default defineComponent({
                 this.isLoading = false
             }, 2000)
 
-            if (this.filters.recent[-1]?.name !== queryString) {
-                this.filters.recent.push({
-                    name: queryString || query.name,
-                    query: query.query
-                })
-            }
+            // if (this.filters.recent[-1]?.name !== queryString) {
+            //     this.filters.recent.push({
+            //         name: queryString || query.name,
+            //         query: query.query
+            //     })
+            // }
         },
-        handleSaveQuery(query: Query, type: string) {
-            const saveQueryIndex = this.filters[type].findIndex(
-                (q: Query) => q.name === query.name || q.query === query.query
-            )
-            if (saveQueryIndex !== -1) {
-                this.filters[type][saveQueryIndex] = query
-            } else {
-                this.filters[type].push(query)
-            }
+        // handleSaveQuery(query: Query, type: string) {
+        //     const saveQueryIndex = this.filters[type].findIndex(
+        //         (q: Query) => q.name === query.name || q.query === query.query
+        //     )
+        //     if (saveQueryIndex !== -1) {
+        //         this.filters[type][saveQueryIndex] = query
+        //     } else {
+        //         this.filters[type].push(query)
+        //     }
+        // },
+        // handleRemoveQuery(query: Query, type: string) {
+        //     this.filters[type] = this.filters[type].filter(
+        //         (q: Query) => q.name !== query.name
+        //     )
+        // },
+        handleSaveQuery(query: DlSmartSearchFilter) {
+            this.filters.push(query)
         },
-        handleRemoveQuery(query: Query, type: string) {
-            this.filters[type] = this.filters[type].filter(
-                (q: Query) => q.name !== query.name
-            )
+        handleRemoveQuery(query: DlSmartSearchFilter) {
+            this.filters = this.filters.filter((q) => q.label !== q.label)
         },
         onSearchEmitted(query: Query) {
             this.searchEmitted++