@dataloop-ai/components 0.17.94 → 0.17.95

package/package.json

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

package/src/components/compound/DlDateTime/DlDatePicker/DlDatePicker.vue

@@ -103,6 +103,10 @@ export default defineComponent({
             type: Object as PropType<Partial<DateInterval> | null>,
             default: null
         },
+        singleSelection: {
+            type: Boolean,
+            default: false
+        },
         normalizeCalendars: Boolean,
         disabled: Boolean
     },
@@ -245,7 +249,11 @@ export default defineComponent({
 
             this.dateInterval = { from: date, to: date }
 
-            this.isSelectionMode = true
+            if (this.singleSelection) {
+                this.isSelectionMode = true
+            } else {
+                this.updateModelValue(this.dateInterval)
+            }
         },
 
         handleMouseenter(date: Date) {

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

@@ -343,7 +343,9 @@ export default defineComponent({
         const handleInputModel = (value: string) => {
             inputModel.value = value
             const json = toJSON(removeBrackets(value))
-            emit('update:modelValue', json)
+            if (!isEqual(json, props.modelValue)) {
+                emit('update:modelValue', json)
+            }
             const stringified = JSON.stringify(json)
             const newQuery = replaceWithAliases(stringified, props.aliases)
             activeQuery.value.query = newQuery
@@ -356,10 +358,23 @@ export default defineComponent({
 
         const debouncedInputModel = debounce(handleInputModel, 300)
 
+        const isValidJSON = (item: string | Object): boolean => {
+            let value = typeof item !== 'string' ? JSON.stringify(item) : item
+            try {
+                value = JSON.parse(value)
+            } catch (e) {
+                return false
+            }
+
+            return typeof value === 'object' && value !== null
+        }
+
         const toJSON = (value: string) => {
-            return parseSmartQuery(
+            const json = parseSmartQuery(
                 replaceWithJsDates(value) ?? inputModel.value
             )
+
+            return isValidJSON(json) ? json : inputModel.value
         }
 
         const setFocused = (value: boolean) => {
@@ -383,7 +398,9 @@ export default defineComponent({
                     return
                 }
                 const stringQuery = stringifySmartQuery(val)
-                debouncedInputModel(stringQuery)
+                if (stringQuery !== inputModel.value.trim()) {
+                    debouncedInputModel(stringQuery)
+                }
             }
         })
 

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

@@ -117,7 +117,10 @@
             :offset="[0, 3]"
         >
             <div class="dl-smart-search-input__date-picker-wrapper">
-                <dl-date-picker @change="handleDateSelectionUpdate" />
+                <dl-date-picker
+                    :single-selection="false"
+                    @change="handleDateSelectionUpdate"
+                />
             </div>
         </dl-menu>
     </div>

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

@@ -2,19 +2,10 @@ export * from './highlightSyntax'
 export * from './utils'
 
 import { DateInterval } from '../../../DlDateTime/types'
-
-const startDatePattern = new RegExp(
-    /\(from\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(from\s?dd\/mm\/yyyy\s?\)/,
-    'gi'
-)
-const endDatePattern = new RegExp(
-    /\(to\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(to\s?dd\/mm\/yyyy\s?\)/,
-    'gi'
-)
-const dateIntervalPattern = new RegExp(
-    /\((from\s?\(\d{2}\/\d{2}\/\d{4}\)\s?to\s?\(\d{2}\/\d{2}\/\d{4}\))\)|\((from\s?\(dd\/mm\/yyyy\)\s?to\s?\(dd\/mm\/yyyy\))\)/,
-    'gi'
-)
+import {
+    datePattern,
+    datePatternNoBrackets
+} from '../../../../../hooks/use-suggestions'
 
 export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     const trimmed = str.trim()
@@ -23,40 +14,21 @@ export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     if (!matches || !matches.length) return false
 
     const lastMatch = matches[matches.length - 1]
+
     return trimmed.lastIndexOf(lastMatch) + lastMatch.length === trimmed.length
 }
 
 export const isEndingWithDateIntervalPattern = (str: string) => {
-    return (
-        isEndOfString(str, dateIntervalPattern) ||
-        isEndOfString(str, startDatePattern) ||
-        isEndOfString(str, endDatePattern)
-    )
+    return isEndOfString(str, datePattern)
 }
 
-export const replaceDateInterval = (
-    str: string,
-    dateInterval: DateInterval
-) => {
-    const dateFrom = new Date(dateInterval.from)
-    const dateTo = new Date(dateInterval.to)
-    const values = str.match(/\((.*?)\)/g)
-    let newStr = ''
-    if (!values) return str
-
-    if (values.length > 1) {
-        newStr = `(From (${formatDate(dateFrom)}) To (${formatDate(dateTo)}))`
-        return replaceLastOccurrence(str, newStr, dateIntervalPattern)
-    } else if (values[0].includes('From')) {
-        newStr = `(From ${formatDate(dateFrom)})`
-        return replaceLastOccurrence(str, newStr, startDatePattern)
-    } else if (values[0].includes('To')) {
-        newStr = `(To ${formatDate(dateTo)})`
-        return replaceLastOccurrence(str, newStr, endDatePattern)
-    }
+export const replaceDateInterval = (str: string, date: DateInterval) => {
+    const newStr = `${formatDate(date.from)}`
+    return replaceLastOccurrence(str, newStr, datePatternNoBrackets)
 }
 
 const formatDate = (date: Date): string => {
+    if (!date) return
     return `${addZero(date.getDate())}/${addZero(
         date.getMonth() + 1
     )}/${date.getFullYear()}`

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

@@ -2,9 +2,7 @@ import { ColorSchema, SyntaxColorSchema, Filters } from '../types'
 import {
     operators,
     Alias,
-    startDatePattern,
-    endDatePattern,
-    dateIntervalPattern
+    datePattern
 } from '../../../../../hooks/use-suggestions'
 
 export function getTabItems(filters: Filters) {
@@ -25,37 +23,22 @@ export function getTabItems(filters: Filters) {
 }
 
 export function replaceWithJsDates(str: string) {
-    const intervals = str.match(dateIntervalPattern)
-    const starts = str.match(startDatePattern)
-    const ends = str.match(endDatePattern)
+    const dates = str.match(datePattern)
 
-    intervals?.forEach((interval) => {
-        str = str.replaceAll(interval, formatToDateObj(interval))
-    })
-    starts?.forEach((start) => {
-        str = str.replaceAll(start, formatToDateObj(start))
-    })
-    ends?.forEach((end) => {
-        str = str.replaceAll(end, formatToDateObj(end))
+    dates?.forEach((date) => {
+        str = str.replaceAll(date, formatToNumericDate(date))
     })
+
     return str
 }
 
-function formatToDateObj(str: string) {
-    const [day, month, year] = str.split(' ')[1].split('/')
-    const date = new Date(parseInt(year), parseInt(month), parseInt(day))
-    if (!isValidDate(date)) return str
-    const [toDay, toMonth, toYear] = str.split(' ')[3]?.split('/') || []
-    const toDate = new Date(
-        parseInt(toYear),
-        parseInt(toMonth),
-        parseInt(toDay)
-    )
-    if (!isValidDate(toDate)) return date.toISOString()
-    return JSON.stringify({
-        from: date.toISOString(),
-        to: toDate.toISOString()
-    })
+function formatToNumericDate(str: string) {
+    const dateInfo = str.split('/')
+    const day = parseInt(dateInfo[0])
+    const month = parseInt(dateInfo[1])
+    const year = parseInt(dateInfo[2])
+    const newDate = new Date(year, month, day)
+    return newDate.getTime().toString()
 }
 
 function isValidDate(d: Date) {

package/src/hooks/use-suggestions.ts

@@ -71,24 +71,50 @@ type Expression = {
 }
 
 const space = ' '
-const dateStartSuggestionString = '(From dd/mm/yyyy)'
-const dateEndSuggestionString = '(To dd/mm/yyyy)'
-const dateIntervalSuggestionString = '(From (dd/mm/yyyy) To (dd/mm/yyyy))'
+const dateSuggestionPattern = '(dd/mm/yyyy)'
 
 let localSuggestions: Suggestion[] = []
 
-export const startDatePattern = new RegExp(
-    /(from\s?\d{2}\/\d{2}\/\d{4}\s?|from\s?dd\/mm\/yyyy\s?)/,
-    'gi'
-)
-export const endDatePattern = new RegExp(
-    /(to\s?\d{2}\/\d{2}\/\d{4}\s?|to\s?dd\/mm\/yyyy\s?)/,
-    'gi'
-)
-export const dateIntervalPattern = new RegExp(
-    /(from\s?\d{2}\/\d{2}\/\d{4}\s?to\s?\d{2}\/\d{2}\/\d{4})|(from\s?dd\/mm\/yyyy\s?to\s?dd\/mm\/yyyy)/,
+export const datePattern = new RegExp(
+    /(\(\d{2}\/\d{2}\/\d{4}\)\s?|\s?\(dd\/mm\/yyyy\)\s?)/,
     'gi'
 )
+export const datePatternNoBrackets =
+    /(\d{2}\/\d{2}\/\d{4}\s?|\s?dd\/mm\/yyyy\s?)/
+
+const mergeWords = (words: string[]) => {
+    const result: string[] = []
+    let merging = false
+    let mergeIndex = -1
+
+    for (let i = 0; i < words.length; ++i) {
+        const currentItem = words[i]
+
+        if (currentItem === 'IN' || currentItem === 'NOT-IN') {
+            merging = true
+            mergeIndex = i + 1
+            result.push(currentItem)
+            continue
+        } else if (
+            Object.values(Logical).includes(currentItem as any) ||
+            Object.values(operators).includes(currentItem as any)
+        ) {
+            merging = false
+        }
+
+        if (merging) {
+            if (!result[mergeIndex]) {
+                result[mergeIndex] = ''
+            }
+            result[mergeIndex] += ' ' + currentItem
+            continue
+        }
+
+        result.push(currentItem)
+    }
+
+    return result
+}
 
 export const useSuggestions = (
     schema: Schema,
@@ -123,7 +149,8 @@ export const useSuggestions = (
         localSuggestions = sortedSuggestions
 
         const words = splitByQuotes(input, space)
-        const expressions = mapWordsToExpressions(words)
+        const mergedWords = mergeWords(words)
+        const expressions = mapWordsToExpressions(mergedWords)
 
         for (const { field, operator, value, keyword } of expressions) {
             let matchedField: Suggestion | null = null
@@ -191,11 +218,7 @@ export const useSuggestions = (
                 dataType === 'date' ||
                 dataType === 'time'
             ) {
-                localSuggestions = [
-                    dateIntervalSuggestionString,
-                    dateStartSuggestionString,
-                    dateEndSuggestionString
-                ]
+                localSuggestions = [dateSuggestionPattern]
 
                 if (!value) continue
 
@@ -356,11 +379,7 @@ const validateBracketValues = (value: string) => {
 }
 
 const isValidDateIntervalPattern = (str: string) => {
-    return (
-        !!str.match(dateIntervalPattern) ||
-        !!str.match(startDatePattern) ||
-        !!str.match(endDatePattern)
-    )
+    return !!str.match(datePatternNoBrackets)
 }
 
 const isValidNumber = (str: string) => {
@@ -509,11 +528,7 @@ const getValueSuggestions = (dataType: string | string[], operator: string) => {
             case 'date':
             case 'time':
             case 'datetime':
-                suggestion.push(
-                    dateIntervalSuggestionString,
-                    dateStartSuggestionString,
-                    dateEndSuggestionString
-                )
+                suggestion.push(dateSuggestionPattern)
             default:
                 // do nothing
                 break