Allow height resizing of tables and charts

Signed-off-by: Abhinava <fnu.abhinava@ericsson.com>
eclipse-cdt-cloud · Sep 29, 2020 · 593c794 · 593c794
1 parent 48f0a4a
commit 593c794
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 38 deletions.
diff --git a/viewer-prototype/src/browser/trace-viewer/components/abstract-output-component.tsx b/viewer-prototype/src/browser/trace-viewer/components/abstract-output-component.tsx
@@ -17,11 +17,20 @@ export interface AbstractOutputProps {
     resolution?: number;
     outputDescriptor: OutputDescriptor;
     style: OutputComponentStyle;
+    // WidthProvider (react-grid-layout version 0.16.7) has a bug.
+    // Workaround for it needs width to be explicitly passed
+    // https://github.com/STRML/react-grid-layout/issues/961
+    widthWPBugWorkaround: number;
     onOutputRemove: (outputId: string) => void;
     // TODO Not sure
     unitController: TimeGraphUnitController;
     onSelectionRangeChange?: () => void;
     onViewRangeChange?: () => void;
+    className?: string;
+    onMouseUp?: VoidFunction;
+    onMouseDown?: VoidFunction;
+    onTouchStart?: VoidFunction;
+    onTouchEnd?: VoidFunction;
 }
 
 export interface AbstractOutputState {
@@ -32,7 +41,7 @@ export interface AbstractOutputState {
 export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S extends AbstractOutputState> extends React.Component<P, S> {
 
     private mainAreaContainer: React.RefObject<HTMLDivElement>;
-    private handleWidth = 30;
+    private readonly HANDLE_WIDTH = 30;
 
     constructor(props: P) {
         super(props);
@@ -41,13 +50,23 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
 
     render(): JSX.Element {
         this.closeComponent = this.closeComponent.bind(this);
-        return <div className='output-container' style={{ width: this.props.style.width }}>
-            <div className='widget-handle' style={{ width: this.handleWidth }}>
+        const localStyle = Object.assign({},this.props.style);
+        localStyle.width = this.props.widthWPBugWorkaround;
+        return <div style={localStyle}
+            className={'output-container '+this.props.className}
+            onMouseUp={this.props.onMouseUp}
+            onMouseDown={this.props.onMouseDown}
+            onTouchStart={this.props.onTouchStart}
+            onTouchEnd={this.props.onTouchEnd}
+           >
+            <div className='widget-handle' style={{ width: this.HANDLE_WIDTH, height:this.props.style.height }}>
                 {this.renderTitleBar()}
             </div>
-            <div className='main-output-container' ref={this.mainAreaContainer} style={{ width: this.props.style.width - this.handleWidth }}>
+            <div className='main-output-container' ref={this.mainAreaContainer}
+            style={{ width: this.props.widthWPBugWorkaround - this.HANDLE_WIDTH, height:this.props.style.height }}>
                 {this.renderMainArea()}
             </div>
+            {this.props.children}
         </div>;
     }
 
@@ -75,7 +94,7 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
     }
 
     public getHandleWidth(): number {
-        return this.handleWidth;
+        return this.HANDLE_WIDTH;
     }
 
     abstract renderMainArea(): React.ReactNode;

diff --git a/viewer-prototype/src/browser/trace-viewer/components/abstract-tree-output-component.tsx b/viewer-prototype/src/browser/trace-viewer/components/abstract-tree-output-component.tsx
@@ -6,15 +6,15 @@ import { Entry, EntryHeader } from 'tsp-typescript-client/lib/models/entry';
 
 export abstract class AbstractTreeOutputComponent<P extends AbstractOutputProps, S extends AbstractOutputState> extends AbstractOutputComponent<P, S> {
     renderMainArea(): React.ReactNode {
-        const treeWidth = this.props.style.width - this.props.style.chartWidth - this.getHandleWidth();
+        const treeWidth = this.props.widthWPBugWorkaround - this.getHandleWidth() - this.props.style.chartWidth;
         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()}
             </div>
-            <div className='output-component-chart' style={{ width: this.props.style.chartWidth, backgroundColor: '#3f3f3f' }}>
+            <div className='output-component-chart' style={{ width: this.props.style.chartWidth, height: this.props.style.height , backgroundColor: '#3f3f3f' }}>
                 {this.renderChart()}
             </div>
         </React.Fragment>;

diff --git a/viewer-prototype/src/browser/trace-viewer/components/table-output-component.tsx b/viewer-prototype/src/browser/trace-viewer/components/table-output-component.tsx
@@ -52,7 +52,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
     }
 
     renderMainArea(): React.ReactNode {
-        return <div id='events-table' className='ag-theme-balham-dark' style={{height: this.props.tableHeight, width: this.props.tableWidth}}>
+        return <div id='events-table' className='ag-theme-balham-dark' style={{ height: this.props.style.height, width: this.props.widthWPBugWorkaround }}>
             <AgGridReact
                 columnDefs={this.columnArray}
                 rowModelType='infinite'

diff --git a/viewer-prototype/src/browser/trace-viewer/components/timegraph-output-component.tsx b/viewer-prototype/src/browser/trace-viewer/components/timegraph-output-component.tsx
@@ -142,15 +142,15 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     renderChart(): React.ReactNode {
         return <React.Fragment>
             {this.state.outputStatus === ResponseStatus.COMPLETED ?
-                <div id='timegraph-main' className='ps__child--consume' onWheel={ev => { ev.preventDefault(); ev.stopPropagation(); }} >
+                <div id='timegraph-main' className='ps__child--consume' onWheel={ev => { ev.preventDefault(); ev.stopPropagation(); }} style={{ height:this.props.style.height }} >
                     {this.renderTimeGraphContent()}
                 </div> :
                 'Analysis running...'}
         </React.Fragment>;
     }
 
     private renderTimeGraphContent() {
-        return <div id='main-timegraph-content' ref={this.horizontalContainer}>
+        return <div id='main-timegraph-content' ref={this.horizontalContainer} style={{height:this.props.style.height}} >
             {this.getChartContainer()}
         </div>;
     }
@@ -164,7 +164,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             options={
                 {
                     id: 'timegraph-chart',
-                    height: this.props.style.height,
+                    height: parseInt(this.props.style.height.toString()),
                     width: this.props.style.chartWidth, // this.props.style.mainWidth,
                     backgroundColor: this.props.style.chartBackgroundColor,
                     classNames: 'horizontal-canvas'
@@ -186,7 +186,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             options={{
                 id: 'vscroll',
                 width: 10,
-                height: this.props.style.height,
+                height: parseInt(this.props.style.height.toString()),
                 backgroundColor: this.props.style.naviBackgroundColor
             }}
             onWidgetResize={this.props.addWidgetResizeHandler}

diff --git a/viewer-prototype/src/browser/trace-viewer/components/trace-context-component.tsx b/viewer-prototype/src/browser/trace-viewer/components/trace-context-component.tsx
@@ -44,7 +44,8 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
     private readonly COMPONENT_WIDTH_PROPORTION: number = 0.85;
     private readonly DEFAULT_COMPONENT_WIDTH: number = 1500;
     private readonly DEFAULT_CHART_WIDTH: number = Math.floor(this.DEFAULT_COMPONENT_WIDTH * this.COMPONENT_WIDTH_PROPORTION);
-    private readonly DEFAULT_COMPONENT_HEIGHT: number = 300;
+    private readonly DEFAULT_COMPONENT_HEIGHT: number = 10;
+    private readonly DEFAULT_COMPONENT_ROWHEIGHT: number = 20;
     private readonly SCROLLBAR_PADDING: number = 12;
 
     private unitController: TimeGraphUnitController;
@@ -76,11 +77,11 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                 width: this.DEFAULT_COMPONENT_WIDTH, // 1245,
                 chartWidth: this.DEFAULT_CHART_WIDTH,
                 height: this.DEFAULT_COMPONENT_HEIGHT,
+                rowHeight: this.DEFAULT_COMPONENT_ROWHEIGHT,
                 naviBackgroundColor: 0x3f3f3f,
                 chartBackgroundColor: 0x3f3f3f,
                 cursorColor: 0x259fd8,
-                lineColor: 0xbbbbbb,
-                rowHeight: 20
+                lineColor: 0xbbbbbb
             }
         };
         const absoluteRange = traceRange.getDuration();
@@ -187,8 +188,12 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
             <div style={{ marginLeft: this.state.style.width - this.state.style.chartWidth }}>
                 <TimeAxisComponent unitController={this.unitController} style={this.state.style} addWidgetResizeHandler={this.addWidgetResizeHandler} />
             </div>
-            <ResponsiveGridLayout className='outputs-grid-layout' margin={[0, 5]} isResizable={false}
-                layouts={{ lg: layouts }} cols={{ lg: 1 }} breakpoints={{ lg: 1200 }} rowHeight={300} draggableHandle={'.widget-handle'}
+            {
+            // Syntax to use ReactGridLayout with Custom Components, while passing resized dimensions to children:
+            // https://github.com/STRML/react-grid-layout/issues/299#issuecomment-524959229
+            }
+            <ResponsiveGridLayout className='outputs-grid-layout' margin={[0, 5]} isResizable={true} isRearrangeable={true} isDraggable={true}
+                layouts={{ lg: layouts }} cols={{ lg: 1 }} breakpoints={{ lg: 1200 }} rowHeight={this.DEFAULT_COMPONENT_ROWHEIGHT} draggableHandle={'.widget-handle'}
                 style={{ paddingRight: this.SCROLLBAR_PADDING }}>
                 {outputs.map(output => {
                     const responseType = output.type;
@@ -201,22 +206,17 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                         selectionRange: this.state.currentTimeSelection,
                         style: this.state.style,
                         onOutputRemove: this.props.onOutputRemove,
-                        unitController: this.unitController
+                        unitController: this.unitController,
+                        widthWPBugWorkaround: this.state.style.width
                     };
                     switch (responseType) {
                         case 'TIME_GRAPH':
-                            return <div key={output.id}>
-                                <TimegraphOutputComponent key={output.id} {...outputProps}
-                                    addWidgetResizeHandler={this.addWidgetResizeHandler} />
-                            </div>;
+                            return <TimegraphOutputComponent key={output.id} {...outputProps}
+                                    addWidgetResizeHandler={this.addWidgetResizeHandler} />;
                         case 'TREE_TIME_XY':
-                            return <div key={output.id}>
-                                <XYOutputComponent key={output.id} {...outputProps} />
-                            </div>;
+                            return <XYOutputComponent key={output.id} {...outputProps} />;
                         case 'TABLE':
-                            return <div key={output.id}>
-                                <TableOutputComponent key={output.id} {...outputProps} />
-                            </div>;
+                            return <TableOutputComponent key={output.id} {...outputProps} />;
                         default:
                             break;
                     }
@@ -244,7 +244,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                     x: 0,
                     y: index,
                     w: 1,
-                    h: 1
+                    h: this.DEFAULT_COMPONENT_HEIGHT
                 };
                 layouts.push(itemLayout);
             });

diff --git a/viewer-prototype/src/browser/trace-viewer/components/utils/output-component-style.ts b/viewer-prototype/src/browser/trace-viewer/components/utils/output-component-style.ts
@@ -1,7 +1,11 @@
 export interface OutputComponentStyle {
     width: number;
     chartWidth: number;
-    height: number;
+    // react-grid-layout - The library used for resizing components
+    // inserts new React components during compilation, and the dimensions
+    // it returns are strings (pixels).
+    // Currently, the components are only height-resizable.
+    height: number | string;
     naviBackgroundColor: number;
     chartBackgroundColor: number;
     cursorColor: number;

diff --git a/viewer-prototype/src/browser/trace-viewer/components/utils/timegraph-container-component.tsx b/viewer-prototype/src/browser/trace-viewer/components/utils/timegraph-container-component.tsx
@@ -24,10 +24,21 @@ export class ReactTimeGraphContainer extends React.Component<ReactTimeGraphConta
         });
 
         this.props.onWidgetResize(() => {
-            if (this.container) { this.container.reInitCanvasSize(this.props.options.width); }
+            if (this.container) { this.container.reInitCanvasSize(this.props.options.width, this.props.options.height); }
         });
     }
 
+    shouldComponentUpdate(nextProps: ReactTimeGraphContainer.Props): boolean {
+        return nextProps.options.height !== this.props.options.height
+               || nextProps.options.width !== this.props.options.width ;
+    }
+
+    componentDidUpdate(prevProps: ReactTimeGraphContainer.Props): void {
+        if (prevProps.options.height !== this.props.options.height && this.container) {
+            this.container.reInitCanvasSize(this.props.options.width, this.props.options.height);
+        }
+    }
+
     render(): JSX.Element {
         return <canvas ref={ref => this.ref = ref || undefined} onWheel={e => e.preventDefault()}></canvas>;
     }

diff --git a/viewer-prototype/src/browser/trace-viewer/components/xy-output-component.tsx b/viewer-prototype/src/browser/trace-viewer/components/xy-output-component.tsx
@@ -109,7 +109,7 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
         // width={this.props.style.chartWidth}
         return <React.Fragment>
             {this.state.outputStatus === ResponseStatus.COMPLETED ?
-                <Line data={this.state.XYData} height={this.props.style.height} options={lineOptions} ref={this.lineChartRef}></Line> :
+                <Line data={this.state.XYData} height={parseInt(this.props.style.height.toString())} options={lineOptions} ref={this.lineChartRef}></Line> :
                 'Analysis running...'}
         </React.Fragment>;
     }