@xh/hoist 72.0.0-SNAPSHOT.1737676375740 → 72.0.0-SNAPSHOT.1737725354262

package/admin/jsonsearch/JsonSearchPanel.ts

@@ -1,210 +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 {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
-import {errorMessage} from '@xh/hoist/cmp/error';
-import {JsonBlobModel} from '@xh/hoist/admin/tabs/userData/jsonblob/JsonBlobModel';
-import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {a, box, filler, h4, hframe, label, li, span, ul, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, useLocalModel} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button';
-import {buttonGroupInput, jsonInput, 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 {startCase} from 'lodash';
-
-import {JsonSearchPanelImplModel} from './impl/JsonSearchPanelImplModel';
-
-export const [JsonSearchPanel, jsonSearchPanel] = hoistCmp.withFactory<JsonBlobModel>({
-    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: nodeTbar({model: impl}),
-                                bbar: nodeBbar({
-                                    omit: !impl.asPathList,
-                                    model: impl
-                                }),
-                                item: jsonInput({
-                                    model: impl,
-                                    bind: 'matchingNodes',
-                                    flex: 1,
-                                    width: '100%',
-                                    readonly: true,
-                                    showCopyButton: true
-                                })
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-});
-
-const searchTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
-    return toolbar(
-        pathField({model}),
-        helpButton(),
-        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 nodeTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
-    return toolbar(
-        buttonGroupInput({
-            model,
-            bind: 'pathOrValue',
-            minimal: true,
-            outlined: true,
-            items: [
-                button({
-                    text: 'Path',
-                    value: 'path'
-                }),
-                button({
-                    text: 'Value',
-                    value: 'value'
-                })
-            ]
-        }),
-        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,130 +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 {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
-import {bindable, makeObservable} from '@xh/hoist/mobx';
-import {isEmpty} from 'lodash';
-
-/**
- * @internal
- */
-export class JsonSearchPanelImplModel extends HoistModel {
-    override xhImpl = true;
-
-    @managed gridModel: GridModel;
-    @managed docLoadTask: TaskObserver = TaskObserver.trackLast();
-    @managed nodeLoadTask: TaskObserver = TaskObserver.trackLast();
-
-    @bindable.ref error = null;
-    @bindable path: string = '';
-    @bindable pathOrValue: 'path' | 'value' = 'value';
-    @bindable pathFormat: 'XPath' | 'JSONPath' = 'XPath';
-    @bindable matchingNodes: string = '';
-    @bindable matchingNodeCount: number = 0;
-
-    get asPathList(): boolean {
-        return this.pathOrValue === 'path';
-    }
-
-    get queryBuffer(): number {
-        return this.componentProps.queryBuffer ?? 200;
-    }
-
-    get docSearchUrl(): string {
-        return this.componentProps.docSearchUrl;
-    }
-
-    get matchingNodesUrl(): string {
-        return this.componentProps.matchingNodesUrl;
-    }
-
-    get gridModelConfig() {
-        return this.componentProps.gridModelConfig;
-    }
-
-    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.gridModel.selectedRecord, this.pathOrValue, this.pathFormat],
-                run: () => this.loadJsonNodesAsync(),
-                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 loadJsonNodesAsync() {
-        if (!this.gridModel.selectedRecord) {
-            this.matchingNodeCount = 0;
-            this.matchingNodes = '';
-            return;
-        }
-
-        let nodes = await XH.fetchJson({
-            url: this.matchingNodesUrl,
-            params: {
-                path: this.path,
-                asPathList: this.pathOrValue === 'path',
-                json: this.gridModel.selectedRecord.data.json
-            }
-        }).linkTo(this.nodeLoadTask);
-
-        this.matchingNodeCount = nodes.length;
-        if (this.asPathList && this.pathFormat === 'XPath') {
-            nodes = nodes.map(it => this.convertToPath(it));
-        }
-        this.matchingNodes = JSON.stringify(nodes, null, 2);
-    }
-
-    private convertToPath(JSONPath: string): string {
-        return JSONPath.replaceAll(/^\$\['?/g, '/')
-            .replaceAll(/^\$/g, '')
-            .replaceAll(/'?]\['?/g, '/')
-            .replaceAll(/'?]$/g, '');
-    }
-}

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { JsonBlobModel } from '@xh/hoist/admin/tabs/userData/jsonblob/JsonBlobModel';
-export declare const JsonSearchPanel: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<JsonBlobModel>>, jsonSearchPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<JsonBlobModel>>;

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

@@ -1,27 +0,0 @@
-import { GridModel } from '@xh/hoist/cmp/grid';
-import { HoistModel, TaskObserver } from '@xh/hoist/core';
-/**
- * @internal
- */
-export declare class JsonSearchPanelImplModel extends HoistModel {
-    xhImpl: boolean;
-    gridModel: GridModel;
-    docLoadTask: TaskObserver;
-    nodeLoadTask: TaskObserver;
-    error: any;
-    path: string;
-    pathOrValue: 'path' | 'value';
-    pathFormat: 'XPath' | 'JSONPath';
-    matchingNodes: string;
-    matchingNodeCount: number;
-    get asPathList(): boolean;
-    get queryBuffer(): number;
-    get docSearchUrl(): string;
-    get matchingNodesUrl(): string;
-    get gridModelConfig(): any;
-    constructor();
-    onLinked(): void;
-    loadJsonDocsAsync(): Promise<void>;
-    private loadJsonNodesAsync;
-    private convertToPath;
-}