@xh/hoist 73.0.0-SNAPSHOT.1738073819234 → 73.0.0-SNAPSHOT.1738098319236

package/admin/jsonsearch/JsonSearchPanel.ts

@@ -1,243 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2025 Extremely Heavy Industries Inc.
- */
-
-import {startCase} from 'lodash';
-import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
-import {errorMessage} from '@xh/hoist/cmp/error';
-import {grid, GridConfig, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {a, box, filler, h4, hframe, label, li, span, ul, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, SelectOption, useLocalModel} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button';
-import {buttonGroupInput, jsonInput, select, textInput} from '@xh/hoist/desktop/cmp/input';
-import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {Icon} from '@xh/hoist/icon';
-import {popover} from '@xh/hoist/kit/blueprint';
-import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
-import {JsonSearchPanelImplModel} from './impl/JsonSearchPanelImplModel';
-
-export interface JsonSearchPanelProps extends HoistProps {
-    /** Url to endpoint for searching for matching JSON documents */
-    docSearchUrl: string;
-
-    /** Url to endpoint for listing matching JSON nodes */
-    matchingNodesUrl: string;
-
-    /**
-     * Config for GridModel used to display search results.
-     */
-    gridModelConfig: GridConfig;
-
-    /**
-     * Names of field(s) that can be used to group by.
-     */
-    groupByOptions: SelectOption[];
-}
-
-export const [JsonSearchPanel, jsonSearchPanel] = hoistCmp.withFactory<JsonSearchPanelProps>({
-    displayName: 'JsonSearchPanel',
-
-    render() {
-        const impl = useLocalModel(JsonSearchPanelImplModel),
-            {error} = impl;
-
-        return panel({
-            title: 'JSON Path Search',
-            icon: Icon.json(),
-            modelConfig: {
-                side: 'right',
-                defaultSize: '75%',
-                collapsible: true,
-                defaultCollapsed: true
-            },
-            compactHeader: true,
-            tbar: searchTbar({model: impl}),
-            flex: 1,
-            item: panel({
-                mask: impl.docLoadTask,
-                items: [
-                    errorMessage({
-                        error,
-                        title: error?.name ? startCase(error.name) : undefined
-                    }),
-                    hframe({
-                        omit: impl.error,
-                        items: [
-                            panel({
-                                item: grid({model: impl.gridModel})
-                            }),
-                            panel({
-                                mask: impl.nodeLoadTask,
-                                tbar: readerTbar({model: impl}),
-                                bbar: nodeBbar({
-                                    omit: !impl.asPathList,
-                                    model: impl
-                                }),
-                                item: jsonInput({
-                                    model: impl,
-                                    bind: 'readerContent',
-                                    flex: 1,
-                                    width: '100%',
-                                    readonly: true,
-                                    showCopyButton: true
-                                })
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-});
-
-const searchTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
-    return toolbar(
-        pathField({model}),
-        helpButton(),
-        toolbarSep(),
-        span('Group by:'),
-        select({
-            bind: 'groupBy',
-            options: model.groupByOptions,
-            width: 160,
-            enableFilter: false
-        }),
-        toolbarSep(),
-        gridCountLabel({
-            gridModel: model.gridModel,
-            unit: 'document'
-        })
-    );
-});
-
-const pathField = hoistCmp.factory<JsonSearchPanelImplModel>({
-    render({model}) {
-        return textInput({
-            bind: 'path',
-            autoFocus: true,
-            commitOnChange: true,
-            leftIcon: Icon.search(),
-            enableClear: true,
-            placeholder:
-                "JSON Path - e.g. $..[?(@.colId == 'trader')] - type a path and hit ENTER to search",
-            width: null,
-            flex: 1,
-            onKeyDown: e => {
-                if (e.key === 'Enter') model.loadJsonDocsAsync();
-            }
-        });
-    }
-});
-
-const helpButton = hoistCmp.factory({
-    model: false,
-    render() {
-        return popover({
-            item: button({
-                icon: Icon.questionCircle(),
-                outlined: true
-            }),
-            content: vbox({
-                style: {
-                    padding: '0px 20px 10px 20px'
-                },
-                items: [
-                    h4('Sample Queries'),
-                    ul({
-                        style: {listStyleType: 'none'},
-                        items: [
-                            {
-                                query: "$..[?(@.colId == 'trader')]",
-                                explanation:
-                                    'Find all nodes with a property "colId" equal to "trader"'
-                            }
-                        ].map(({query, explanation}) =>
-                            li({
-                                key: query,
-                                items: [
-                                    span({
-                                        className:
-                                            'xh-border xh-pad-half xh-bg-alt xh-font-family-mono',
-                                        item: query
-                                    }),
-                                    ' ',
-                                    clipboardButton({
-                                        text: null,
-                                        icon: Icon.copy(),
-                                        getCopyText: () => query,
-                                        successMessage: 'Query copied to clipboard.'
-                                    }),
-                                    ' ',
-                                    explanation
-                                ]
-                            })
-                        )
-                    }),
-                    a({
-                        href: 'https://github.com/json-path/JsonPath?tab=readme-ov-file#operators',
-                        target: '_blank',
-                        item: 'Path Syntax Docs & More Examples'
-                    })
-                ]
-            })
-        });
-    }
-});
-
-const readerTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
-    return toolbar({
-        items: [
-            buttonGroupInput({
-                model,
-                bind: 'readerContentType',
-                minimal: true,
-                outlined: true,
-                disabled: !model.selectedRecord,
-                items: [
-                    button({
-                        text: 'Document',
-                        value: 'document'
-                    }),
-                    button({
-                        text: 'Matching Paths',
-                        value: 'paths'
-                    }),
-                    button({
-                        text: 'Matching Values',
-                        value: 'values'
-                    })
-                ]
-            }),
-            filler(),
-            box({
-                omit: !model.matchingNodeCount,
-                item: `${model.matchingNodeCount} ${model.matchingNodeCount === 1 ? 'match' : 'matches'}`
-            })
-        ]
-    });
-});
-
-const nodeBbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
-    return toolbar(
-        label('Path Format:'),
-        buttonGroupInput({
-            model,
-            bind: 'pathFormat',
-            minimal: true,
-            outlined: true,
-            items: [
-                button({
-                    text: 'XPath',
-                    value: 'XPath'
-                }),
-                button({
-                    text: 'JSONPath',
-                    value: 'JSONPath'
-                })
-            ]
-        })
-    );
-});

package/admin/jsonsearch/impl/JsonSearchPanelImplModel.ts

@@ -1,159 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2025 Extremely Heavy Industries Inc.
- */
-
-import {GridModel} from '@xh/hoist/cmp/grid';
-import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
-import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
-import {isEmpty} from 'lodash';
-
-/**
- * @internal
- */
-export class JsonSearchPanelImplModel extends HoistModel {
-    override xhImpl = true;
-
-    @managed gridModel: GridModel;
-    @managed groupingChooserModel: GroupingChooserModel;
-    @managed docLoadTask: TaskObserver = TaskObserver.trackLast();
-    @managed nodeLoadTask: TaskObserver = TaskObserver.trackLast();
-
-    @observable groupBy: string = null;
-
-    @bindable.ref error = null;
-    @bindable path: string = '';
-    @bindable readerContentType: 'document' | 'paths' | 'values' = 'values';
-    @bindable pathFormat: 'XPath' | 'JSONPath' = 'XPath';
-    @bindable readerContent: string = '';
-    @bindable matchingNodeCount: number = 0;
-
-    get asPathList(): boolean {
-        return this.readerContentType === 'paths';
-    }
-
-    get queryBuffer(): number {
-        return this.componentProps.queryBuffer ?? 200;
-    }
-
-    get docSearchUrl(): string {
-        return this.componentProps.docSearchUrl;
-    }
-
-    get matchingNodesUrl(): string {
-        return this.componentProps.matchingNodesUrl;
-    }
-
-    get selectedRecord() {
-        return this.gridModel.selectedRecord;
-    }
-
-    get gridModelConfig() {
-        return this.componentProps.gridModelConfig;
-    }
-
-    get groupByOptions() {
-        return [...this.componentProps.groupByOptions, {value: null, label: 'None'}];
-    }
-
-    constructor() {
-        super();
-        makeObservable(this);
-    }
-
-    override onLinked() {
-        this.gridModel = new GridModel({
-            ...this.gridModelConfig,
-            selModel: 'single'
-        });
-
-        this.addReaction(
-            {
-                track: () => this.path,
-                run: path => {
-                    if (isEmpty(path)) {
-                        this.error = null;
-                        this.gridModel.clear();
-                    }
-                }
-            },
-            {
-                track: () => [this.selectedRecord, this.readerContentType, this.pathFormat],
-                run: () => this.loadreaderContentTypeAsync(),
-                debounce: 300
-            }
-        );
-    }
-
-    async loadJsonDocsAsync() {
-        if (isEmpty(this.path)) {
-            this.error = null;
-            this.gridModel.clear();
-            return;
-        }
-
-        try {
-            const data = await XH.fetchJson({
-                url: this.docSearchUrl,
-                params: {path: this.path}
-            }).linkTo(this.docLoadTask);
-
-            this.error = null;
-            this.gridModel.loadData(data);
-            this.gridModel.selectFirstAsync();
-        } catch (e) {
-            this.gridModel.clear();
-            this.error = e;
-        }
-    }
-
-    private async loadreaderContentTypeAsync() {
-        if (!this.selectedRecord) {
-            this.matchingNodeCount = 0;
-            this.readerContent = '';
-            return;
-        }
-
-        const {json} = this.selectedRecord.data;
-
-        if (this.readerContentType === 'document') {
-            this.readerContent = JSON.stringify(JSON.parse(json), null, 2);
-            return;
-        }
-
-        let nodes = await XH.fetchJson({
-            url: this.matchingNodesUrl,
-            params: {
-                path: this.path,
-                asPathList: this.readerContentType === 'paths',
-                json
-            }
-        }).linkTo(this.nodeLoadTask);
-
-        this.matchingNodeCount = nodes.length;
-        if (this.asPathList && this.pathFormat === 'XPath') {
-            nodes = nodes.map(it => this.convertToPath(it));
-        }
-        this.readerContent = JSON.stringify(nodes, null, 2);
-    }
-
-    private convertToPath(JSONPath: string): string {
-        return JSONPath.replaceAll(/^\$\['?/g, '/')
-            .replaceAll(/^\$/g, '')
-            .replaceAll(/'?]\['?/g, '/')
-            .replaceAll(/'?]$/g, '');
-    }
-
-    @action
-    private setGroupBy(groupBy: string) {
-        this.groupBy = groupBy;
-
-        // Always select first when regrouping.
-        const groupByArr = groupBy ? groupBy.split(',') : [];
-        this.gridModel.setGroupBy(groupByArr);
-        this.gridModel.preSelectFirstAsync();
-    }
-}

package/build/types/admin/jsonsearch/JsonSearchPanel.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { GridConfig } from '@xh/hoist/cmp/grid';
-import { HoistProps, SelectOption } from '@xh/hoist/core';
-export interface JsonSearchPanelProps extends HoistProps {
-    /** Url to endpoint for searching for matching JSON documents */
-    docSearchUrl: string;
-    /** Url to endpoint for listing matching JSON nodes */
-    matchingNodesUrl: string;
-    /**
-     * Config for GridModel used to display search results.
-     */
-    gridModelConfig: GridConfig;
-    /**
-     * Names of field(s) that can be used to group by.
-     */
-    groupByOptions: SelectOption[];
-}
-export declare const JsonSearchPanel: import("react").FC<JsonSearchPanelProps>, jsonSearchPanel: import("@xh/hoist/core").ElementFactory<JsonSearchPanelProps>;

package/build/types/admin/jsonsearch/impl/JsonSearchPanelImplModel.d.ts

@@ -1,33 +0,0 @@
-import { GridModel } from '@xh/hoist/cmp/grid';
-import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
-import { HoistModel, TaskObserver } from '@xh/hoist/core';
-/**
- * @internal
- */
-export declare class JsonSearchPanelImplModel extends HoistModel {
-    xhImpl: boolean;
-    gridModel: GridModel;
-    groupingChooserModel: GroupingChooserModel;
-    docLoadTask: TaskObserver;
-    nodeLoadTask: TaskObserver;
-    groupBy: string;
-    error: any;
-    path: string;
-    readerContentType: 'document' | 'paths' | 'values';
-    pathFormat: 'XPath' | 'JSONPath';
-    readerContent: string;
-    matchingNodeCount: number;
-    get asPathList(): boolean;
-    get queryBuffer(): number;
-    get docSearchUrl(): string;
-    get matchingNodesUrl(): string;
-    get selectedRecord(): import("../../../data").StoreRecord;
-    get gridModelConfig(): any;
-    get groupByOptions(): any[];
-    constructor();
-    onLinked(): void;
-    loadJsonDocsAsync(): Promise<void>;
-    private loadreaderContentTypeAsync;
-    private convertToPath;
-    private setGroupBy;
-}