Fix output component scrolling and layout

Since the timegraph-output-component creates two trees that each have
their own scrollbar, remove the scroll overflow from the parent
output-component-tree.

Add scrollable wrapper to the xy-output-component and
datatree-output-component trees. Make the timegraph-output-component
wrappers scrollable.

Set the main-output-component overflow to hidden to prevent the
timegraph-output-component markers tree from overflowing when the output
area is too small.

Remove the tree scroll synchronization from the parent class
AbstractTreeOutputComponent and instead add it to the only tree that
needs it, the timegraph tree.

Fix tree width calculation in AbstractTreeOutputComponent.

Fix markers layer height calculation to ignore scrollbar height when the
tree is collapsed.

Remove filler row from markers tree and chart when the model is empty.

Remove arbitrary main area width from abstract-output-component.

Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>

packages/react-components/src/components/abstract-output-component.tsx

@@ -101,7 +101,7 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
         if (this.mainAreaContainer.current) {
             return this.mainAreaContainer.current.clientWidth;
         }
-        return 1000;
+        return 0;
     }
 
     public getHandleWidth(): number {

packages/react-components/src/components/abstract-tree-output-component.tsx

@@ -6,10 +6,9 @@ export abstract class AbstractTreeOutputComponent<P extends AbstractOutputProps,
     renderMainArea(): React.ReactNode {
         // Make tree thiner when chart has a y-axis
         const yAxisBuffer = this.props.outputDescriptor.type === 'TREE_TIME_XY' ? this.props.style.yAxisWidth: 0;
-        const treeWidth = this.props.widthWPBugWorkaround - this.getHandleWidth() - this.props.style.chartWidth - yAxisBuffer;
+        const treeWidth = this.getMainAreaWidth() - this.props.style.chartWidth - yAxisBuffer;
         return <React.Fragment>
             <div ref={this.treeRef} className='output-component-tree'
-                onScroll={_ev => { this.synchronizeTreeScroll(); }}
                 style={{ width: treeWidth, height: this.props.style.height }}
             >
                 {this.renderTree()}
@@ -37,8 +36,6 @@ export abstract class AbstractTreeOutputComponent<P extends AbstractOutputProps,
 
     abstract renderChart(): React.ReactNode;
 
-    abstract synchronizeTreeScroll(): void;
-
     abstract fetchTree(): Promise<ResponseStatus>;
 
     protected async waitAnalysisCompletion(): Promise<void> {

packages/react-components/src/components/datatree-output-component.tsx

@@ -70,14 +70,16 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
         this.onToggleCollapse = this.onToggleCollapse.bind(this);
         this.onOrderChange = this.onOrderChange.bind(this);
         return this.state.xyTree.length
-            ? <EntryTree
-                entries={this.state.xyTree}
-                showCheckboxes={false}
-                collapsedNodes={this.state.collapsedNodes}
-                onToggleCollapse={this.onToggleCollapse}
-                onOrderChange={this.onOrderChange}
-                headers={this.state.columns}
-            />
+            ? <div className='scrollable' style={{ height: this.props.style.height, width: this.getMainAreaWidth() }}>
+                <EntryTree
+                    entries={this.state.xyTree}
+                    showCheckboxes={false}
+                    collapsedNodes={this.state.collapsedNodes}
+                    onToggleCollapse={this.onToggleCollapse}
+                    onOrderChange={this.onOrderChange}
+                    headers={this.state.columns}
+                />
+            </div>
             : undefined
             ;
     }

packages/react-components/src/components/timegraph-output-component.tsx

@@ -154,9 +154,6 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         if (this.timeGraphTreeRef.current) {
             this.rowController.verticalOffset = this.timeGraphTreeRef.current.scrollTop;
         }
-        if (this.markerTreeRef.current) {
-            this.markerRowController.verticalOffset = this.markerTreeRef.current.scrollTop;
-        }
     }
 
     async componentDidMount(): Promise<void> {
@@ -285,18 +282,18 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     }
 
     private getMarkersLayerHeight() {
-        return (this.state.markerCategoryEntries.length <= 1 ? 0 : (this.state.collapsedMarkerNodes.length ? 1 :
-            this.state.markerCategoryEntries.length) + 0.6) * 20;
+        const rowHeight = 20;
+        const scrollbarHeight = 10;
+        return this.state.markerCategoryEntries.length <= 1 ? 0 :
+            this.state.collapsedMarkerNodes.length ? rowHeight :
+            this.state.markerCategoryEntries.length * rowHeight + scrollbarHeight;
     }
 
     renderTree(): React.ReactNode {
         // TODO Show header, when we can have entries in-line with timeline-chart
         return <>
-            <div ref={this.timeGraphTreeRef} onScroll={_ev => { this.synchronizeTreeScroll(); }}
-                className='output-component-tree'
-                style={{
-                    height: parseInt(this.props.style.height.toString()) - this.getMarkersLayerHeight()
-                }}>
+            <div ref={this.timeGraphTreeRef} className='scrollable' onScroll={() => this.synchronizeTreeScroll()}
+                style={{ height: parseInt(this.props.style.height.toString()) - this.getMarkersLayerHeight() }}>
                 <EntryTree
                     collapsedNodes={this.state.collapsedNodes}
                     showFilter={false}
@@ -307,8 +304,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                     className="timegraph-tree"
                 />
             </div>
-            <div ref={this.markerTreeRef} onScroll={_ev => { this.synchronizeTreeScroll(); }}
-                className='output-component-tree'
+            <div ref={this.markerTreeRef} className='scrollable'
                 style={{ height: this.getMarkersLayerHeight() }}>
                 <EntryTree
                     collapsedNodes={this.state.collapsedMarkerNodes}
@@ -531,25 +527,27 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             states.push(state);
         });
 
-        const defaultRow = {
-            id: 1,
-            name: '',
-            range: {
-                start: this.props.viewRange.getStart(),
-                end: this.props.viewRange.getStart() + this.props.unitController.absoluteRange
-            },
-            states: [],
-            annotations: [],
-            prevPossibleState: BigInt(Number.MIN_SAFE_INTEGER),
-            nextPossibleState: BigInt(Number.MAX_SAFE_INTEGER)
-        };
-        rows.push(defaultRow);
+        if (markers.size > 0) {
+            const defaultRow = {
+                id: 1,
+                name: '',
+                range: {
+                    start: this.props.viewRange.getStart(),
+                    end: this.props.viewRange.getStart() + this.props.unitController.absoluteRange
+                },
+                states: [],
+                annotations: [],
+                prevPossibleState: BigInt(Number.MIN_SAFE_INTEGER),
+                nextPossibleState: BigInt(Number.MAX_SAFE_INTEGER)
+            };
+            rows.push(defaultRow);
 
-        annotationEntries.push({
-            id: 0,
-            labels: [''],
-            parentId: -1
-        });
+            annotationEntries.push({
+                id: 0,
+                labels: [''],
+                parentId: -1
+            });
+        }
 
         Array.from(markers.entries()).forEach((value, index) => {
             annotationEntries.push({

packages/react-components/src/components/xy-output-component.tsx

@@ -147,23 +147,23 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
         }
     }
 
-    synchronizeTreeScroll(): void { /* Nothing to do by default */ }
-
     renderTree(): React.ReactNode | undefined {
         this.onToggleCheck = this.onToggleCheck.bind(this);
         this.onToggleCollapse = this.onToggleCollapse.bind(this);
         this.onOrderChange = this.onOrderChange.bind(this);
         return this.state.xyTree.length ?
-            <EntryTree
-                entries={this.state.xyTree}
-                showCheckboxes={true}
-                collapsedNodes={this.state.collapsedNodes}
-                checkedSeries={this.state.checkedSeries}
-                onToggleCheck={this.onToggleCheck}
-                onToggleCollapse={this.onToggleCollapse}
-                onOrderChange={this.onOrderChange}
-                headers={this.state.columns}
-            />
+            <div className='scrollable' style={{ height: this.props.style.height }}>
+                <EntryTree
+                    entries={this.state.xyTree}
+                    showCheckboxes={true}
+                    collapsedNodes={this.state.collapsedNodes}
+                    checkedSeries={this.state.checkedSeries}
+                    onToggleCheck={this.onToggleCheck}
+                    onToggleCollapse={this.onToggleCollapse}
+                    onOrderChange={this.onOrderChange}
+                    headers={this.state.columns}
+                />
+            </div>
         : undefined
         ;
     }

packages/react-components/style/output-components-style.css

@@ -37,10 +37,10 @@
 
 .main-output-container {
     display: flex;
+    overflow: hidden;
 }
 
 .output-component-tree {
-    overflow-y: scroll;
     white-space: pre-wrap;
 }
 
@@ -49,6 +49,10 @@
     text-align: center;
 }
 
+.scrollable {
+    overflow: auto;
+}
+
 #timegraph-main {
     width: 100%;
     display: flex;