Working stuff saved. Ammend this later

williamsyang-work · williamsyang-work · commit e758b952409b · 2025-04-11T19:58:31.000+02:00
diff --git a/packages/react-components/src/components/utils/filter-tree/table-cell.tsx b/packages/react-components/src/components/utils/filter-tree/table-cell.tsx
@@ -18,7 +18,7 @@ export class TableCell extends React.Component<TableCellProps> {
         if (node.elementIndex && node.elementIndex === index && node.getElement) {
             content = node.getElement();
         } else {
-            content = node.labels[index];
+            content = node.getEnrichedContent ? node.getEnrichedContent() : node.labels[index];
         }
 
         let title = undefined;
@@ -30,6 +30,7 @@ export class TableCell extends React.Component<TableCellProps> {
                 title = node.labels[index];
             }
         }
+
         return (
             <td key={this.props.index + '-td-' + this.props.node.id}>
                 <span title={title}>
diff --git a/packages/react-components/src/components/utils/filter-tree/table-row.tsx b/packages/react-components/src/components/utils/filter-tree/table-row.tsx
@@ -29,7 +29,8 @@ export class TableRow extends React.Component<TableRowProps> {
 
     isCollapsed = (): boolean => this.props.collapsedNodes.includes(this.props.node.id);
 
-    private handleCollapse = (): void => {
+    private handleCollapse = (e: React.MouseEvent<HTMLDivElement>): void => {
+        e.stopPropagation();
         this.props.onToggleCollapse(this.props.node.id);
     };
 
@@ -40,10 +41,10 @@ export class TableRow extends React.Component<TableRowProps> {
     renderToggleCollapse = (): React.ReactNode => {
         const width = (this.props.level + 1) * 12;
         return this.props.node.children.length === 0 ? (
-            <div style={{ width, paddingRight: 5, display: 'inline-block' }} />
+            <div style={{ width, paddingRight: 5, display: 'inline-block', flexShrink: 0 }} />
         ) : (
             <div
-                style={{ width, paddingRight: 5, textAlign: 'right', display: 'inline-block' }}
+                style={{ width, paddingRight: 5, textAlign: 'right', display: 'inline-block', flexShrink: 0 }}
                 onClick={this.handleCollapse}
             >
                 {this.isCollapsed() ? icons.expand : icons.collapse}
diff --git a/packages/react-components/src/components/utils/filter-tree/tree-node.tsx b/packages/react-components/src/components/utils/filter-tree/tree-node.tsx
@@ -8,4 +8,15 @@ export interface TreeNode {
     showTooltip?: boolean;
     elementIndex?: number;
     getElement?: () => JSX.Element;
+    /**
+     * TODO - Remove or fix this comment.
+     *
+     * This lets you add dynamic HTML where the content goes in a Tree Node
+     * Instead of just a string.
+     * I'm not sure what the use case of getElement()? is based on the logic in TableCell.jsx
+     * So I didn't use it.  But we may be able to just use that instead.
+     *
+     * -WY
+     */
+    getEnrichedContent?: () => JSX.Element;
 }
diff --git a/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx b/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx
@@ -9,12 +9,20 @@ import { ExperimentManager } from 'traceviewer-base/lib/experiment-manager';
 import { FilterTree } from '../components/utils/filter-tree/tree';
 import { TreeNode } from '../components/utils/filter-tree/tree-node';
 import { getAllExpandedNodeIds } from '../components/utils/filter-tree/utils';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
 
 export interface ReactAvailableViewsProps {
     id: string;
     title: string;
     tspClientProvider: ITspClientProvider;
     contextMenuRenderer?: (event: React.MouseEvent<HTMLDivElement>, output: OutputDescriptor) => void;
+    /**
+     * This is a placeholder for the customization implementation.
+     * TODO - Make sure this comment an accurate reflection before PR.
+     * @returns
+     */
+    onCustomizationClick?: (entry: OutputDescriptor, experiment: Experiment) => void;
 }
 
 export interface ReactAvailableViewsState {
@@ -179,8 +187,9 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
         const idStringToNodeId: { [key: string]: number } = {};
 
         // Fill-in the lookup table
-        list.forEach(output => {
+        list.forEach((output, index) => {
             const node: TreeNode = this.entryToTreeNode(output, idStringToNodeId);
+            node.elementIndex = index;
             lookup[output.id] = node;
             this._nodeIdToOutput[node.id] = output;
         });
@@ -207,34 +216,90 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
     }
 
     private entryToTreeNode(entry: OutputDescriptor, idStringToNodeId: { [key: string]: number }): TreeNode {
-        const labels = [entry.name];
-        let tooltips = undefined;
-        if (entry.description) {
-            tooltips = [entry.description];
-        }
-        let id = idStringToNodeId[entry.id];
-        if (id === undefined) {
-            id = this._idGenerator++;
-            idStringToNodeId[entry.id] = id;
-        }
+        let id = idStringToNodeId[entry.id] ?? (idStringToNodeId[entry.id] = this._idGenerator++);
+
         let parentId = -1;
         if (entry.parentId) {
-            const existingId = idStringToNodeId[entry.parentId];
-            if (existingId === undefined) {
-                parentId = this._idGenerator++;
-                idStringToNodeId[entry.parentId] = parentId;
-            } else {
-                parentId = existingId;
-            }
+            parentId = idStringToNodeId[entry.parentId] ?? (idStringToNodeId[entry.parentId] = this._idGenerator++);
         }
-        return {
-            labels: labels,
-            tooltips: tooltips,
+
+        const treeNode: TreeNode = {
+            labels: [entry.name],
+            tooltips: entry.description ? [entry.description] : undefined,
             showTooltip: true,
             isRoot: false,
-            id: id,
-            parentId: parentId,
-            children: []
-        } as TreeNode;
+            id,
+            parentId,
+            children: [],
+            getEnrichedContent: this.createEnrichedContent(entry)
+        };
+
+        return treeNode;
     }
+
+    private createEnrichedContent(entry: OutputDescriptor): (() => JSX.Element) | undefined {
+        const isCustomizable = entry.capabilities?.canCreate === true;
+        const isDeletable = entry.capabilities?.canDelete === true;
+
+        if (!isCustomizable && !isDeletable) {
+            return undefined;
+        }
+
+        const nameSpanStyle = {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            minWidth: 0,
+            flexShrink: 1
+        };
+
+        if (isCustomizable) {
+            return (): JSX.Element => (
+                <>
+                    <span style={nameSpanStyle}>{entry.name}</span>
+                    <div className="remove-output-button-container" title={`Add custom analysis to ${entry.name}`}>
+                        <button className="remove-output-button" onClick={e => this.handleCustomizeClick(entry, e)}>
+                            <FontAwesomeIcon icon={faPlus} />
+                        </button>
+                    </div>
+                </>
+            );
+        } else {
+            // Must be deletable based on our conditions
+            return (): JSX.Element => (
+                <>
+                    <span style={nameSpanStyle}>{entry.configuration?.name}</span>
+                    <div className="remove-output-button-container" title={`Remove "${entry.configuration?.name}"`}>
+                        <button className="remove-output-button" onClick={e => this.handleDeleteClick(entry, e)}>
+                            <FontAwesomeIcon icon={faTimes} />
+                        </button>
+                    </div>
+                </>
+            );
+        }
+    }
+
+    private handleCustomizeClick = async (entry: OutputDescriptor, e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this.props.onCustomizationClick && this._selectedExperiment) {
+            await this.props.onCustomizationClick(entry, this._selectedExperiment);
+            this.updateAvailableViews();
+        }
+    };
+
+    private handleDeleteClick = async (entry: OutputDescriptor, e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this._selectedExperiment?.UUID) {
+            console.dir(entry);
+            const res = await this.props.tspClientProvider
+                .getTspClient()
+                .deleteDerivedOutput(this._selectedExperiment.UUID, entry.parentId as string, entry.id);
+            if (!res.isOk()) {
+                // request is failing for some reason...
+                // But the output is removed when we update available views regardless
+                console.error(`${res.getStatusCode()} - ${res.getStatusMessage()}`);
+            }
+            this.updateAvailableViews();
+        }
+    };
 }
diff --git a/packages/react-components/style/output-components-style.css b/packages/react-components/style/output-components-style.css
@@ -246,7 +246,8 @@ canvas {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    display: block;
+    display: flex;
+    align-items: center;
 }
 
 .item-properties-table .table-tree td span {
@@ -557,3 +558,40 @@ canvas {
     margin-left: 4px;
     cursor: pointer;
 }
+
+input[type="button"].input-button,
+input[type="submit"].input-button,
+input[type="reset"].input-button {
+    border: none;
+    color: var(--trace-viewer-button-foreground);
+    background-color: var(--trace-viewer-button-background);
+    min-width: 65px;
+    outline: none;
+    cursor: pointer;
+    padding: 4px 9px;
+    font-size-adjust: 0.45;
+    margin-left: auto;
+    margin-right: 10px;
+    flex-shrink: 0;
+}
+
+.remove-output-button-container {
+    margin-right: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    margin-left: auto;
+}
+
+.remove-output-button {
+    background: none;
+    border: none;
+    visibility: visible;
+    margin-top: 2px;
+    color: var(--trace-viewer-ui-font-color0);
+    cursor: pointer;
+}
+
+.remove-output-button :hover {
+    background: none;
+}
diff --git a/theia-extensions/viewer-prototype/package.json b/theia-extensions/viewer-prototype/package.json
@@ -24,6 +24,7 @@
         "@theia/editor": "1.55.0",
         "@theia/filesystem": "1.55.0",
         "@theia/messages": "1.55.0",
+        "ajv": "^8.17.1",
         "animate.css": "^4.1.1",
         "traceviewer-base": "0.7.2",
         "traceviewer-react-components": "0.7.2",
diff --git a/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-views-widget.tsx b/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-views-widget.tsx
@@ -26,6 +26,7 @@ export class TraceExplorerViewsWidget extends ReactWidget {
                     id={this.id}
                     title={this.title.label}
                     tspClientProvider={this.tspClientProvider}
+                    onCustomizationClick={console.log}
                 ></ReactAvailableViewsWidget>
             </div>
         );
diff --git a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-frontend-module.ts b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-frontend-module.ts
@@ -46,7 +46,6 @@ export default new ContainerModule(bind => {
     bind(TabBarToolbarContribution).toService(TraceViewerToolbarContribution);
     bind(CommandContribution).toService(TraceViewerToolbarContribution);
     bind(TraceServerConnectionStatusClient).to(TraceServerConnectionStatusClientImpl).inSingletonScope();
-
     bind(TraceViewerWidget).toSelf();
     bind<WidgetFactory>(WidgetFactory)
         .toDynamicValue(context => ({
diff --git a/yarn.lock b/yarn.lock
@@ -4452,7 +4452,7 @@ ajv@^6.10.0, ajv@^6.12.0, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.5.3:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.0.1, ajv@^8.6.3, ajv@^8.9.0:
+ajv@^8.0.0, ajv@^8.0.1, ajv@^8.17.1, ajv@^8.6.3, ajv@^8.9.0:
   version "8.17.1"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
   integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
@@ -14099,7 +14099,7 @@ tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.6
 
 tsp-typescript-client@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.npmjs.org/tsp-typescript-client/-/tsp-typescript-client-0.6.0.tgz#59d53a76dcb7759f8f16eb9e798320a9a790b7b1"
+  resolved "https://registry.yarnpkg.com/tsp-typescript-client/-/tsp-typescript-client-0.6.0.tgz#59d53a76dcb7759f8f16eb9e798320a9a790b7b1"
   integrity sha512-K6tl773Nq7lo2XAexHBtVDKiFGUlrwFbzKL6aZkf33iHRyAM80xBc0cAoXXTgsSLb3pBodLQRVzw8sBTGWGwOA==
   dependencies:
     json-bigint sidorares/json-bigint#2c0a5f896d7888e68e5f4ae3c7ea5cd42fd54473

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export class TableCell extends React.Component<TableCellProps> {`
`18`	`18`	`if (node.elementIndex && node.elementIndex === index && node.getElement) {`
`19`	`19`	`content = node.getElement();`
`20`	`20`	`} else {`
`21`		`- content = node.labels[index];`
	`21`	`+ content = node.getEnrichedContent ? node.getEnrichedContent() : node.labels[index];`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`let title = undefined;`
`@@ -30,6 +30,7 @@ export class TableCell extends React.Component<TableCellProps> {`
`30`	`30`	`title = node.labels[index];`
`31`	`31`	`}`
`32`	`32`	`}`
	`33`	`+`
`33`	`34`	`return (`
`34`	`35`	`<td key={this.props.index + '-td-' + this.props.node.id}>`
`35`	`36`	`<span title={title}>`