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>