@dataloop-ai/components 0.18.70 → 0.18.72

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

@@ -1,6 +1,5 @@
 <template>
     <div
-        :class="identifierClass"
         class="dl-smart-search"
         :style="cssVars"
     >
@@ -10,21 +9,15 @@
         >
             <dl-smart-search-input
                 ref="smartSearchInput"
-                :status="computedStatus"
-                :style-model="defineStyleModel"
-                :with-save-button="true"
-                :with-search-icon="true"
-                :with-screen-button="true"
-                :disabled="disabled"
-                :model-value="inputModel"
-                :expanded-input-height="expandedInputHeight"
-                :suggestions="suggestions"
-                :search-bar-width="searchBarWidth"
-                :default-width="width"
-                @save="saveQueryDialogBoxModel = true"
-                @focus="setFocused"
-                @update:model-value="debouncedInputModel"
-                @dql-edit="jsonEditorModel = !jsonEditorModel"
+                v-model="queryObject"
+                style="margin-bottom: 0px"
+                :status="status"
+                :aliases="aliases"
+                :schema="schema"
+                :color-schema="colorSchema"
+                :strict="strict"
+                @focus="isFocused = true"
+                @blur="isFocused = false"
             />
         </div>
         <div class="dl-smart-search__buttons">
@@ -35,7 +28,7 @@
                         class="dl-smart-search__search-btn-wrapper"
                     >
                         <dl-button
-                            icon="icon-dl-search"
+                            label="Search"
                             :styles="{
                                 height: '28px'
                             }"
@@ -43,222 +36,51 @@
                             @click="emitSearchQuery"
                         />
                     </div>
-
-                    <slot name="extra-actions" />
-
-                    <dl-button
-                        class="dl-smart-search__buttons--filters"
-                        shaded
-                        outlined
-                        size="s"
+                    <div
+                        style="height: 28px"
+                        class="dl-smart-search__search-btn-wrapper"
                     >
-                        Saved Filters
-                        <dl-menu
-                            v-model="filtersModel"
-                            :offset="[0, 5]"
-                            anchor="bottom middle"
-                            self="top middle"
-                        >
-                            <dl-smart-search-filters
-                                :filters="filters"
-                                @filters-select="handleFiltersSelect"
-                                @filters-delete="handleFiltersDelete"
-                            />
-                        </dl-menu>
-                    </dl-button>
-                </div>
-            </slot>
-        </div>
-        <dl-dialog-box
-            v-model="jsonEditorModel"
-            :height="500"
-            :width="800"
-            style="--dl-dialog-box-footer-padding: 10px 16px"
-        >
-            <template #header>
-                <dl-dialog-box-header
-                    title="DQL Search"
-                    :close-button="true"
-                    style="font-weight: 200"
-                    @onClose="handleJsonEditorClose"
-                />
-            </template>
-            <template #body>
-                <div class="json-editor-layout">
-                    <div class="json-query">
-                        <div class="json-query-menu">
-                            <dl-select
-                                :model-value="selectedOption"
-                                width="200px"
-                                :options="selectOptions"
-                                placeholder="New Query"
-                                @update:model-value="updateActiveQuery"
-                            />
-                            <dl-button
-                                icon="icon-dl-align-left"
-                                label="Align Left"
-                                flat
-                                color="secondary"
-                                padding="0px 3px"
-                                @click="alignJsonText"
-                            />
-                        </div>
-                        <dl-json-editor
-                            v-model="jsonEditorQuery"
-                            :prevent-update="preventUpdate"
-                            @update-prevent="(val) => (preventUpdate = val)"
-                            @align-text="alignJsonText"
-                        />
-                    </div>
-                </div>
-            </template>
-            <template #footer>
-                <div class="json-editor__footer-menu">
-                    <div class="json-editor__footer-delete">
                         <dl-button
-                            :disabled="deleteButtonState"
-                            icon="icon-dl-delete"
-                            label="Delete Query"
+                            label="DQL Editor"
+                            :styles="{
+                                height: '28px',
+                                'min-width': 'max-content'
+                            }"
+                            :disabled="disabled"
                             flat
-                            color="secondary"
-                            padding="0"
-                            @click="handleQueryRemove"
-                        />
-                    </div>
-                    <div class="json-editor__footer-save">
-                        <dl-button
-                            style="margin-right: 14px"
-                            outlined
-                            label="Save As"
-                            @click="saveQueryDialogBoxModel = true"
-                        />
-                        <dl-button
-                            label="Search"
-                            @click="handleJsonSearchButton"
+                            text-color="var(--dl-color-darker)"
+                            color="var(--dl-color-darker)"
+                            @click="showJSONEditor = true"
                         />
                     </div>
-                </div>
-            </template>
-        </dl-dialog-box>
 
-        <dl-dialog-box v-model="removeQueryDialogBoxModel">
-            <template #header>
-                <dl-dialog-box-header
-                    title="Delete Query"
-                    @onClose="removeQueryDialogBoxModel = false"
-                />
-            </template>
-            <template #body>
-                <dl-typography
-                    size="h3"
-                    style="display: flex; justify-content: center"
-                >
-                    Are you sure you want to delete {{ activeQuery.name }}?
-                </dl-typography>
-            </template>
-            <template #footer>
-                <div class="full-width flex justify-end">
-                    <dl-button @click="emitRemoveQuery">
-                        Delete
-                    </dl-button>
-                </div>
-            </template>
-        </dl-dialog-box>
-        <dl-dialog-box
-            v-model="saveQueryDialogBoxModel"
-            style="--dl-dialog-box-footer-padding: 14px 17px"
-        >
-            <template #header>
-                <dl-dialog-box-header
-                    title="Save Query"
-                    @onClose="saveQueryDialogBoxModel = false"
-                />
-            </template>
-            <template #body>
-                <dl-input
-                    v-model="newQueryName"
-                    title="Query name"
-                    style="text-align: center"
-                    placeholder="Type query name"
-                />
-            </template>
-            <template #footer>
-                <div class="dl-smart-search__buttons--save">
-                    <dl-button
-                        :disabled="!newQueryName"
-                        outlined
-                        @click="handleSaveQuery"
-                    >
-                        Save
-                    </dl-button>
-                    <dl-button
-                        :disabled="!newQueryName"
-                        @click="handleSaveQuery(true)"
-                    >
-                        Save and Search
-                    </dl-button>
+                    <slot name="extra-actions" />
                 </div>
-            </template>
-        </dl-dialog-box>
+            </slot>
+        </div>
+        <dl-smart-search-json-editor-dialog
+            v-model="showJSONEditor"
+            :json="stringifiedJSON"
+            @search="emitSearchQuery"
+            @change="handleJSONChange"
+        />
+        <!-- todo: Add support for saved queries-->
     </div>
 </template>
 <script lang="ts">
-import {
-    defineComponent,
-    PropType,
-    ref,
-    nextTick,
-    toRef,
-    onMounted,
-    watch,
-    computed
-} from 'vue-demi'
-import { DlTypography, DlMenu } from '../../../essential'
+import { defineComponent, PropType, ref, computed, toRefs } from 'vue-demi'
 import { DlButton } from '../../../basic'
-import { DlSelect } from '../../DlSelect'
-import { DlInput } from '../../DlInput'
-import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
-import { DlJsonEditor } from '../../DlJsonEditor'
-
-import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
-import DlSmartSearchFilters from './components/DlSmartSearchFilters.vue'
-
-import {
-    useSuggestions,
-    Schema,
-    Alias,
-    removeBrackets
-} from '../../../../hooks/use-suggestions'
-import {
-    Filters,
-    Query,
-    ColorSchema,
-    SearchStatus,
-    SyntaxColorSchema
-} from './types'
-import {
-    revertAliases,
-    setAliases,
-    replaceStringifiedDatesWithJSDates,
-    createColorSchema,
-    replaceJSDatesWithStringifiedDates
-} from './utils'
+import { DlSmartSearchInput, DlSmartSearchJsonEditorDialog } from './components'
+import { Schema, Alias } from '../../../../hooks/use-suggestions'
+import { Filters, ColorSchema, SearchStatus } from './types'
 import { v4 } from 'uuid'
-import { parseSmartQuery, stringifySmartQuery } from '../../../../utils'
-import { debounce, isEqual } from 'lodash'
+import { stateManager } from '../../../../StateManager'
 
 export default defineComponent({
     components: {
         DlSmartSearchInput,
-        DlDialogBox,
-        DlDialogBoxHeader,
-        DlJsonEditor,
-        DlButton,
-        DlTypography,
-        DlInput,
-        DlSmartSearchFilters,
-        DlMenu,
-        DlSelect
+        DlSmartSearchJsonEditorDialog,
+        DlButton
     },
     model: {
         prop: 'modelValue',
@@ -289,18 +111,6 @@ export default defineComponent({
                 keywords: 'var(--dl-color-medium)'
             })
         },
-        isLoading: {
-            type: Boolean,
-            default: false
-        },
-        expandedInputHeight: {
-            type: String,
-            default: '327px'
-        },
-        savedFilterKey: {
-            type: String,
-            default: 'saved'
-        },
         filters: {
             type: Object as PropType<Filters>,
             default: () => ({} as Filters)
@@ -311,7 +121,7 @@ export default defineComponent({
         },
         width: {
             type: String,
-            default: '450px'
+            default: '250px'
         },
         /**
          * If true, the validation will be a closed set based on the schema provided
@@ -323,8 +133,14 @@ export default defineComponent({
     },
     emits: ['save-query', 'remove-query', 'search-query', 'update:model-value'],
     setup(props, { emit }) {
+        //#region props
+        const { modelValue, filters, width } = toRefs(props)
+        //#endregion
+
+        //#region data
         const inputModel = ref('')
         const jsonEditorModel = ref(false)
+        const showJSONEditor = ref(false)
         const searchBarWidth = ref('100%')
 
         const activeQuery = ref({
@@ -346,127 +162,86 @@ export default defineComponent({
             label: 'New Query',
             value: ''
         })
-
-        const strictRef = toRef(props, 'strict')
-
-        const { suggestions, error, findSuggestions } = useSuggestions(
-            props.schema,
-            props.aliases,
-            { strict: strictRef }
-        )
-
-        const handleInputModel = (value: string) => {
-            const aliased = setAliases(value, props.aliases)
-            inputModel.value = aliased
-            const bracketless = removeBrackets(value)
-            const cleanedAliases = revertAliases(bracketless, props.aliases)
-            const json = toJSON(cleanedAliases)
-            if (!isEqual(json, props.modelValue)) {
-                emit('update:model-value', json)
+        //#endregion
+
+        //#region computed
+        const stringifiedJSON = computed(() => JSON.stringify(modelValue.value))
+
+        const cssVars = computed(() => ({
+            '--dl-smart-search-max-width': isFocused.value
+                ? '100%'
+                : width.value
+        }))
+
+        const queryObject = computed({
+            get() {
+                return modelValue.value
+            },
+            set(val) {
+                emit('update:model-value', val)
             }
-            const stringified = JSON.stringify(json)
-            activeQuery.value.query = stringified
-            nextTick(() => {
-                findSuggestions(aliased)
-            })
-            isQuerying.value = false
-            oldInputQuery.value = aliased
-        }
+        })
 
-        const debouncedInputModel = debounce(handleInputModel, 300)
+        const selectedOptions = computed(() => {
+            const options: Record<string, string>[] = [
+                {
+                    label: 'New Query',
+                    value: '{}'
+                }
+            ]
 
-        const isValidJSON = (item: string | Object): boolean => {
-            let value = typeof item !== 'string' ? JSON.stringify(item) : item
-            try {
-                value = JSON.parse(value)
-            } catch (e) {
-                return false
+            const queryFilters = filters.value?.saved ?? []
+            for (const filter of queryFilters) {
+                options.push({
+                    label: filter.name,
+                    value: filter.query
+                })
             }
 
-            return typeof value === 'object' && value !== null
-        }
-
-        const toJSON = (value: string) => {
-            const json = parseSmartQuery(
-                replaceStringifiedDatesWithJSDates(value) ?? inputModel.value
-            )
-
-            return isValidJSON(json) ? json : inputModel.value
-        }
-
-        const schemaRef = toRef(props, 'schema')
-        const dateKeys = computed(() => {
-            return Object.keys(schemaRef.value).filter(
-                (key) => schemaRef.value[key] === 'date'
-            )
+            return options
         })
+        //#endregion
 
-        const fromJSON = (value: { [key: string]: any }) => {
-            const replacedDate = replaceJSDatesWithStringifiedDates(
-                value,
-                dateKeys.value
-            )
-
-            const stringQuery = stringifySmartQuery(replacedDate)
-            const aliased = setAliases(stringQuery, props.aliases)
-            return aliased
-        }
-
-        const setFocused = (value: boolean) => {
-            isFocused.value = value
-            findSuggestions(inputModel.value)
-
-            if (value) {
-                inputModel.value = oldInputQuery.value
-                isQuerying.value = false
+        //#region methods
+        const toObject = (query: string) => {
+            if (typeof query !== 'string') {
+                return query
             }
-            if (!value && !error) {
-                toJSON(inputModel.value)
-            }
-        }
 
-        const readModelValue = (val: { [key: string]: any }) => {
-            if (val) {
-                const currModel = JSON.parse(
-                    activeQuery.value.query && activeQuery.value.query.length
-                        ? activeQuery.value.query
-                        : '{}'
+            try {
+                return JSON.parse(query)
+            } catch (e) {
+                stateManager.logger.warn(
+                    'DlSmartSearch - Invalid JSON in DQL Editor',
+                    e
                 )
-
-                if (isEqual(val, currModel)) {
-                    return
-                }
-
-                const aliased = fromJSON(val)
-
-                if (aliased !== inputModel.value.trim()) {
-                    debouncedInputModel(aliased)
-                }
+                return null
             }
         }
 
-        const modelRef = toRef(props, 'modelValue')
-
-        watch(modelRef, (val: any) => {
-            readModelValue(val)
-        })
+        const emitSearchQuery = (query: string) => {
+            const json = toObject(query)
+            if (!json) return
+            queryObject.value = json
+            emit('search-query', json)
+        }
 
-        onMounted(() => {
-            if (props.modelValue) {
-                readModelValue(props.modelValue)
-            }
-        })
+        const handleJSONChange = (val: string) => {
+            const json = toObject(val)
+            if (!json) return
+            queryObject.value = json
+        }
+        //#endregion
 
         return {
             uuid: `dl-smart-search-${v4()}`,
+            queryObject,
             inputModel,
             jsonEditorModel,
             activeQuery,
             filtersModel,
             removeQueryDialogBoxModel,
             saveQueryDialogBoxModel,
-            suggestions,
-            error,
             newQueryName,
             isFocused,
             isQuerying,
@@ -477,211 +252,12 @@ export default defineComponent({
             newQuery,
             preventUpdate,
             selectedOption,
-            handleInputModel,
-            debouncedInputModel,
-            setFocused,
-            findSuggestions,
-            toJSON,
-            fromJSON
-        }
-    },
-    computed: {
-        identifierClass(): string {
-            return `dl-smart-search`
-        },
-        cssVars(): Record<string, string> {
-            return {
-                '--dl-search-max-width': this.isFocused ? '100%' : this.width
-            }
-        },
-        defineStyleModel(): SyntaxColorSchema {
-            return createColorSchema(this.colorSchema, this.aliases)
-        },
-        computedStatus(): SearchStatus {
-            if (this.isQuerying) return
-            if (!this.error && this.inputModel !== '') {
-                return {
-                    type: 'success',
-                    message: ''
-                }
-            } else if (this.error === 'warning') {
-                return {
-                    type: 'warning',
-                    message: 'The query is not supported technically.'
-                }
-            } else if (this.inputModel === '') {
-                return this.status
-            }
-            return {
-                type: 'error',
-                message: this.error
-            }
-        },
-        stringQuery(): string {
-            return this.isQuerying || this.inputModel === ''
-                ? this.activeQuery.name
-                : this.inputModel
-        },
-        deleteButtonState(): boolean {
-            return !this.filters?.saved?.filter(
-                (q: Query) => q.name === this.activeQuery?.name
-            ).length
-        },
-        selectOptions(): Record<string, string>[] {
-            const options: Record<string, string>[] = [
-                {
-                    label: 'New Query',
-                    value: '{}'
-                }
-            ]
-
-            const filters = this.filters?.saved ?? []
-            for (const filter of filters) {
-                options.push({
-                    label: filter.name,
-                    value: filter.query
-                })
-            }
-
-            return options
-        }
-    },
-    watch: {
-        jsonEditorModel() {
-            const json = JSON.stringify(
-                this.toJSON(removeBrackets(this.inputModel))
-            )
-            const newQuery = revertAliases(json, this.aliases)
-            if (newQuery && newQuery !== '{}') {
-                this.jsonEditorQuery = newQuery
-            }
-            this.alignJsonText()
-        },
-        jsonEditorQuery(val) {
-            if (
-                this.activeQuery.name === 'New Query' ||
-                this.activeQuery.name === ''
-            ) {
-                this.newQuery = this.fromJSON(JSON.parse(val))
-            }
-        }
-    },
-    mounted() {
-        const observer = new ResizeObserver((entries) => {
-            this.searchBarWidth = `${entries[0].contentRect.width}px`
-        })
-        observer.observe(this.$refs.inputWrapper as HTMLElement)
-    },
-    methods: {
-        handleQueryRemove() {
-            this.filtersModel = false
-            this.removeQueryDialogBoxModel = true
-        },
-        handleSaveQuery(performSearch: boolean) {
-            this.activeQuery = {
-                name: this.newQueryName || this.activeQuery.name,
-                query: this.jsonEditorQuery
-            }
-            if (performSearch === true) {
-                this.emitSaveQuery()
-                this.emitSearchQuery()
-                const newQuery = setAliases(
-                    stringifySmartQuery(JSON.parse(this.activeQuery.query)),
-                    this.aliases
-                )
-                this.inputModel = newQuery
-                this.oldInputQuery = newQuery
-                this.jsonEditorModel = false
-            } else {
-                this.emitSaveQuery()
-            }
-        },
-        handleJsonSearchButton() {
-            this.jsonEditorModel = false
-            this.activeQuery.query = this.jsonEditorQuery
-            nextTick(() => {
-                this.setQueryInput()
-                this.$emit('search-query', this.activeQuery, this.stringQuery)
-            })
-        },
-        handleFiltersDelete(currentTab: string, query: Query) {
-            this.activeQuery = query
-            this.currentTab = currentTab
-            this.removeQueryDialogBoxModel = true
-            this.filtersModel = false
-        },
-        handleFiltersSelect(currentTab: string, query: Query) {
-            this.activeQuery = { ...query }
-            const stringQuery = setAliases(
-                stringifySmartQuery(JSON.parse(query.query)),
-                this.aliases
-            )
-            this.oldInputQuery = stringQuery
-            this.inputModel = stringQuery
-            this.currentTab = currentTab
-            this.filtersModel = false
-        },
-        handleJsonEditorClose() {
-            this.jsonEditorModel = false
-            this.newQuery = ''
-        },
-        emitSearchQuery() {
-            this.$emit('search-query', this.activeQuery, this.stringQuery)
-        },
-        emitRemoveQuery() {
-            if (!this.activeQuery) return
-            this.$emit(
-                'remove-query',
-                this.activeQuery,
-                this.currentTab,
-                this.inputModel
-            )
-            this.selectedOption = {
-                label: 'New Query',
-                value: '{}'
-            }
-            this.activeQuery.query = this.newQuery
-            this.jsonEditorQuery = this.newQuery || '{}'
-            this.removeQueryDialogBoxModel = false
-        },
-        emitSaveQuery() {
-            if (!this.activeQuery) return
-            if (this.newQueryName !== '')
-                this.activeQuery.name = this.newQueryName
-            this.$emit('save-query', { ...this.activeQuery }, this.currentTab)
-            this.saveQueryDialogBoxModel = false
-            this.newQueryName = ''
-        },
-        setQueryInput(query?: string) {
-            const stringQuery = this.fromJSON(
-                JSON.parse(query || this.activeQuery.query)
-            )
-            this.inputModel = stringQuery
-            this.oldInputQuery = stringQuery
-        },
-        updateActiveQuery(option: Record<string, string>) {
-            this.preventUpdate = true
-            const isNewQuery =
-                option.label === 'New Query' || option.label === ''
-            this.activeQuery = {
-                name: option.label,
-                query: isNewQuery ? this.newQuery : this.activeQuery.query
-            }
-            this.preventUpdate = false
-            this.jsonEditorQuery = isNewQuery
-                ? this.newQuery || '{}'
-                : option.value
-            this.alignJsonText()
-        },
-        alignJsonText() {
-            try {
-                this.preventUpdate = false
-                this.jsonEditorQuery = JSON.stringify(
-                    JSON.parse(this.jsonEditorQuery),
-                    null,
-                    2
-                )
-            } catch (err) {}
+            cssVars,
+            selectedOptions,
+            emitSearchQuery,
+            showJSONEditor,
+            stringifiedJSON,
+            handleJSONChange
         }
     }
 })
@@ -690,6 +266,9 @@ export default defineComponent({
 .dl-smart-search {
     display: flex;
     width: 100%;
+    align-items: center;
+    /* Margin for the absolute text */
+    margin-bottom: 15px;
 
     &__inner {
         display: flex;
@@ -699,15 +278,15 @@ export default defineComponent({
     &__input-wrapper {
         flex-grow: 1;
         width: 100%;
-        max-width: var(--dl-search-max-width);
+        max-width: var(--dl-smart-search-max-width);
         transition: max-width 0.3s ease-out;
     }
 
     &__buttons {
         display: flex;
         align-items: center;
+        height: 100%;
         margin-left: 8px;
-        margin-top: 1px;
         &--filters {
             min-width: fit-content;
             border-radius: 3px;
@@ -729,30 +308,6 @@ export default defineComponent({
     &__search-btn-wrapper {
         display: flex;
         align-items: center;
-
-        ::v-deep .dl-button {
-            padding: 4px;
-        }
-    }
-
-    &__filters-btn-wrapper {
-        display: flex;
-        align-items: center;
-
-        ::v-deep .dl-button {
-            padding: 0;
-            font-size: 12px;
-            width: 110px;
-        }
-    }
-
-    &__search-label {
-        font-size: 10px;
-        margin-left: 4px;
-        margin-top: 4px;
-        color: gray;
-        position: relative;
-        word-break: break-all;
     }
 }
 .json-editor__footer {