@dataloop-ai/components 0.19.244 → 0.19.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.244",
+  "version": "0.19.248",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -27,6 +27,7 @@
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",
     "chart.js": "^3.9.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "flat": "^5.0.2",
     "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
@@ -40,8 +41,7 @@
     "vanilla-jsoneditor": "^0.10.2",
     "vue-demi": "^0.14.5",
     "vue-sortable": "^0.1.3",
-    "vue2-teleport": "^1.0.1",
-    "zero-md": "^2.5.3"
+    "vue2-teleport": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -17,6 +17,7 @@
             </template>
         </dl-input>
         <dl-tree-table
+            v-if="isFilterString(inputValue)"
             draggable="none"
             separator="none"
             :hide-pagination="true"
@@ -166,13 +167,28 @@ export default defineComponent({
             )
         )
         const rows = computed(() => mapItems.value)
+        const isFilterString = (input: string) => {
+            const stack = [...items.value]
+            const filter = (input ?? '').toLowerCase()
+            while (stack.length) {
+                const item = stack.pop()
+                if (item.displayLabel?.toLowerCase?.().includes(filter)) {
+                    return true
+                }
+                if (item.children) {
+                    stack.push(...item.children)
+                }
+            }
+            return false
+        }
         return {
             handleRowClick,
             inputValue,
             columns,
             placeHolderText,
             inputStyles,
-            rows
+            rows,
+            isFilterString
         }
     }
 })

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

@@ -1,21 +1,9 @@
 <template>
     <div :class="chartWrapperClasses">
-        <div
-            class="canvas-container"
-            :style="`height: ${wrapperHeight}`"
-        >
-            <dl-empty-state
-                v-if="isEmpty"
-                v-bind="emptyStateProps"
-            >
-                <template
-                    v-for="(_, slot) in $slots"
-                    #[slot]="props"
-                >
-                    <slot
-                        :name="slot"
-                        v-bind="props"
-                    />
+        <div class="canvas-container" :style="`height: ${wrapperHeight}`">
+            <dl-empty-state v-if="isEmpty" v-bind="emptyStateProps">
+                <template v-for="(_, slot) in $slots" #[slot]="props">
+                    <slot :name="slot" v-bind="props" />
                 </template>
             </dl-empty-state>
             <Bar
@@ -26,11 +14,12 @@
                 :style="chartStyles"
                 :data="chartData"
                 :options="chartOptions"
+                :plugins="chartPlugins"
                 @mouseout="onChartLeave"
                 @wheel.native="handleChartScroll"
             />
             <dl-chart-scroll-bar
-                v-if="!isEmpty || (maxItems > thisItemsInView && !isEmpty)"
+                v-if="maxItems > thisItemsInView && !isEmpty"
                 :wrapper-styles="{
                     marginTop: '10px'
                 }"
@@ -391,6 +380,8 @@ export default defineComponent({
             )
         )
 
+        const chartPlugins = props.plugins
+
         watch(
             () => chart.value?.scales?.x?.width,
             (val: string) => {
@@ -541,13 +532,14 @@ export default defineComponent({
                 )
             )
 
-            chart.value.update()
+            chart.value.update?.()
         })
 
         return {
             variables,
             chartData,
             chartOptions,
+            chartPlugins,
             xLabels,
             barChart,
             maxItems,

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

@@ -423,7 +423,10 @@ export default defineComponent({
                         words.push(lastWord)
                     }
                     queryLeftSide = words.join('.')
-                } else if (queryLeftSide.endsWith(' ')) {
+                } else if (
+                    queryLeftSide.endsWith(' ') &&
+                    (queryLeftSide.match(/'/g)?.length ?? 0) % 2 === 0
+                ) {
                     // caret after space: only replace multiple spaces on the left
                     queryLeftSide = queryLeftSide.trimEnd() + ' '
                 } else if (/\.\S+$/.test(queryLeftSide)) {
@@ -440,7 +443,10 @@ export default defineComponent({
                     queryRightSide = queryRightSide.trimStart()
                 } else {
                     // this|situation: replace whatever is there on both sides with the value
-                    queryLeftSide = queryLeftSide.replace(/\S+$/, '')
+                    queryLeftSide = queryLeftSide.replace(
+                        /('[^']+'?|[^'\s]+)$/,
+                        ''
+                    )
                     queryRightSide =
                         removeLeadingExpression(queryRightSide).trimStart()
                 }
@@ -615,7 +621,18 @@ export default defineComponent({
         }
 
         const endsWithOperator = computed(() => {
-            const operators = ['>=', '<=', '!=', '=', '>', '<', 'IN', 'NOT-IN']
+            const operators = [
+                '>=',
+                '<=',
+                '!=',
+                '=',
+                '>',
+                '<',
+                'IN',
+                'NOT-IN',
+                'EXISTS',
+                'DOESNT-EXIST'
+            ]
 
             for (const op of operators) {
                 if (

package/src/demos/BarChartDemo.vue

@@ -4,7 +4,7 @@
             display: flex;
             width: 900px;
             flex-wrap: wrap;
-            flex-direction: row;
+            flex-direction: column;
             gap: 0px;
         "
     >
@@ -22,6 +22,19 @@
             :items-in-view="6"
             is-empty
         />
+
+        <div style="color: var(--dl-color-darker); margin-bottom: 30px">
+            Customized DlBarChart with data labels
+        </div>
+        <!-- @vue-ignore -->
+        <dl-bar-chart
+            :data="cdlData"
+            :options="cdlOptions"
+            :plugins="cdlPlugins"
+            :items-in-view="data.labels.length + 1"
+        >
+            <template #legend><span /></template>
+        </dl-bar-chart>
     </div>
 </template>
 
@@ -29,6 +42,7 @@
 import { defineComponent } from 'vue-demi'
 import { ChartOptions } from 'chart.js'
 import { DlBarChart } from '../components'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
 
 const labelsFn = () => {
     const a = []
@@ -78,6 +92,76 @@ const options: ChartOptions = {
     }
 }
 
+const cdlData = {
+    labels: labelsFn().map((l) => `Data [${l}]:`),
+    datasets: [
+        {
+            label: 'Duh',
+            backgroundColor: '--dl-color-secondary',
+            borderRadius: 4,
+            data: dataFn(),
+            datalabels: {
+                align: 'end',
+                anchor: 'start'
+            }
+        },
+        {
+            label: 'Duh',
+            backgroundColor: '--dl-color-info-background',
+            borderRadius: 4,
+            data: dataFn().map((n) => 20 - n),
+            datalabels: {
+                align: 'start',
+                anchor: 'end'
+            }
+        }
+    ]
+}
+
+const cdlOptions: ChartOptions = {
+    plugins: {
+        datalabels: {
+            color: '--dl-color-darker',
+            font: {
+                weight: 'bold'
+            },
+            formatter (value, context) {
+                switch (context.datasetIndex) {
+                    case 0:
+                        return context.chart.data.labels[context.dataIndex]
+                    case 1:
+                        return (
+                            'Value is ' +
+                            context.chart.data.datasets[0].data[
+                                context.dataIndex
+                            ]
+                        )
+                }
+            }
+        },
+        tooltip: {
+            callbacks: {
+                label (tooltipItem) {
+                    return 'Value is ' + tooltipItem.formattedValue
+                }
+            },
+            filter (tooltipItem) {
+                return tooltipItem.datasetIndex === 0
+            }
+        }
+    },
+    scales: {
+        x: {
+            stacked: true,
+            display: false
+        },
+        y: {
+            stacked: true,
+            display: false
+        }
+    }
+}
+
 export default defineComponent({
     name: 'DlChartDemo',
     components: {
@@ -85,6 +169,9 @@ export default defineComponent({
     },
     data() {
         return {
+            cdlData,
+            cdlOptions,
+            cdlPlugins: [ChartDataLabels],
             data,
             options,
             legendProps