Support generic object data provider

local-libs/traceviewer-libs/react-components/package.json

@@ -28,6 +28,7 @@
         "@vscode/codicons": "^0.0.29",
         "chart.js": "^2.8.0",
         "d3": "^7.1.1",
+        "json-edit-react": "1.28.2",
         "lodash": "^4.17.15",
         "react-chartjs-2": "^2.7.6",
         "react-contexify": "^5.0.0",

local-libs/traceviewer-libs/react-components/src/components/data-output-component.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { AbstractOutputComponent, AbstractOutputProps, AbstractOutputState } from './abstract-output-component';
+import * as React from 'react';
+import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
+import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
+import { ObjectModel } from 'tsp-typescript-client/lib/models/object';
+import { isEmpty } from 'lodash';
+import { JSONBigUtils } from 'tsp-typescript-client/lib/utils/jsonbig-utils';
+import { JsonEditor } from 'json-edit-react';
+import debounce from 'lodash.debounce';
+import '../../style/react-contextify.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+
+type DataOutputProps = AbstractOutputProps & {};
+
+type DataOuputState = AbstractOutputState & {
+    model: ObjectModel
+};
+
+const MENU_ID = 'Data.context.menuId ';
+
+export class DataOutputComponent extends AbstractOutputComponent<AbstractOutputProps, DataOuputState> {
+    dataRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+    private _debouncedFetchData = debounce(() => this.fetchData(), 500);
+
+    constructor(props: AbstractOutputProps) {
+        super(props);
+        this.state = {
+            outputStatus: ResponseStatus.RUNNING,
+            model: { object: {} },
+        };
+        this.addPinViewOptions();
+    }
+
+    componentDidMount(): void {
+        this.waitAnalysisCompletion();
+    }
+
+    async fetchData(navObject?: { [key: string]: any }, scroll?: () => void): Promise<ResponseStatus> {
+        const useSelectionRange = this.props.outputDescriptor.capabilities?.selectionRange;
+        const parameters = useSelectionRange && this.props.selectionRange
+            ? QueryHelper.query({ ...navObject, 'count' : 500, 'selection_range' : { 'start': this.props.selectionRange.getStart(), 'end': this.props.selectionRange.getEnd() } } )
+            : QueryHelper.query({ ...navObject, 'count' : 500 });
+        const tspClientResponse = await this.props.tspClient.fetchObject(
+            this.props.traceId,
+            this.props.outputDescriptor.id,
+            parameters
+        );
+        const modelResponse = tspClientResponse.getModel();
+        if (tspClientResponse.isOk() && modelResponse) {
+            if (modelResponse.model) {
+                this.setState({
+                    outputStatus: modelResponse.status,
+                    model: modelResponse.model
+                }, scroll);
+            } else {
+                this.setState({
+                    outputStatus: modelResponse.status
+                });
+            }
+            return modelResponse.status;
+        }
+        this.setState({
+            outputStatus: ResponseStatus.FAILED
+        });
+        return ResponseStatus.FAILED;
+    }
+
+    resultsAreEmpty(): boolean {
+        return isEmpty(this.state.model);
+    }
+
+    renderMainArea(): React.ReactNode {
+        return (
+            <React.Fragment>
+                {this.state.outputStatus === ResponseStatus.COMPLETED ? (
+                    <div>
+                        <div
+                            ref={this.dataRef}
+                            className="data-output-main-area"
+                            style={{
+                                height: this.props.style.height,
+                                width: this.props.outputWidth - this.getHandleWidth()
+                            }}
+                        >
+                            {this.renderPrevButton()}
+                            {this.renderObject()}
+                            {this.renderNextButton()}
+                        </div>
+                    </div>
+                ) : (
+                    <div
+                        tabIndex={0}
+                        id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'}
+                        className="analysis-running-main-area"
+                    >
+                        <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />
+                        <span>Analysis running</span>
+                    </div>
+                )}
+            </React.Fragment>
+        );
+    }
+
+    private renderObject() {
+        const replacer = (_key: any, value: any) => {
+             return (typeof value === 'bigint') ? value.toString() + 'n' : value;
+        };
+        const obj = JSON.parse(JSONBigUtils.stringify(this.state.model.object, null, '\t'));
+        return (
+            <JsonEditor
+                data={ obj }
+                restrictEdit={ true }
+                showArrayIndices={ true }
+                collapse={ 2 }
+                rootName=''
+                rootFontSize={ '10px' }
+                minWidth={ '95%' }
+
+            />
+        );
+    }
+    private renderPrevButton() {
+        const navObject = { previous: this.state.model.previous };
+        const scroll = () => this.dataRef.current?.scrollTo({ top: this.dataRef.current.scrollHeight, left: 0 });
+        return (
+            <React.Fragment>
+                {navObject.previous != undefined ? (
+                    <div><button onClick={() => this.fetchData(navObject, scroll)}>Previous</button><br></br></div>
+                ) : (
+                    <></>
+                )}
+            </React.Fragment>
+        );
+    }
+
+    private renderNextButton() {
+        const navObject = { next: this.state.model.next };
+        const scroll = () => this.dataRef.current?.scrollTo({ top: 0, left: 0 });
+        return (
+            <React.Fragment>
+                {navObject.next != undefined ? (
+                    <div><br></br><button onClick={() => this.fetchData(navObject, scroll)}>Next</button></div>
+                ) : (
+                    <></>
+                )}
+            </React.Fragment>
+        );
+    }
+
+    setFocus(): void {
+        if (document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')) {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')?.focus();
+        } else {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id)?.focus();
+        }
+    }
+
+    protected async waitAnalysisCompletion(): Promise<void> {
+        let outputStatus = this.state.outputStatus;
+        const timeout = 500;
+        while (this.state && outputStatus === ResponseStatus.RUNNING) {
+            outputStatus = await this.fetchData();
+            await new Promise(resolve => setTimeout(resolve, timeout));
+        }
+    }
+
+    componentWillUnmount(): void {
+        // fix Warning: Can't perform a React state update on an unmounted component
+        this.setState = (_state, _callback) => undefined;
+    }
+
+    async componentDidUpdate(prevProps: DataOutputProps): Promise<void> {
+        if (this.props.selectionRange && this.props.selectionRange !== prevProps.selectionRange) {
+            this._debouncedFetchData();
+        }
+    }
+}

local-libs/traceviewer-libs/react-components/src/components/trace-context-component.tsx

@@ -22,6 +22,7 @@
 import * as Messages from 'traceviewer-base/lib/message-manager';
 import { signalManager } from 'traceviewer-base/lib/signals/signal-manager';
 import { BIMath } from 'timeline-chart/lib/bigint-utils';
+import { DataOutputComponent } from './data-output-component';
 import { DataTreeOutputComponent } from './datatree-output-component';
 import { cloneDeep } from 'lodash';
 import { UnitControllerHistoryHandler } from './utils/unit-controller-history-handler';
@@ -867,6 +868,14 @@
                                 </GanttChartOutputComponent>
                             );
                         }
+                        case ProviderType.DATA:
+                            return (
+                                <DataOutputComponent
+                                    key={output.id}
+                                    {...outputProps}
+                                    className={this.state.pinnedView?.id === output.id ? 'pinned-view-shadow' : ''}
+                                />
+                            );
                         default:
                             return (
                                 <NullOutputComponent

local-libs/traceviewer-libs/react-components/style/output-components-style.css

@@ -626,3 +626,10 @@ input[type='reset'].input-button {
         background: var(--theia-button-secondaryHoverBackground);
     }
 }
+
+.data-output-main-area {
+    white-space: pre-wrap;
+    overflow: hidden;
+    overflow-x: scroll;
+    overflow-y: scroll;
+}

yarn.lock

@@ -6686,6 +6686,14 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+[email protected]:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/json-edit-react/-/json-edit-react-1.28.2.tgz#5e36fd98e3706d7ea0ba4d9ec36bbed6f052d98f"
+  integrity sha512-+ZsVXwnuOvuyqeQBDOxMS63JmF3VwHDrA0TtjSEBSBtR+lteHN/QjQohqFzsam7AHPu75AabGXciVf0H6ne+/g==
+  dependencies:
+    object-property-assigner "^1.3.5"
+    object-property-extractor "^1.0.13"
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -7693,6 +7701,16 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
+object-property-assigner@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/object-property-assigner/-/object-property-assigner-1.3.5.tgz#f5037ff73b7b015a42e4059c3ff5c84017413ca2"
+  integrity sha512-DIzHzNSTnpoG8QPQCDNrHa6O3vLMhktK3Igirqpk523UYIVe8JNCKcn5C9WyLQxJc58EGsAIiiEu10gqPrud8w==
+
+object-property-extractor@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/object-property-extractor/-/object-property-extractor-1.0.13.tgz#fff188d6308ac5574eb2610221af906eb87b4f38"
+  integrity sha512-9kgEjTWDhTPuPn7nyof+5mLmCKBPKdU0c7IVpTbOvYKYSdXQ5skH4Pa/8MPbZXeyXBGrqS82JyWecsh6tMxiLw==
+
 object.assign@^4.1.4, object.assign@^4.1.7:
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"