Add VisualizationControls and use it in Grid component.

src/client/components/split-tile/split-tile.tsx

@@ -23,11 +23,11 @@ import { Stage } from "../../../common/models/stage/stage";
 import { Binary, Ternary, Unary } from "../../../common/utils/functional/functional";
 import { Fn } from "../../../common/utils/general/general";
 import { classNames } from "../../utils/dom/dom";
-import { SplitMenu } from "../split-menu/split-menu";
+import { SplitMenu, SplitMenuProps } from "../split-menu/split-menu";
 import { SvgIcon } from "../svg-icon/svg-icon";
 import { WithRef } from "../with-ref/with-ref";
 
-interface SplitTileProps {
+export interface SplitTileBaseProps {
   essence: Essence;
   split: Split;
   dimension: Dimension;
@@ -41,10 +41,18 @@ interface SplitTileProps {
   containerStage: Stage;
 }
 
+interface SplitTileProps extends SplitTileBaseProps {
+  splitMenuComponent: React.ComponentType<SplitMenuProps>;
+}
+
 const SPLIT_CLASS_NAME = "split";
 
+export const DefaultSplitTile: React.SFC<SplitTileBaseProps> = props => {
+  return <SplitTile {...props} splitMenuComponent={SplitMenu} />;
+};
+
 export const SplitTile: React.SFC<SplitTileProps> = props => {
-  const { essence, open, split, dimension, style, removeSplit, updateSplit, openMenu, closeMenu, dragStart, containerStage } = props;
+  const { splitMenuComponent: SplitMenu, essence, open, split, dimension, style, removeSplit, updateSplit, openMenu, closeMenu, dragStart, containerStage } = props;
 
   const title = split.getTitle(dimension);
 

src/client/components/split-tile/split-tiles-row.tsx

@@ -28,21 +28,29 @@ import { DraggedElementType, DragManager } from "../../utils/drag-manager/drag-m
 import { getMaxItems } from "../../utils/pill-tile/pill-tile";
 import { DragIndicator } from "../drag-indicator/drag-indicator";
 import { AddSplit } from "./add-split";
+import { DefaultSplitTile, SplitTileBaseProps } from "./split-tile";
 import "./split-tile.scss";
 import { SplitTiles } from "./split-tiles";
 
-interface SplitTilesRowProps {
+export interface SplitTilesRowBaseProps {
   clicker: Clicker;
   essence: Essence;
   menuStage: Stage;
 }
 
+interface SplitTilesRowProps extends SplitTilesRowBaseProps {
+  splitTileComponent: React.ComponentType<SplitTileBaseProps>;
+}
+
 interface SplitTilesRowState {
   dragPosition?: DragPosition;
   openedSplit?: Split;
   overflowOpen?: boolean;
 }
 
+export const DefaultSplitTilesRow: React.SFC<SplitTilesRowBaseProps> = props =>
+  <SplitTilesRow {...props} splitTileComponent={DefaultSplitTile} />;
+
 export class SplitTilesRow extends React.Component<SplitTilesRowProps, SplitTilesRowState> {
   private items = React.createRef<HTMLDivElement>();
 
@@ -189,13 +197,14 @@ export class SplitTilesRow extends React.Component<SplitTilesRowProps, SplitTile
   };
 
   render() {
-    const { essence, menuStage } = this.props;
+    const { essence, menuStage, splitTileComponent } = this.props;
     const { dragPosition, overflowOpen, openedSplit } = this.state;
     return <div className="split-tile" onDragEnter={this.dragEnter}>
       <div className="title">{STRINGS.split}</div>
       <div className="items" ref={this.items}>
         <SplitTiles
           essence={essence}
+          splitTileComponent={splitTileComponent}
           openedSplit={openedSplit}
           removeSplit={this.removeSplit}
           updateSplit={this.updateSplit}

src/client/components/split-tile/split-tiles.tsx

@@ -24,7 +24,7 @@ import { Fn } from "../../../common/utils/general/general";
 import { transformStyle } from "../../utils/dom/dom";
 import { SECTION_WIDTH } from "../../utils/pill-tile/pill-tile";
 import { TileOverflowContainer } from "../tile-overflow-container/tile-overflow-container";
-import { SplitTile } from "./split-tile";
+import { SplitTileBaseProps } from "./split-tile";
 
 interface SplitTilesProps {
   essence: Essence;
@@ -39,10 +39,25 @@ interface SplitTilesProps {
   overflowOpen: boolean;
   closeOverflowMenu: Fn;
   openOverflowMenu: Fn;
+  splitTileComponent: React.ComponentType<SplitTileBaseProps>;
 }
 
 export const SplitTiles: React.SFC<SplitTilesProps> = props => {
-  const { overflowOpen, closeOverflowMenu, openOverflowMenu, essence, maxItems, removeSplit, updateSplit, openedSplit, openMenu, closeMenu, dragStart, menuStage } = props;
+  const {
+    splitTileComponent: SplitTile,
+    overflowOpen,
+    closeOverflowMenu,
+    openOverflowMenu,
+    essence,
+    maxItems,
+    removeSplit,
+    updateSplit,
+    openedSplit,
+    openMenu,
+    closeMenu,
+    dragStart,
+    menuStage
+  } = props;
 
   const splits = essence.splits.splits.toArray();
 

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

@@ -30,14 +30,18 @@ import { DropIndicator } from "../../../components/drop-indicator/drop-indicator
 import { FilterTilesRow } from "../../../components/filter-tile/filter-tiles-row";
 import { ManualFallback } from "../../../components/manual-fallback/manual-fallback";
 import { SeriesTilesRow } from "../../../components/series-tile/series-tiles-row";
-import { SplitTilesRow } from "../../../components/split-tile/split-tiles-row";
+import {
+  DefaultSplitTilesRow,
+  SplitTilesRow,
+  SplitTilesRowBaseProps
+} from "../../../components/split-tile/split-tiles-row";
 import { VisSelector } from "../../../components/vis-selector/vis-selector";
 import { classNames } from "../../../utils/dom/dom";
 import { DataProvider } from "../../../visualizations/data-provider/data-provider";
 import { HighlightController } from "../../../visualizations/highlight-controller/highlight-controller";
 import { PartialFilter, PartialSeries } from "../partial-tiles-provider";
 
-interface VisualizationControlsProps {
+export interface VisualizationControlsBaseProps {
   essence: Essence;
   clicker: Clicker;
   stage: Stage;
@@ -50,8 +54,17 @@ interface VisualizationControlsProps {
   removeTile: Fn;
 }
 
+interface VisualizationControlsProps extends VisualizationControlsBaseProps {
+  splitTilesRow: React.ComponentType<SplitTilesRowBaseProps>;
+}
+
+export const DefaultVisualizationControls: React.SFC<VisualizationControlsBaseProps> = props => {
+  return <VisualizationControls {...props} splitTilesRow={DefaultSplitTilesRow} />;
+};
+
 export const VisualizationControls: React.SFC<VisualizationControlsProps> = props => {
   const {
+    splitTilesRow: SplitTilesRow,
     addSeries,
     addFilter,
     clicker,
@@ -177,5 +190,5 @@ function ChartWrapper(props: ChartWrapperProps) {
   </HighlightController>;
 }
 
-type VisualizationPanelProps = ChartPanelProps & VisualizationControlsProps;
+type VisualizationPanelProps = ChartPanelProps & VisualizationControlsBaseProps;
 export type VisualizationProps = Omit<VisualizationPanelProps, "chartComponent">;

src/client/visualizations/bar-chart/bar-chart.tsx

@@ -51,7 +51,7 @@ import { VerticalAxis } from "../../components/vertical-axis/vertical-axis";
 import { VisMeasureLabel } from "../../components/vis-measure-label/vis-measure-label";
 import { SPLIT, VIS_H_PADDING } from "../../config/constants";
 import { classNames, roundToPx } from "../../utils/dom/dom";
-import { ChartPanel, VisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
 import { hasHighlightOn } from "../highlight-controller/highlight-controller";
 import "./bar-chart.scss";
 import { BarCoordinates } from "./bar-coordinates";
@@ -158,7 +158,7 @@ function padDataset(originalDataset: Dataset, dimension: Dimension, measures: Me
 
 export function BarChartVisualization(props: VisualizationProps) {
   return <React.Fragment>
-    <VisualizationControls {...props} />
+    <DefaultVisualizationControls {...props} />
     <ChartPanel {...props} chartComponent={BarChart}/>
   </React.Fragment>;
 }

src/client/visualizations/grid/grid.tsx

@@ -36,9 +36,10 @@ import { FlattenedSplits } from "../../components/tabular-scroller/splits/flatte
 import { measureColumnsCount } from "../../components/tabular-scroller/utils/measure-columns-count";
 import { visibleIndexRange } from "../../components/tabular-scroller/visible-rows/visible-index-range";
 import { selectFirstSplitDatums } from "../../utils/dataset/selectors/selectors";
-import { ChartPanel, VisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { ChartPanel, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
 import "./grid.scss";
 import { MeasureRows } from "./measure-rows";
+import { GridVisualizationControls } from "./visualization-controls";
 
 interface GridState {
   segmentWidth: number;
@@ -47,7 +48,7 @@ interface GridState {
 
 export function GridVisualization(props: VisualizationProps) {
   return <React.Fragment>
-    <VisualizationControls {...props} />
+    <GridVisualizationControls {...props} />
     <ChartPanel {...props} chartComponent={Grid}/>
   </React.Fragment>;
 }

src/client/visualizations/grid/visualization-controls.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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";
+import { SplitMenu, SplitMenuProps } from "../../components/split-menu/split-menu";
+import { SplitTile, SplitTileBaseProps } from "../../components/split-tile/split-tile";
+import { SplitTilesRow, SplitTilesRowBaseProps } from "../../components/split-tile/split-tiles-row";
+import {
+  VisualizationControls,
+  VisualizationControlsBaseProps
+} from "../../views/cube-view/center-panel/center-panel";
+
+export const GridVisualizationControls: React.SFC<VisualizationControlsBaseProps> = props => {
+  return <VisualizationControls{...props} splitTilesRow={GridSplitTilesRow} />;
+};
+
+function GridSplitTilesRow(props: SplitTilesRowBaseProps) {
+  return <SplitTilesRow {...props} splitTileComponent={GridSplitTile} />;
+}
+
+function GridSplitTile(props: SplitTileBaseProps) {
+  return <SplitTile {...props} splitMenuComponent={GridSplitMenu} />;
+}
+
+// TODO: Really implement this menu!
+function GridSplitMenu(props: SplitMenuProps) {
+  return <React.Fragment>
+    <div>GRIIIIIID!</div>
+    <SplitMenu {...props}/>
+  </React.Fragment>;
+}

src/client/visualizations/heat-map/heat-map.tsx

@@ -30,14 +30,14 @@ import { Split } from "../../../common/models/split/split";
 import { HEAT_MAP_MANIFEST } from "../../../common/visualization-manifests/heat-map/heat-map";
 import { SPLIT } from "../../config/constants";
 import { fillDatasetWithMissingValues } from "../../utils/dataset/sparse-dataset/dataset";
-import { ChartPanel, VisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
 import "./heat-map.scss";
 import { LabelledHeatmap, TILE_SIZE } from "./labeled-heatmap";
 import scales from "./utils/scales";
 
 export function HeatMapVisualization(props: VisualizationProps) {
   return <React.Fragment>
-    <VisualizationControls {...props} />
+    <DefaultVisualizationControls {...props} />
     <ChartPanel {...props} chartComponent={HeatMap}/>
   </React.Fragment>;
 }

src/client/visualizations/line-chart/line-chart.tsx

@@ -19,7 +19,7 @@ import * as React from "react";
 import { ChartProps } from "../../../common/models/chart-props/chart-props";
 import { LINE_CHART_MANIFEST } from "../../../common/visualization-manifests/line-chart/line-chart";
 import { MessageCard } from "../../components/message-card/message-card";
-import { ChartPanel, VisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
 import { Charts } from "./charts/charts";
 import { InteractionController } from "./interactions/interaction-controller";
 import "./line-chart.scss";
@@ -32,7 +32,7 @@ const X_AXIS_HEIGHT = 30;
 
 export function LineChartVisualization(props: VisualizationProps) {
   return <React.Fragment>
-    <VisualizationControls {...props} />
+    <DefaultVisualizationControls {...props} />
     <ChartPanel {...props} chartComponent={LineChart}/>
   </React.Fragment>;
 }

src/client/visualizations/table/table.tsx

@@ -20,14 +20,14 @@ import * as React from "react";
 import { ChartProps } from "../../../common/models/chart-props/chart-props";
 import { ImmutableRecord } from "../../../common/utils/immutable-utils/immutable-utils";
 import { TableSettings } from "../../../common/visualization-manifests/table/settings";
-import { ChartPanel, VisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
 import { InteractionController } from "./interactions/interaction-controller";
 import { ScrolledTable } from "./scrolled-table/scrolled-table";
 import "./table.scss";
 
 export function TableVisualization(props: VisualizationProps) {
   return <React.Fragment>
-    <VisualizationControls {...props} />
+    <DefaultVisualizationControls {...props} />
     <ChartPanel {...props} chartComponent={Table}/>
   </React.Fragment>;
 }

src/client/visualizations/totals/totals.tsx

@@ -17,7 +17,7 @@
 
 import * as React from "react";
 import { ChartProps } from "../../../common/models/chart-props/chart-props";
-import { ChartPanel, VisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
 import { Total } from "./total";
 import "./totals.scss";
 
@@ -37,7 +37,7 @@ const BigNumbers: React.SFC<ChartProps> = ({ essence, data }) => {
 
 export function TotalsVisualization(props: VisualizationProps) {
   return <React.Fragment>
-    <VisualizationControls {...props} />
+    <DefaultVisualizationControls {...props} />
     <ChartPanel {...props} chartComponent={BigNumbers}/>
   </React.Fragment>;
 }