@datagrok-libraries/utils 4.6.2 → 4.6.4

package/css/query-builder.css

@@ -0,0 +1,203 @@
+.query-builder-search-query-operator .fa-trash-alt {
+    font-size: 12px;
+    color: #2083D5;
+}
+
+.query-builder-nested-condition-operators .fa-trash-alt {
+    padding: 0px 7px 0px 5px;
+    font-size: 10px !important;
+    margin-top: 2px;
+}
+
+.query-builder-search-query-operator .fa-plus {
+    color: #2083D5;
+}
+
+.query-builder-nested-condition-operators .fa-plus {
+    padding: 1px 5px 1px 5px;
+}
+
+.query-builder-search-query-operator {
+    border: none;
+    padding-left: 12px;
+    position: relative;
+}
+
+.query-builder-search-query-operator[data-nesting-level] {
+    border-left: 3px solid var(--nesting-color, #e0e0e0);
+}
+
+.query-builder-search-query-operator .ui-input-text {
+    width: 95%;
+}
+
+.query-builder-filter-inputs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    min-height: 32px;
+    flex-wrap: nowrap;
+}
+
+.query-builder-filter-inputs .query-builder-filter-field,
+.query-builder-filter-inputs .query-builder-filter-operator,
+.query-builder-filter-inputs .query-builder-filter-value {
+    flex: 0 0 auto;
+    min-width: 0;
+}
+
+.query-builder-filter-inputs .ui-input-editor {
+    width: auto!important;
+}
+
+.query-builder-filter-inputs .ui-input-root {
+    width: auto!important;
+}
+
+.property-query-builder-and-or-operator {
+    font-size: 10px;
+    margin: 0px!important;
+    height: 12px!important;
+}
+
+.query-builder-nested-condition-operators .property-query-builder-and-or-operator {
+    padding: 2px 5px 0px 5px!important;
+    display: none!important;
+}
+
+.property-query-builder-multipe-filelds > .query-builder-nested-condition-operators .property-query-builder-and-or-operator {
+    display: flex!important;
+}
+
+.query-builder-nested-condition-operators {
+    align-items: center;
+}
+
+.query-builder-match-div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.query-builder-nested-condition-operators select {
+    width: 50px!important;
+}
+
+.query-builder-filter-inputs .add-delete-icons {
+    visibility: hidden;
+    gap: 6px;
+    padding-top: 15px;
+}
+
+.query-builder-filter-inputs:hover .add-delete-icons {
+    visibility: visible;
+}
+
+.nested-add-delete-icons {
+    visibility: hidden;
+}
+
+.query-builder-search-query-operator:hover .nested-add-delete-icons {
+    visibility: visible !important;
+}
+
+/* Hide dropdown arrow on select elements by default, show only on hover */
+.query-builder-filter-inputs select.ui-input-editor {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    background-image: none !important;
+    background: none !important;
+}
+
+.query-builder-filter-inputs select.ui-input-editor:hover {
+    background-image: url("../img/chevron.svg") !important;
+    background-repeat: no-repeat !important;
+    background-position: right 0px top 50% !important;
+}
+
+.query-builder-filter-inputs-narrow {
+    display: flex;
+    flex-direction: column;
+    padding-top: 8px;
+}
+
+.query-builder-filter-inputs-narrow .query-builder-filter-field,
+.query-builder-filter-inputs-narrow .query-builder-filter-operator,
+.query-builder-filter-inputs-narrow .query-builder-filter-value {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 32px;
+    width: 100%;
+}
+
+.query-builder-filter-inputs-narrow .add-delete-icons {
+    justify-content: flex-end;
+    padding-right: 10px;
+    padding-top: 5px;
+}
+
+.query-builder-filter-inputs-narrow .ui-input-editor {
+    width: 100% !important;
+}
+
+/* Ensure consistent field sizing and prevent height jumping */
+.query-builder-filter-field,
+.query-builder-filter-operator,
+.query-builder-filter-value {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    transition: all 0.2s ease;
+}
+
+.query-builder-filter-field .ui-input-editor,
+.query-builder-filter-operator .ui-input-editor,
+.query-builder-filter-value .ui-input-editor {
+    min-height: 28px;
+    box-sizing: border-box;
+}
+
+/* Prevent field height changes during layout switching */
+.query-builder-filter-inputs,
+.query-builder-filter-inputs-narrow {
+    transition: flex-direction 0.2s ease;
+}
+
+.add-delete-icons {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+/* History icon styling */
+.query-builder-history-icon {
+    bottom: 10px;
+    left: 10px;
+    font-size: 16px;
+    transition: opacity 0.2s ease;
+    visibility: hidden;
+    padding-top: 5px;
+    width: 20px;
+}
+
+
+.query-builder-narrow .query-builder-history-icon {
+    padding-top: 0px;
+}
+
+
+/* Only show history icon when history is enabled */
+.query-builder-search-query-operator[data-history="true"]:hover .query-builder-history-icon {
+    visibility: visible;
+}
+
+.query-builder-search-query-operator[data-history="false"] .query-builder-history-icon,
+.query-builder-search-query-operator:not([data-history]) .query-builder-history-icon {
+    visibility: hidden;
+}
+

package/img/chevron.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.94 5.72668L8 8.78002L11.06 5.72668L12 6.66668L8 10.6667L4 6.66668L4.94 5.72668Z" fill="#4D5261"/>
+</svg>

package/package.json

@@ -8,7 +8,7 @@
     "email": "aparamonov@datagrok.ai"
   },
   "fullName": "Utils",
-  "version": "4.6.2",
+  "version": "4.6.4",
   "description": "Common utilities",
   "dependencies": {
     "cash-dom": "^8.1.1",

package/src/query-builder/query-builder.d.ts

@@ -0,0 +1,126 @@
+import * as DG from 'datagrok-api/dg';
+import { Subject } from 'rxjs';
+import '../../css/query-builder.css';
+export declare const SUGGESTIONS_FUNCTION = "suggestionsFunction";
+export declare namespace Operators {
+    const CONTAINS = "contains";
+    const IN = "in";
+    const STARTS_WITH = "starts with";
+    const ENDS_WITH = "ends with";
+    const GT = ">";
+    const GTE = ">=";
+    const LT = "<";
+    const LTE = "<=";
+    const EQ = "=";
+    const NOT_EQ = "!=";
+    const BEFORE = "before";
+    const AFTER = "after";
+    const ON = "on";
+    const BETWEEN = "between";
+    const IS_SIMILAR = "is similar";
+    const IS_CONTAINED = "is contained";
+    enum Logical {
+        and = "and",
+        or = "or"
+    }
+}
+export declare enum QueryBuilderLayout {
+    Standard = "standard",
+    Narrow = "narrow"
+}
+export interface SimpleCondition<T = any> {
+    field: string;
+    operator: string;
+    value: T;
+}
+export interface ComplexCondition {
+    logicalOperator: Operators.Logical;
+    conditions: Expression[];
+}
+export type Expression<T = any> = SimpleCondition<T> | ComplexCondition;
+export declare class BaseConditionEditor<T = any> {
+    root: HTMLDivElement;
+    condition: SimpleCondition<T>;
+    onChanged: Subject<SimpleCondition<T>>;
+    showSuggestions: boolean;
+    suggestionsMenuClicked: boolean;
+    constructor(prop: DG.Property, operator: string, initialCondition?: SimpleCondition<T>);
+    protected initializeEditor(prop: DG.Property): void;
+    initializeSuggestions(prop: DG.Property, input: DG.InputBase): void;
+    addSuggestions(prop: DG.Property, input: DG.InputBase): Promise<void>;
+}
+export declare class BetweenConditionEditor extends BaseConditionEditor {
+    initializeEditor(prop: DG.Property): void;
+}
+export declare class BooleanConditionEditor extends BaseConditionEditor {
+    initializeEditor(prop: DG.Property): void;
+}
+export declare class MoleculeConditionEditor extends BaseConditionEditor<string> {
+    initializeEditor(prop: DG.Property): void;
+}
+export type MoleculeSimilarity = {
+    molecule: string;
+    threshold: number;
+};
+export declare class MoleculeSimilarityConditionEditor extends BaseConditionEditor<MoleculeSimilarity> {
+    initializeEditor(prop: DG.Property): void;
+}
+export declare class MultiValueConditionEditorString extends BaseConditionEditor<string[]> {
+    initializeEditor(prop: DG.Property): void;
+}
+export declare class MultiValueConditionEditorInt extends BaseConditionEditor<number[]> {
+    initializeEditor(prop: DG.Property): void;
+}
+export declare class MultiValueConditionEditorFloat extends BaseConditionEditor<number[]> {
+    initializeEditor(prop: DG.Property): void;
+}
+export declare class ConditionRegistry {
+    private static instance;
+    private typeOperators;
+    private semTypeOperators;
+    private editorRegistry;
+    private constructor();
+    static getInstance(): ConditionRegistry;
+    private initializeDefaultOperators;
+    private initializeDefaultEditors;
+    registerTypeOperators(propertyType: string, operators: string[]): void;
+    registerSemTypeOperators(semType: string, operators: string[]): void;
+    getOperatorsForProperty(property: DG.Property): string[];
+    isOperatorSupported(property: DG.Property, operator: string): boolean;
+    registerEditor<T>(propertyType: string, semType: string, operator: string, editorClass: new (prop: DG.Property, operator: string) => BaseConditionEditor<T>): void;
+    createEditor<T>(property: DG.Property, operator: string, initialCondition?: SimpleCondition<T>): BaseConditionEditor<T>;
+    getConditionEditor<T = any>(property: DG.Property, operator: string, condition?: SimpleCondition<T>): BaseConditionEditor<T>;
+    private createEditorKey;
+}
+export type HistoryItem = {
+    date: DG.TYPE.DATE_TIME;
+    value: string;
+};
+export declare function saveHistory(key: string, value: string): void;
+export declare function getHistory(key: string): HistoryItem[];
+export declare class QueryBuilder {
+    root: HTMLElement;
+    condition: ComplexCondition;
+    properties: DG.Property[];
+    structureChanged: Subject<ComplexCondition>;
+    filterValueChanged: Subject<SimpleCondition>;
+    layout: QueryBuilderLayout;
+    private _historyCacheKey;
+    private historyIcon;
+    constructor(properties: DG.Property[], initialCondition?: ComplexCondition, layout?: QueryBuilderLayout, _historyCacheKey?: string);
+    set historyCache(key: string);
+    saveConditionToHistory(): void;
+    private setupHistoryIcon;
+    private showHistoryMenu;
+    private loadCondition;
+    conditionToString(condition: ComplexCondition): string;
+    private expressionToString;
+    private simpleConditionToString;
+    createDefaultSimpleCondition(): SimpleCondition;
+    rebuildUI(): void;
+    setLayout(layout: QueryBuilderLayout): void;
+    getLayout(): QueryBuilderLayout;
+    buildUI(condition: ComplexCondition, parentCondition?: ComplexCondition, nestingLevel?: number): HTMLElement;
+    generateNestingColor(level: number): string;
+}
+//# sourceMappingURL=query-builder.d.ts.map

package/src/query-builder/query-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-builder.d.ts","sourceRoot":"","sources":["query-builder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AAGrC,eAAO,MAAM,oBAAoB,wBAAwB,CAAC;AAE1D,yBAAiB,SAAS,CAAC;IAChB,MAAM,QAAQ,aAAa,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,WAAW,gBAAgB,CAAC;IAClC,MAAM,SAAS,cAAc,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,GAAG,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,GAAG,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,MAAM,OAAO,CAAC;IACpB,MAAM,MAAM,WAAW,CAAC;IACxB,MAAM,KAAK,UAAU,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,OAAO,YAAY,CAAC;IAC1B,MAAM,UAAU,eAAe,CAAC;IAChC,MAAM,YAAY,iBAAiB,CAAC;IAE3C,KAAY,OAAO;QACf,GAAG,QAAQ;QACX,EAAE,OAAO;KACZ;CACJ;AAED,oBAAY,kBAAkB;IAC1B,QAAQ,aAAa;IACrB,MAAM,WAAW;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;CACZ;AAED,MAAM,WAAW,gBAAgB;IAC7B,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC;IACnC,UAAU,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,GAAG,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC;AAGxE,qBAAa,mBAAmB,CAAC,CAAC,GAAG,GAAG;IACpC,IAAI,EAAE,cAAc,CAAY;IAChC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAqC;IAC3E,eAAe,UAAS;IACxB,sBAAsB,UAAS;gBAEnB,IAAI,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IAStF,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;IAmBnD,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,SAAS;IAOtD,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,SAAS;CAkB9D;AAED,qBAAa,sBAAuB,SAAQ,mBAAmB;IAClD,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;CAuBrD;AAED,qBAAa,sBAAuB,SAAQ,mBAAmB;IAClD,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;CAerD;AAED,qBAAa,uBAAwB,SAAQ,mBAAmB,CAAC,MAAM,CAAC;IAC3D,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;CAoBrD;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AACD,qBAAa,iCAAkC,SAAQ,mBAAmB,CAAC,kBAAkB,CAAC;IACjF,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;CAwBrD;AAGD,qBAAa,+BAAgC,SAAQ,mBAAmB,CAAC,MAAM,EAAE,CAAC;IACrE,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;CAcrD;AAED,qBAAa,4BAA6B,SAAQ,mBAAmB,CAAC,MAAM,EAAE,CAAC;IAClE,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;CAcrD;AAED,qBAAa,8BAA+B,SAAQ,mBAAmB,CAAC,MAAM,EAAE,CAAC;IACpE,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,GAAG,IAAI;CAcrD;AAGD,qBAAa,iBAAiB;IAC1B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAoB;IAC3C,OAAO,CAAC,aAAa,CAAoC;IACzD,OAAO,CAAC,gBAAgB,CAAoC;IAC5D,OAAO,CAAC,cAAc,CAAoH;IAE1I,OAAO;IAKP,MAAM,CAAC,WAAW,IAAI,iBAAiB;IAOvC,OAAO,CAAC,0BAA0B;IAclC,OAAO,CAAC,wBAAwB;IAuBhC,qBAAqB,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI;IAItE,wBAAwB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI;IAKpE,uBAAuB,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,GAAG,MAAM,EAAE;IAUxD,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO;IAMrE,cAAc,CAAC,CAAC,EACZ,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,KAAK,mBAAmB,CAAC,CAAC,CAAC,GACjF,IAAI;IAMP,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC;IA0BvH,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC;IAQ5H,OAAO,CAAC,eAAe;CAG1B;AAGD,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAA;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,QASrD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,EAAE,CAErD;AAED,qBAAa,YAAY;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAmC;IAC9E,kBAAkB,EAAE,OAAO,CAAC,eAAe,CAAC,CAAkC;IAC9E,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,WAAW,CAA4B;gBAEnC,UAAU,EAAE,EAAE,CAAC,QAAQ,EAAE,EAAE,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,MAAM,GAAE,kBAAgD,EAChI,gBAAgB,GAAE,MAAW;IAmBjC,IAAI,YAAY,CAAC,GAAG,EAAE,MAAM,EAG3B;IAED,sBAAsB,IAAI,IAAI;IAK9B,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,aAAa;IAMrB,iBAAiB,CAAC,SAAS,EAAE,gBAAgB,GAAG,MAAM;IAiBtD,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,uBAAuB;IAU/B,4BAA4B,IAAI,eAAe;IAoB/C,SAAS,IAAI,IAAI;IASjB,SAAS,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI;IAsB3C,SAAS,IAAI,kBAAkB;IAI/B,OAAO,CACH,SAAS,EAAE,gBAAgB,EAC3B,eAAe,CAAC,EAAE,gBAAgB,EAClC,YAAY,GAAE,MAAU,GACzB,WAAW;IAyLd,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;CAY9C"}