vis sekeleton (#917)

* visualization controls layout component to encapsulate styles

* skeleton component

* center panel and all descendants use new classes from visualizatio ncontrols layout

* remove module declaration from vis selector - this is something that parent should control

* add wait cursor on disabled tile

* Use skeleton in fallback in cube view

* lint fix

* Pass className to layout to differentiate between real and skeleton controls

* fix e2e test classes

* extract label utils for filter clause

* style fix

cypress/integration/boolean-filter-menu.spec.ts

@@ -17,7 +17,8 @@
 context("Boolean Filter Menu", () => {
 
   // TODO: FIX references
-  const booleanTile = () => cy.get(".filter-tile .items .filter:nth-child(2)");
+  const filterTiles = () => cy.get(".center-top-bar:not(.fallback) .filter-tile-row");
+  const booleanTile = () => filterTiles().find(".items .tile:nth-child(2)");
   const booleanMenu = () => cy.get(".boolean-filter-menu");
   const booleanMenuTable = () => booleanMenu().find(".menu-table");
   const falseOption = () => booleanMenuTable().find(".row:contains('false')");

cypress/integration/fixed-time-filter-menu.spec.ts

@@ -16,7 +16,8 @@
 context("Fixed Time Filter Menu", () => {
 
   // TODO: FIX references
-  const filterTile = () => cy.get(".filter-tile .items .filter:first");
+  const filterTiles = () => cy.get(".center-top-bar:not(.fallback) .filter-tile-row");
+  const filterTile = () => filterTiles().get(".items .tile:first");
   const timeFilter = () => cy.get(".time-filter-menu");
   const tabSelector = () => timeFilter().find(".group-container");
   const datePicker = () => timeFilter().find(".date-range-picker");

cypress/integration/line-chart.spec.ts

@@ -16,15 +16,17 @@
 context("Line Chart", () => {
 
   const header = () => cy.get(".cube-header-bar");
-  const timeFilter = () => cy.get(".filter-tile .filter:first");
+  const topBar = () => cy.get(".center-top-bar:not(.fallback)");
+  const filterTiles = () => topBar().find(".filter-tile-row");
+  const timeFilter = () => filterTiles().get(".tile:first");
   const lineChart = () => cy.get(".line-base-chart");
   const chartLine = () => lineChart().find(".chart-line");
   const highlighter = () => lineChart().find(".highlighter");
   const highlighterFrame = () => highlighter().find(".frame");
   const highlightModal = () => cy.get(".highlight-modal");
   const acceptHighlight = () => highlightModal().find(".accept");
   const dropHighlight = () => highlightModal().find(".drop");
-  const visSelector = () => cy.get(".vis-item");
+  const visSelector = () => topBar().find(".vis-item");
   const visSelectorMenu = () => cy.get(".vis-selector-menu");
   const visSelectorOk = () => visSelectorMenu().find(".button.primary");
   const visSettings = () => cy.get(".vis-settings");

cypress/integration/pinboard.spec.ts

@@ -21,7 +21,8 @@ context("Pinboard", () => {
   const pinboardSortError = () => pinboardMeasureTile().find(".pinboard-sort-error");
   const pinboardSortSelected = () => pinboardSort().find(".selected-item");
   const pinboardTiles = () => pinboardPanel().find(".pinboard-tile");
-  const measureTile = (title: string) => cy.get(`.series.measure:contains(${title})`);
+  const seriesTiles = () => cy.get(".center-top-bar:not(.fallback) .series-tile-row");
+  const measureTile = (title: string) => seriesTiles().find(`.tile.measure:contains(${title})`);
 
   describe("Pinboard", () => {
     const urls = {

cypress/integration/relative-time-filter-menu.spec.ts

@@ -16,7 +16,8 @@
 context("Relative Time Filter Menu", () => {
 
   // TODO: FIX references
-  const filterTile = () => cy.get(".filter-tile .items .filter:first");
+  const filterTiles = () => cy.get(".center-top-bar:not(.fallback) .filter-tile-row");
+  const filterTile = () => filterTiles().get(".items .tile:first");
   const timeFilter = () => cy.get(".time-filter-menu");
   const tabSelector = () => timeFilter().find(".group-container");
   const filterMenuOkButton = () => timeFilter().find(".button.primary");

cypress/integration/split-tile.spec.ts

@@ -15,13 +15,13 @@
  */
 context("Split Tile", () => {
 
-  const splitsContainer = () => cy.get(".split-tile");
+  const splitsContainer = () => cy.get(".center-top-bar:not(.fallback) .split-tile-row");
   const dragMask = () => cy.get(".drag-mask");
-  const splitTile = (dimension: string) => cy.get(`.split-tile .split.dimension:contains(${dimension})`);
-  const addSplitButton = () => cy.get(".split-tile .add-tile");
-  const splitItemsRow = () => cy.get(".split-tile .items");
-  const splitItems = () => cy.get(".split-tile .items .split.dimension");
-  const splitOverflow = () => cy.get(".split-tile .items .overflow.dimension");
+  const splitTile = (dimension: string) => splitsContainer().find(`.tile.dimension:contains(${dimension})`);
+  const addSplitButton = () => splitsContainer().find(".add-tile");
+  const splitItemsRow = () => splitsContainer().find(".items");
+  const splitItems = () => splitsContainer().find(".items .tile.dimension");
+  const splitOverflow = () => splitsContainer().find(".items .overflow.dimension");
   const splitOverflowMenu = () => cy.get(".overflow-menu");
   const addSplitMenu = () => cy.get(".add-tile-menu");
   const splitMenu = () => cy.get(".split-menu");
@@ -43,7 +43,7 @@ context("Split Tile", () => {
     splitItems().should("have.length", splits.length);
     splitItemsRow().within(() => {
       splits.forEach((split, idx) => {
-        cy.get(`.split.dimension:nth-child(${idx + 1})`)
+        cy.get(`.tile.dimension:nth-child(${idx + 1})`)
           .should("contain", split);
       });
     });
@@ -174,14 +174,14 @@ context("Split Tile", () => {
     it("should show overflowed split after clicking tile", () => {
       splitOverflow().click();
 
-      splitOverflowMenu().find(".split.dimension")
+      splitOverflowMenu().find(".tile.dimension")
         .should("contain", "City Name");
     });
 
     it("should open split menu inside overflow tile", () => {
       splitOverflow().click();
 
-      splitOverflowMenu().find(".split.dimension")
+      splitOverflowMenu().find(".tile.dimension")
         .click();
 
       splitMenu().should("exist");

cypress/integration/string-split-menu.spec.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 context("String Split Menu", () => {
-  const channelTile = () => cy.get(".split-tile .split.dimension:contains(Channel)");
+  const splitTiles = () => cy.get(".center-top-bar:not(.fallback) .split-tile-row");
+  const channelTile = () => splitTiles().find(".tile.dimension:contains(Channel)");
   const openChannelMenu = () => channelTile().click();
   const splitMenu = () => cy.get(".split-menu");
   const limitDropdown = () => splitMenu().find(".dropdown.down:nth-child(2)");

cypress/integration/table.spec.ts

@@ -16,8 +16,8 @@
 context("Table", () => {
 
   const header = () => cy.get(".cube-header-bar");
-  const filterTileRow = () => cy.get(".filter-tile");
-  const filterTile = (i: number) => filterTileRow().find(`.filter:nth-child(${i})`);
+  const filterTiles = () => cy.get(".center-top-bar:not(.fallback) .filter-tile-row");
+  const filterTile = (i: number) => filterTiles().find(`.tile:nth-child(${i})`);
   const table = () => cy.get(".table");
   const clickTarget = () => table().find(".event-target");
   const highlightModal = () => cy.get(".highlight-modal");

cypress/integration/totals.spec.ts

@@ -14,33 +14,39 @@
  * limitations under the License.
  */
 context("Totals", () => {
+
+  const topBar = () => cy.get(".center-top-bar:not(.fallback)");
+  const filters = () => topBar().find(".filter-tile-row .tile");
+  const series = () => topBar().find(".series-tile-row .tile");
+  const visualization = () => cy.get(".visualization-root");
+
   beforeEach(() => {
     cy.visit("http://localhost:9090/#wiki");
   });
 
   it("should load Totals visualisation", () => {
-    cy.get(".visualization-root")
+    visualization()
       .should("have.class", "totals");
   });
 
   it("should set Latest day time filter", () => {
-    cy.get(".filter-tile .filter")
+    filters()
       .should("have.length", 1)
       .should("contain", "Latest day");
   });
 
   it('should set default series "Added"', () => {
-    cy.get(".series-tile .series")
+    series()
       .should("have.length", 1)
       .should("contain", "Added");
   });
 
   it("should load data for defined filters and measures", () => {
-    cy.get(".visualization .total .measure-name")
+    visualization().find(".measure-name")
       .should("have.length", 1)
       .should("contain", "Added");
 
-    cy.get(".visualization .total .measure-value")
+    visualization().find(".measure-value")
       .should("have.length", 1)
       .should("contain", "9.4 m");
   });

src/client/components/filter-tile/filter-clause-label.scss

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2017-2022 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.
+ */
+
+.reading {
+  .filter-clause-title {
+    margin-right: 5px;
+  }
+}

src/client/components/filter-tile/filter-clause-label.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2017-2022 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 React from "react";
+import { Dimension } from "../../../common/models/dimension/dimension";
+import { Essence } from "../../../common/models/essence/essence";
+import { FilterClause } from "../../../common/models/filter-clause/filter-clause";
+import { getFormattedClause } from "../../../common/utils/formatter/formatter";
+import "./filter-clause-label.scss";
+import timeShiftLabel from "./time-shift-label";
+
+interface LabelProps {
+  dimension: Dimension;
+  clause: FilterClause;
+  essence: Essence;
+}
+
+export function FilterClauseLabel(props: LabelProps) {
+  const { dimension, clause, essence } = props;
+  const { title, values } = getFormattedClause(dimension, clause, essence.timezone);
+  const timeShift = timeShiftLabel(dimension, essence);
+
+  return <div className="reading">
+    {title ? <span className="filter-clause-title">{title}</span> : null}
+    <span className="values">{values} {timeShift}</span>
+  </div>;
+}

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

@@ -16,7 +16,6 @@
 
 import React from "react";
 import { Clicker } from "../../../common/models/clicker/clicker";
-import { isTimeAttribute } from "../../../common/models/data-cube/data-cube";
 import { Dimension } from "../../../common/models/dimension/dimension";
 import { Essence } from "../../../common/models/essence/essence";
 import { FilterClause, isTimeFilter } from "../../../common/models/filter-clause/filter-clause";
@@ -30,29 +29,8 @@ import { classNames } from "../../utils/dom/dom";
 import { FilterMenu } from "../filter-menu/filter-menu";
 import { SvgIcon } from "../svg-icon/svg-icon";
 import { WithRef } from "../with-ref/with-ref";
-
-function timeShiftLabel(dimension: Dimension, essence: Essence) {
-  if (!isTimeAttribute(essence.dataCube, dimension.expression)) return null;
-  if (!essence.hasComparison()) return null;
-  return `(Shift: ${essence.timeShift.getDescription(true)})`;
-}
-
-interface LabelProps {
-  dimension: Dimension;
-  clause: FilterClause;
-  essence: Essence;
-}
-
-function Label(props: LabelProps) {
-  const { dimension, clause, essence } = props;
-  const { title, values } = getFormattedClause(dimension, clause, essence.timezone);
-  const timeShift = timeShiftLabel(dimension, essence);
-
-  return <div className="reading">
-    {title ? <span className="dimension-title">{title}</span> : null}
-    <span className="values">{values} {timeShift}</span>
-  </div>;
-}
+import { FilterClauseLabel } from "./filter-clause-label";
+import timeShiftLabel from "./time-shift-label";
 
 function tileTitle(dimension: Dimension, clause: FilterClause, essence: Essence): string {
   const { title, values } = getFormattedClause(dimension, clause, essence.timezone);
@@ -102,7 +80,7 @@ export const FilterTile: React.FunctionComponent<FilterTileProps> = props => {
   return <WithRef>
     {({ ref: openOn, setRef }) => <React.Fragment>
       <div
-        className={classNames(FILTER_CLASS_NAME, "dimension", {
+        className={classNames("tile dimension", {
           selected: open,
           excluded,
           included: !excluded
@@ -114,7 +92,7 @@ export const FilterTile: React.FunctionComponent<FilterTileProps> = props => {
         style={style}
         title={tileTitle(dimension, clause, essence)}
       >
-        <Label dimension={dimension} clause={clause} essence={essence} />
+        <FilterClauseLabel dimension={dimension} clause={clause} essence={essence} />
         {removeClause && <div className="remove" onClick={() => removeClause(clause)}>
           <SvgIcon svg={require("../../icons/x.svg")} />
         </div>}

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

@@ -34,7 +34,6 @@ import { CubeContext, CubeContextValue } from "../../views/cube-view/cube-contex
 import { PartialFilter } from "../../views/cube-view/partial-tiles-provider";
 import { DragIndicator } from "../drag-indicator/drag-indicator";
 import { AddFilter } from "./add-filter";
-import "./filter-tile.scss";
 import { FilterTiles } from "./filter-tiles";
 
 interface FilterTilesRowProps {
@@ -199,7 +198,7 @@ export class FilterTilesRow extends React.Component<FilterTilesRowProps, FilterT
     const { dragPosition, openedClause, overflowOpen } = this.state;
     const { menuStage, timekeeper, locale, partialFilter, removePartialFilter } = this.props;
     const { essence, clicker } = this.context;
-    return <div className="filter-tile" onDragEnter={this.dragEnter}>
+    return <div className="tile-row filter-tile-row" onDragEnter={this.dragEnter}>
       <div className="title">{STRINGS.filter}</div>
       <div className="items" ref={this.items}>
         <FilterTiles

src/client/components/filter-tile/partial-filter-tile.tsx

@@ -45,7 +45,7 @@ export const PartialFilterTile: React.FunctionComponent<PartialFilterTileProps>
   const { closeItem, saveClause, essence, timekeeper, locale, clicker, stage, dimension, style } = props;
   return <WithRef>
     {({ ref: openOn, setRef }) => <div
-      className={classNames(FILTER_CLASS_NAME, "dimension", "selected", "included")}
+      className={"tile dimension selected included"}
       ref={setRef}
       style={style}>
       <div className="reading">{dimension.title}</div>