lift segment width

src/client/components/resize-handle/resize-handle.tsx

@@ -33,7 +33,6 @@ export interface ResizeHandleProps {
 }
 
 export interface ResizeHandleState {
-  dragging?: boolean;
   anchor?: number;
 }
 
@@ -53,17 +52,13 @@ export class ResizeHandle extends React.Component<ResizeHandleProps, ResizeHandl
     const eventX = this.getValue(event);
 
     this.setState({
-      dragging: true,
       anchor: eventX - value
     });
 
     event.preventDefault();
   };
 
   onGlobalMouseUp = () => {
-    this.setState({
-      dragging: false
-    });
     window.removeEventListener("mouseup", this.onGlobalMouseUp);
     window.removeEventListener("mousemove", this.onGlobalMouseMove);
 

src/client/utils/react/with-props.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2017-2021 Allegro.pl
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from "react";
+
+export function withProps<ComponentProps, ExtraProps>(Component: React.ComponentType<ComponentProps>, extraProps: ExtraProps): React.ComponentType<ComponentProps & ExtraProps> {
+  return function(componentProps: ComponentProps) {
+    return <Component {...componentProps} {...extraProps} />;
+  };
+}

src/client/views/cube-view/cube-view.tsx

@@ -498,11 +498,12 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
 
   // TODO: Refactor via https://github.com/allegro/turnilo/issues/799
   private chartStage(): Stage | null {
-    const { menuStage, layout: { factPanel, pinboard } } = this.state;
+    const { menuStage } = this.state;
+    const { centerPanel: { left, right } } = this.calculateStyles();
     if (!menuStage) return null;
     return menuStage.within({
-      left: factPanel.hidden ? 0 : factPanel.width,
-      right: pinboard.hidden ? 0 : pinboard.width,
+      left,
+      right,
       top: CONTROL_PANEL_HEIGHT
     });
   }

src/client/visualizations/grid/grid.tsx

@@ -16,58 +16,73 @@
 
 import * as React from "react";
 import { ChartProps } from "../../../common/models/chart-props/chart-props";
-import { MIN_DIMENSION_WIDTH } from "../../components/tabular-scroller/dimensions";
+import { Unary } from "../../../common/utils/functional/functional";
+import { MIN_DIMENSION_WIDTH, SEGMENT_WIDTH } from "../../components/tabular-scroller/dimensions";
+import { withProps } from "../../utils/react/with-props";
 import { ChartPanel, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
 import "./grid.scss";
 import { InteractionController } from "./interaction-controller";
 import makeQuery from "./make-query";
 import { ScrolledGrid } from "./scrolled-grid";
 import { GridVisualizationControls } from "./visualization-controls";
 
-export function GridVisualization(props: VisualizationProps) {
-  return <React.Fragment>
-    <GridVisualizationControls {...props} />
-    <ChartPanel {...props} queryFactory={makeQuery} chartComponent={Grid}/>
-  </React.Fragment>;
+interface GridProps extends ChartProps {
+  setSegmentWidth: Unary<number, void>;
+  segmentWidth: number;
 }
 
-class Grid extends React.Component<ChartProps, {}> {
-  private innerGridRef = React.createRef<HTMLDivElement>();
+const Grid: React.SFC<GridProps> = props => {
+  const { essence, segmentWidth, setSegmentWidth, stage, clicker, data } = props;
+  const availableWidth = stage.width - MIN_DIMENSION_WIDTH;
 
-  availableWidth(): number | undefined {
-    if (!this.innerGridRef.current) return undefined;
-    return this.innerGridRef.current.clientWidth - MIN_DIMENSION_WIDTH;
-  }
+  return <div className="grid-container">
+    <InteractionController
+      essence={essence}
+      clicker={clicker}
+      stage={stage}
+      segmentWidth={segmentWidth}
+    >
+      {({
+          columnWidth,
+          scrollTop,
+          setScrollTop,
+          handleClick
+        }) =>
+        <ScrolledGrid
+          essence={essence}
+          data={data}
+          stage={stage}
+          handleClick={handleClick}
+          setScrollTop={setScrollTop}
+          setSegmentWidth={setSegmentWidth}
+          availableWidth={availableWidth}
+          columnWidth={columnWidth}
+          segmentWidth={segmentWidth}
+          scrollTop={scrollTop}/>}
+    </InteractionController>
+  </div>;
+};
+
+interface GridVisualizationState {
+  segmentWidth: number;
+}
 
-  render(): JSX.Element {
-    const { essence, stage, clicker, data } = this.props;
+export class GridVisualization extends React.Component<VisualizationProps, GridVisualizationState> {
+  state: GridVisualizationState = {
+    segmentWidth: SEGMENT_WIDTH
+  };
+
+  setSegmentWidth = (segmentWidth: number) => {
+    this.setState({ segmentWidth });
+  }
 
-    return <div className="grid-container" ref={this.innerGridRef}>
-      <InteractionController
-        essence={essence}
-        clicker={clicker}
-        stage={stage}
-      >
-        {({
-            segmentWidth,
-            columnWidth,
-            scrollTop,
-            setSegmentWidth,
-            setScrollTop,
-            handleClick
-          }) =>
-          <ScrolledGrid
-            essence={essence}
-            data={data}
-            stage={stage}
-            handleClick={handleClick}
-            setScrollTop={setScrollTop}
-            setSegmentWidth={setSegmentWidth}
-            availableWidth={this.availableWidth()}
-            columnWidth={columnWidth}
-            segmentWidth={segmentWidth}
-            scrollTop={scrollTop}/>}
-      </InteractionController>
-    </div>;
+  render() {
+    const { segmentWidth } = this.state;
+    return <React.Fragment>
+      <GridVisualizationControls {...this.props} />
+      <ChartPanel {...this.props}
+                  queryFactory={makeQuery}
+                  chartComponent={withProps(Grid, { segmentWidth, setSegmentWidth: this.setSegmentWidth })}/>
+    </React.Fragment>;
   }
 }

src/client/visualizations/grid/interaction-controller.tsx

@@ -24,17 +24,15 @@ import { DimensionSort, SeriesSort, Sort, SortDirection } from "../../../common/
 import { Stage } from "../../../common/models/stage/stage";
 import { Binary, Ternary, Unary } from "../../../common/utils/functional/functional";
 import { ScrollerPart } from "../../components/scroller/scroller";
-import { MEASURE_WIDTH, SEGMENT_WIDTH, SPACE_LEFT } from "../../components/tabular-scroller/dimensions";
+import { MEASURE_WIDTH, SPACE_LEFT } from "../../components/tabular-scroller/dimensions";
 import { measureColumnsCount } from "../../components/tabular-scroller/utils/measure-columns-count";
 import { Position, seriesPosition, splitPosition } from "./utils/hover-position";
 import { mainSplit } from "./utils/main-split";
 
 interface InteractionsProps {
   handleClick: Ternary<number, number, ScrollerPart, void>;
   setScrollTop: Binary<number, number, void>;
-  setSegmentWidth: Unary<number, void>;
   columnWidth: number;
-  segmentWidth: number;
   scrollTop: number;
 }
 
@@ -43,32 +41,25 @@ interface InteractionControllerProps {
   clicker: Clicker;
   stage: Stage;
   children: Unary<InteractionsProps, React.ReactNode>;
+  segmentWidth: number;
 }
 
 interface InteractionControllerState {
-  segmentWidth: number;
   scrollTop: number;
 }
 
 export class InteractionController extends React.Component<InteractionControllerProps, InteractionControllerState> {
 
   state: InteractionControllerState = {
-    segmentWidth: SEGMENT_WIDTH,
     scrollTop: 0
   };
 
-  setSegmentWidth = (segmentWidth: number) => this.setState({ segmentWidth });
-
-  getSegmentWidth(): number {
-    const { segmentWidth } = this.state;
-    return segmentWidth || SEGMENT_WIDTH;
-  }
-
   setScrollTop = (scrollTop: number) => this.setState({ scrollTop });
 
   private getIdealColumnWidth(): number {
-    const availableWidth = this.props.stage.width - SPACE_LEFT - this.getSegmentWidth();
-    const count = measureColumnsCount(this.props.essence);
+    const { stage, segmentWidth, essence } = this.props;
+    const availableWidth = stage.width - SPACE_LEFT - segmentWidth;
+    const count = measureColumnsCount(essence);
 
     return count * MEASURE_WIDTH >= availableWidth ? MEASURE_WIDTH : availableWidth / count;
   }
@@ -95,11 +86,12 @@ export class InteractionController extends React.Component<InteractionController
   }
 
   calculatePosition(x: number, y: number, part: ScrollerPart): Position {
+    const { segmentWidth, essence } = this.props;
     switch (part) {
       case "top-left-corner":
-        return splitPosition(x, this.props.essence, this.getSegmentWidth());
+        return splitPosition(x, essence, segmentWidth);
       case "top-gutter":
-        return seriesPosition(x, this.props.essence, this.getSegmentWidth(), this.getIdealColumnWidth());
+        return seriesPosition(x, essence, segmentWidth, this.getIdealColumnWidth());
       default:
         return { element: "whitespace" };
     }
@@ -120,16 +112,14 @@ export class InteractionController extends React.Component<InteractionController
 
   render() {
     const { children } = this.props;
-    const { scrollTop, segmentWidth } = this.state;
+    const { scrollTop } = this.state;
 
     return <React.Fragment>
       {children({
         columnWidth: this.getIdealColumnWidth(),
         scrollTop,
-        segmentWidth,
         handleClick: this.handleClick,
-        setScrollTop: this.setScrollTop,
-        setSegmentWidth: this.setSegmentWidth
+        setScrollTop: this.setScrollTop
       })}
     </React.Fragment>;
   }

src/client/visualizations/grid/scrolled-grid.tsx

@@ -41,7 +41,7 @@ interface ScrolledGridProps {
   setSegmentWidth: Unary<number, void>;
   columnWidth: number;
   segmentWidth: number;
-  availableWidth?: number;
+  availableWidth: number;
   scrollTop: number;
 }
 

src/client/visualizations/table/interactions/interaction-controller.tsx

@@ -38,9 +38,7 @@ interface InteractionsProps {
   setHoverRow: Ternary<number, number, ScrollerPart, void>;
   resetHover: Fn;
   setScrollTop: Binary<number, number, void>;
-  setSegmentWidth: Unary<number, void>;
   columnWidth: number;
-  segmentWidth: number;
   scrollTop: number;
   hoverRow?: Datum;
 }
@@ -55,19 +53,18 @@ interface InteractionControllerProps {
   highlight: Highlight | null;
   saveHighlight: (clauses: List<FilterClause>, key?: string) => void;
   children: Unary<InteractionsProps, ReactNode>;
+  segmentWidth: number;
 }
 
 interface InteractionControllerState {
   hoverRow?: Datum;
-  segmentWidth: number;
   scrollTop: number;
 }
 
 export class InteractionController extends React.Component<InteractionControllerProps, InteractionControllerState> {
 
   state: InteractionControllerState = {
     hoverRow: null,
-    segmentWidth: SEGMENT_WIDTH,
     scrollTop: 0
   };
 
@@ -117,12 +114,10 @@ export class InteractionController extends React.Component<InteractionController
   }
 
   getSegmentWidth(): number {
-    const { segmentWidth } = this.state;
+    const { segmentWidth } = this.props;
     return segmentWidth || SEGMENT_WIDTH;
   }
 
-  setSegmentWidth = (segmentWidth: number) => this.setState({ segmentWidth });
-
   setHoverRow = (x: number, y: number, part: ScrollerPart) => {
     const { hoverRow } = this.state;
     const position = this.calculateMousePosition(x, y, part);
@@ -155,19 +150,17 @@ export class InteractionController extends React.Component<InteractionController
 
   render() {
     const { children } = this.props;
-    const { hoverRow, scrollTop, segmentWidth } = this.state;
+    const { hoverRow, scrollTop } = this.state;
 
     return <React.Fragment>
       {children({
         columnWidth: this.getIdealColumnWidth(),
         hoverRow,
         scrollTop,
-        segmentWidth,
         handleClick: this.handleClick,
         resetHover: this.resetHover,
         setHoverRow: this.setHoverRow,
-        setScrollTop: this.setScrollTop,
-        setSegmentWidth: this.setSegmentWidth
+        setScrollTop: this.setScrollTop
       })}
     </React.Fragment>;
   }

src/client/visualizations/table/scrolled-table/scrolled-table.tsx

@@ -55,7 +55,7 @@ interface ScrolledTableProps {
   scrollTop: number;
   hoverRow?: Datum;
   collapseRows: boolean;
-  availableWidth?: number;
+  availableWidth: number;
 }
 
 export const ScrolledTable: React.SFC<ScrolledTableProps> = props => {