From c9c46f1dc8689816f2e12776667d001e26e2f60a Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 13:27:41 +0100
Subject: [PATCH 01/19] add context for customization settings

---
 .../turnilo-application.tsx                   | 12 +++++++
 .../views/cube-view/settings-context.ts       | 32 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/client/views/cube-view/settings-context.ts

diff --git a/src/client/applications/turnilo-application/turnilo-application.tsx b/src/client/applications/turnilo-application/turnilo-application.tsx
index 693f57641..da2a7dda2 100644
--- a/src/client/applications/turnilo-application/turnilo-application.tsx
+++ b/src/client/applications/turnilo-application/turnilo-application.tsx
@@ -38,6 +38,9 @@ import { GeneralError } from "../../views/error-view/general-error";
 import { HomeView } from "../../views/home-view/home-view";
 import "./turnilo-application.scss";
 import { cube, generalError, home, oauthCodeHandler, oauthMessageView, View } from "./view";
+import { SettingsContext, SettingsValue } from "../../views/cube-view/settings-context";
+import memoizeOne from "memoize-one";
+import { ClientCustomization } from "../../../common/models/customization/customization";
 
 export interface TurniloApplicationProps {
   version: string;
@@ -226,13 +229,22 @@ export class TurniloApplication extends React.Component<TurniloApplicationProps,
     }
   }
 
+  private getSettingsContext(): SettingsValue {
+    const { appSettings: { customization } } = this.props;
+    return this.constructSettingsContext(customization);
+  }
+
+  private constructSettingsContext = memoizeOne((customization: ClientCustomization) => ({ customization }));
+
   render() {
     return <React.StrictMode>
       <main className="turnilo-application">
+        <SettingsContext.Provider value={this.getSettingsContext()}>
         {this.renderView()}
         {this.renderAboutModal()}
         <Notifications/>
         <Questions/>
+        </SettingsContext.Provider>
       </main>
     </React.StrictMode>;
   }
diff --git a/src/client/views/cube-view/settings-context.ts b/src/client/views/cube-view/settings-context.ts
new file mode 100644
index 000000000..8327e6ed0
--- /dev/null
+++ b/src/client/views/cube-view/settings-context.ts
@@ -0,0 +1,32 @@
+/*
+ * 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, { useContext } from "react";
+import { ClientCustomization } from "../../../common/models/customization/customization";
+
+export interface SettingsValue {
+  customization: ClientCustomization;
+}
+
+export const SettingsContext = React.createContext<SettingsValue>({
+  get customization(): ClientCustomization {
+    throw new Error("Attempted to consume SettingsContext when there was no Provider in place.");
+  }
+});
+
+export function useSettingsContext(): SettingsValue {
+  return useContext(SettingsContext);
+}

From b902ec6ba56e5710af175c830caecb82f81f1472 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 13:27:52 +0100
Subject: [PATCH 02/19] example how to use settings context

---
 src/client/components/header-bar/header-bar.tsx | 6 +++---
 src/client/views/home-view/home-view.tsx        | 7 ++-----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/client/components/header-bar/header-bar.tsx b/src/client/components/header-bar/header-bar.tsx
index c8776248b..f36584cde 100644
--- a/src/client/components/header-bar/header-bar.tsx
+++ b/src/client/components/header-bar/header-bar.tsx
@@ -16,16 +16,16 @@
  */
 
 import React from "react";
-import { ClientCustomization } from "../../../common/models/customization/customization";
+import { useSettingsContext } from "../../views/cube-view/settings-context";
 import "./header-bar.scss";
 
 export interface HeaderBarProps {
-  customization?: ClientCustomization;
   title?: string;
 }
 
 export const HeaderBar: React.FunctionComponent<HeaderBarProps> = props => {
-  const { customization, title } = props;
+  const { title } = props;
+  const { customization } = useSettingsContext();
 
   const headerStyle: React.CSSProperties = customization && customization.headerBackground && { background: customization.headerBackground };
 
diff --git a/src/client/views/home-view/home-view.tsx b/src/client/views/home-view/home-view.tsx
index be24bfca8..5cf1d297d 100644
--- a/src/client/views/home-view/home-view.tsx
+++ b/src/client/views/home-view/home-view.tsx
@@ -73,15 +73,12 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
   }
 
   render() {
-    const { onOpenAbout, dataCubes, customization } = this.props;
+    const { onOpenAbout, dataCubes } = this.props;
     const { query } = this.state;
     const hasDataCubes = dataCubes.length > 0;
 
     return <div className="home-view">
-      <HeaderBar
-        customization={customization}
-        title={STRINGS.home}
-      >
+      <HeaderBar title={STRINGS.home}>
         <button className="text-button" onClick={onOpenAbout}>
           {STRINGS.infoAndFeedback}
         </button>

From f3080e84533af77049d8a123da20c8ac30a28fa4 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 13:48:52 +0100
Subject: [PATCH 03/19] add visualizationColors to customization settings

---
 src/client/deserializers/customization.ts     |  5 +-
 .../app-settings/app-settings.fixtures.ts     |  7 ++-
 src/common/models/colors/colors.ts            | 25 +++++++++
 .../customization/customization.fixtures.ts   |  5 ++
 .../customization/customization.mocha.ts      | 52 ++++++++++++++++++-
 .../models/customization/customization.ts     | 23 ++++++--
 6 files changed, 108 insertions(+), 9 deletions(-)

diff --git a/src/client/deserializers/customization.ts b/src/client/deserializers/customization.ts
index bf6064601..3d09dd1ff 100644
--- a/src/client/deserializers/customization.ts
+++ b/src/client/deserializers/customization.ts
@@ -19,7 +19,7 @@ import { ClientCustomization, SerializedCustomization } from "../../common/model
 import { deserialize as deserializeLocale } from "../../common/models/locale/locale";
 
 export function deserialize(customization: SerializedCustomization): ClientCustomization {
-  const { headerBackground, messages, locale, customLogoSvg, timezones, externalViews, hasUrlShortener, sentryDSN } = customization;
+  const { headerBackground, messages, locale, customLogoSvg, timezones, externalViews, hasUrlShortener, sentryDSN, visualizationColors } = customization;
   return {
     headerBackground,
     customLogoSvg,
@@ -28,6 +28,7 @@ export function deserialize(customization: SerializedCustomization): ClientCusto
     sentryDSN,
     messages,
     locale: deserializeLocale(locale),
-    timezones: timezones.map(Timezone.fromJS)
+    timezones: timezones.map(Timezone.fromJS),
+    visualizationColors
   };
 }
diff --git a/src/common/models/app-settings/app-settings.fixtures.ts b/src/common/models/app-settings/app-settings.fixtures.ts
index 950bd1561..81d3f8b44 100644
--- a/src/common/models/app-settings/app-settings.fixtures.ts
+++ b/src/common/models/app-settings/app-settings.fixtures.ts
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import { DEFAULT_COLORS } from "../colors/colors";
 import { LOCALES } from "../locale/locale";
 import { AppSettings, ClientAppSettings } from "./app-settings";
 
@@ -25,7 +26,8 @@ export const clientAppSettings: ClientAppSettings = {
     externalViews: [],
     timezones: [],
     locale: LOCALES["en-US"],
-    messages: {}
+    messages: {},
+    visualizationColors: DEFAULT_COLORS
   },
   oauth: { status: "disabled" },
   clientTimeout: 1000
@@ -38,7 +40,8 @@ export const appSettings: AppSettings = {
     locale: LOCALES["en-US"],
     externalViews: [],
     cssVariables: {},
-    messages: {}
+    messages: {},
+    visualizationColors: DEFAULT_COLORS
   },
   oauth: { status: "disabled" },
   version: 0
diff --git a/src/common/models/colors/colors.ts b/src/common/models/colors/colors.ts
index e4d2ded48..770f0ed70 100644
--- a/src/common/models/colors/colors.ts
+++ b/src/common/models/colors/colors.ts
@@ -27,3 +27,28 @@ export const NORMAL_COLORS = [
   "#B0B510",
   "#904064"
 ];
+
+export const DEFAULT_SERIES_COLORS = [
+  "#2D95CA",
+  "#EFB925",
+  "#DA4E99",
+  "#4CC873",
+  "#745CBD",
+  "#EA7136",
+  "#E68EE0",
+  "#218C35",
+  "#B0B510",
+  "#904064"
+];
+
+export const DEFAULT_MAIN_COLOR = "#FF5900";
+
+export const DEFAULT_COLORS: VisualizationColors = {
+  main: DEFAULT_MAIN_COLOR,
+  series: DEFAULT_SERIES_COLORS
+}
+
+export interface VisualizationColors {
+  main: string;
+  series: Array<string>;
+}
diff --git a/src/common/models/customization/customization.fixtures.ts b/src/common/models/customization/customization.fixtures.ts
index 285e7e61d..0a94b2ec2 100644
--- a/src/common/models/customization/customization.fixtures.ts
+++ b/src/common/models/customization/customization.fixtures.ts
@@ -14,10 +14,15 @@
  * limitations under the License.
  */
 
+import { DEFAULT_COLORS } from "../colors/colors";
 import { UrlShortenerContext } from "../url-shortener/url-shortener";
 import { Customization, CustomizationJS } from "./customization";
 
 export const customization: Customization = {
+  messages: {
+    dataCubeNotFound: "404: Data Cube Not Found"
+  },
+  visualizationColors: DEFAULT_COLORS,
   cssVariables: {
     "brand-selected": "orange",
     "brand": "red",
diff --git a/src/common/models/customization/customization.mocha.ts b/src/common/models/customization/customization.mocha.ts
index fad05f634..e0754d9bc 100644
--- a/src/common/models/customization/customization.mocha.ts
+++ b/src/common/models/customization/customization.mocha.ts
@@ -18,6 +18,7 @@
 import { expect } from "chai";
 import { Timezone } from "chronoshift";
 import * as sinon from "sinon";
+import { DEFAULT_COLORS, DEFAULT_MAIN_COLOR, DEFAULT_SERIES_COLORS } from "../colors/colors";
 import * as localeModule from "../locale/locale";
 import * as urlShortenerModule from "../url-shortener/url-shortener";
 import { Customization, DEFAULT_TIMEZONES, DEFAULT_TITLE, fromConfig, serialize } from "./customization";
@@ -161,6 +162,44 @@ describe("Customization", () => {
         });
       });
     });
+
+    describe("visualizationColors", () => {
+      it("should set default colors if no colors are defined", () => {
+        const customization = fromConfig({ ...customizationJS, visualizationColors: undefined });
+
+        expect(customization).to.deep.contain({ visualizationColors: DEFAULT_COLORS });
+      });
+
+      it("should override default main color when property is defined", () => {
+        const customization = fromConfig({
+          ...customizationJS, visualizationColors: {
+            main: "foobar-color"
+          }
+        });
+
+        expect(customization).to.deep.contain({
+          visualizationColors: {
+            series: DEFAULT_SERIES_COLORS,
+            main: "foobar-color"
+          }
+        });
+      });
+
+      it("should override default series colors when property is defined", () => {
+        const customization = fromConfig({
+          ...customizationJS, visualizationColors: {
+            series: ["one fish", "two fish", "red fish", "blue fish"]
+          }
+        });
+
+        expect(customization).to.deep.contain({
+          visualizationColors: {
+            series: ["one fish", "two fish", "red fish", "blue fish"],
+            main: DEFAULT_MAIN_COLOR
+          }
+        });
+      });
+    });
   });
 
   describe("serialize", () => {
@@ -203,6 +242,16 @@ describe("Customization", () => {
       expect(serialized).to.deep.contain({ timezones: ["Europe/Warsaw", "Asia/Manila"] });
     });
 
+    it("should pass visualizationColors as is", () => {
+      const colors = { main: "fake-color", series: ["one series color"] };
+      const serialized = serialize({
+        ...customization,
+        visualizationColors: colors
+      });
+
+      expect(serialized).to.deep.contain({ visualizationColors: colors });
+    });
+
     describe("externalViews", () => {
       // TODO: Implement
     });
@@ -212,7 +261,8 @@ describe("Customization", () => {
       it("should return hasUrlShortener true if has url shortener", () => {
         const serialized = serialize({
           ...customization,
-          urlShortener: (() => {}) as any
+          urlShortener: (() => {
+          }) as any
         });
 
         expect(serialized).to.contain({ hasUrlShortener: true });
diff --git a/src/common/models/customization/customization.ts b/src/common/models/customization/customization.ts
index 1e9092399..dfeb32d84 100644
--- a/src/common/models/customization/customization.ts
+++ b/src/common/models/customization/customization.ts
@@ -18,7 +18,8 @@
 import { Timezone } from "chronoshift";
 import { LOGGER } from "../../logger/logger";
 import { assoc } from "../../utils/functional/functional";
-import { isTruthy } from "../../utils/general/general";
+import { isNil, isTruthy } from "../../utils/general/general";
+import { DEFAULT_COLORS, DEFAULT_MAIN_COLOR, DEFAULT_SERIES_COLORS, VisualizationColors } from "../colors/colors";
 import { ExternalView, ExternalViewValue } from "../external-view/external-view";
 import { fromConfig as localeFromConfig, Locale, LocaleJS, serialize as serializeLocale } from "../locale/locale";
 import { fromConfig as urlShortenerFromConfig, UrlShortener, UrlShortenerDef } from "../url-shortener/url-shortener";
@@ -120,6 +121,7 @@ export interface Customization {
   cssVariables: CssVariables;
   locale: Locale;
   messages: Messages;
+  visualizationColors: VisualizationColors;
 }
 
 export interface CustomizationJS {
@@ -133,6 +135,7 @@ export interface CustomizationJS {
   sentryDSN?: string;
   cssVariables?: Record<string, string>;
   messages?: Messages;
+  visualizationColors?: Partial<VisualizationColors>;
 }
 
 export interface SerializedCustomization {
@@ -144,6 +147,7 @@ export interface SerializedCustomization {
   sentryDSN?: string;
   locale: Locale;
   messages: Messages;
+  visualizationColors: VisualizationColors;
 }
 
 export interface ClientCustomization {
@@ -155,6 +159,7 @@ export interface ClientCustomization {
   sentryDSN?: string;
   locale: Locale;
   messages: Messages;
+  visualizationColors: VisualizationColors;
 }
 
 function verifyCssVariables(cssVariables: Record<string, string>): CssVariables {
@@ -171,6 +176,12 @@ function verifyCssVariables(cssVariables: Record<string, string>): CssVariables
     }, {});
 }
 
+function readVisualizationColors(config: CustomizationJS): VisualizationColors {
+  if (isNil(config.visualizationColors)) return DEFAULT_COLORS;
+
+  return { ...DEFAULT_COLORS, ...config.visualizationColors };
+}
+
 export function fromConfig(config: CustomizationJS = {}): Customization {
   const {
     title = DEFAULT_TITLE,
@@ -193,6 +204,8 @@ export function fromConfig(config: CustomizationJS = {}): Customization {
     ? configExternalViews.map(ExternalView.fromJS)
     : [];
 
+  const visualizationColors = readVisualizationColors(config);
+
   return {
     title,
     headerBackground,
@@ -203,12 +216,13 @@ export function fromConfig(config: CustomizationJS = {}): Customization {
     timezones,
     locale: localeFromConfig(locale),
     messages,
-    externalViews
+    externalViews,
+    visualizationColors
   };
 }
 
 export function serialize(customization: Customization): SerializedCustomization {
-  const { customLogoSvg, timezones, headerBackground, locale, externalViews, sentryDSN, urlShortener, messages } = customization;
+  const { customLogoSvg, timezones, headerBackground, locale, externalViews, sentryDSN, urlShortener, messages, visualizationColors } = customization;
   return {
     customLogoSvg,
     externalViews,
@@ -217,7 +231,8 @@ export function serialize(customization: Customization): SerializedCustomization
     sentryDSN,
     locale: serializeLocale(locale),
     timezones: timezones.map(t => t.toJS()),
-    messages
+    messages,
+    visualizationColors
   };
 }
 

From 0078e496d793e78c560da916092801122fb373d2 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 14:11:01 +0100
Subject: [PATCH 04/19] use colors from customization settings instead of
 hardcoded series

---
 .../improved-bar-chart/bar-chart.tsx          |  4 ++-
 .../utils/bar-chart-model.ts                  | 14 ++++++-----
 .../charts/charts-per-series/series-chart.tsx |  5 ++--
 .../series-hover-content.tsx                  | 10 +++++---
 .../charts/charts-per-split/split-chart.tsx   | 25 +++++++++++++------
 .../charts-per-split/split-hover-content.tsx  |  5 ++--
 .../line-chart/legend/legend.tsx              |  5 ++--
 src/common/models/colors/colors.ts            | 15 +----------
 8 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx
index 63efad50f..4255437ee 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx
@@ -25,6 +25,7 @@ import { MessageCard } from "../../../components/message-card/message-card";
 import { Scroller } from "../../../components/scroller/scroller";
 import { SPLIT } from "../../../config/constants";
 import { selectMainDatum } from "../../../utils/dataset/selectors/selectors";
+import { useSettingsContext } from "../../../views/cube-view/settings-context";
 import { Highlight } from "../../highlight-controller/highlight";
 import { BarCharts } from "./bar-charts/bar-charts";
 import { InteractionController } from "./interactions/interaction-controller";
@@ -49,8 +50,9 @@ interface BarChartProps {
 }
 
 export const BarChart: React.FunctionComponent<BarChartProps> = props => {
+  const { customization } = useSettingsContext();
   const { dataset, essence, stage, highlight, acceptHighlight, dropHighlight, saveHighlight } = props;
-  const model = create(essence, dataset);
+  const model = create(essence, dataset, customization);
 
   const transposedDataset = transposeDataset(dataset, model);
   if (transposedDataset.length === 0) {
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/utils/bar-chart-model.ts b/src/client/visualizations/bar-chart/improved-bar-chart/utils/bar-chart-model.ts
index ba1c141cd..d17ccff09 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/utils/bar-chart-model.ts
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/utils/bar-chart-model.ts
@@ -17,7 +17,8 @@
 import { Timezone } from "chronoshift";
 import { List, OrderedMap } from "immutable";
 import { Dataset, Datum } from "plywood";
-import { NORMAL_COLORS } from "../../../../../common/models/colors/colors";
+import { VisualizationColors } from "../../../../../common/models/colors/colors";
+import { ClientCustomization } from "../../../../../common/models/customization/customization";
 import { Dimension } from "../../../../../common/models/dimension/dimension";
 import { Essence } from "../../../../../common/models/essence/essence";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
@@ -70,17 +71,18 @@ function readCommons(essence: Essence): Omit<BarChartModelCommons, "variant"> {
   };
 }
 
-function createColorMap(nominalSplit: Split, dataset: Dataset): ColorMap {
+function createColorMap(nominalSplit: Split, dataset: Dataset, colors: VisualizationColors): ColorMap {
   const datums = selectFirstSplitDatums(dataset);
   return datums.reduce<ColorMap>((map: ColorMap, datum: Datum, i: number) => {
     const key = String(nominalSplit.selectValue(datum));
-    const colorIndex = i % NORMAL_COLORS.length;
-    const color = NORMAL_COLORS[colorIndex];
+    const colorIndex = i % colors.series.length;
+    const color = colors.series[colorIndex];
     return map.set(key, color);
   }, OrderedMap<string, Color>());
 }
 
-export function create(essence: Essence, dataset: Dataset): BarChartModel {
+export function create(essence: Essence, dataset: Dataset, customization: ClientCustomization): BarChartModel {
+  const { visualizationColors } = customization;
   const commons = readCommons(essence);
   if (!hasNominalSplit(essence)) {
     return {
@@ -90,7 +92,7 @@ export function create(essence: Essence, dataset: Dataset): BarChartModel {
   }
   const nominalSplit = getNominalSplit(essence);
   const nominalDimension = getNominalDimension(essence);
-  const colors = createColorMap(nominalSplit, dataset);
+  const colors = createColorMap(nominalSplit, dataset, visualizationColors);
   return {
     ...commons,
     variant: ModelVariantId.STACKED,
diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
index 3de5912b3..cc74b88cb 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
@@ -16,7 +16,6 @@
 
 import { Dataset, Datum, NumberRange, TimeRange } from "plywood";
 import React from "react";
-import { NORMAL_COLORS } from "../../../../../common/models/colors/colors";
 import { Essence } from "../../../../../common/models/essence/essence";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
 import { Stage } from "../../../../../common/models/stage/stage";
@@ -32,6 +31,7 @@ import { extentAcrossSplits } from "../../utils/extent";
 import { ContinuousTicks } from "../../utils/pick-x-axis-ticks";
 import { getContinuousSplit, getNominalSplit, hasNominalSplit } from "../../utils/splits";
 import { SeriesHoverContent } from "./series-hover-content";
+import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 
 interface SeriesChartProps {
   chartId: string;
@@ -46,6 +46,7 @@ interface SeriesChartProps {
 }
 
 export const SeriesChart: React.FunctionComponent<SeriesChartProps> = props => {
+  const { customization: { visualizationColors } } = useSettingsContext();
   const { chartId, interactions, visualisationStage, chartStage, essence, series, xScale, xTicks, dataset } = props;
   const hasComparison = essence.hasComparison();
   const continuousSplitDataset = selectFirstSplitDataset(dataset);
@@ -84,7 +85,7 @@ export const SeriesChart: React.FunctionComponent<SeriesChartProps> = props => {
       {({ yScale, lineStage }) => <React.Fragment>
         {continuousSplitDataset.data.map((datum, index) => {
           const splitKey = nominalSplit.selectValue(datum);
-          const color = NORMAL_COLORS[index];
+          const color = visualizationColors.series[index];
           return <ColoredSeriesChartLine
             key={String(splitKey)}
             xScale={xScale}
diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx
index a17912e2d..bf32dfed5 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx
@@ -17,13 +17,14 @@
 import { Dataset, Datum, PlywoodRange } from "plywood";
 import React from "react";
 import { ReactNode } from "react";
-import { NORMAL_COLORS } from "../../../../../common/models/colors/colors";
+import { VisualizationColors } from "../../../../../common/models/colors/colors";
 import { Essence } from "../../../../../common/models/essence/essence";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
 import { ColorEntry, createColorEntry } from "../../../../components/color-swabs/color-entry";
 import { ColorSwabs } from "../../../../components/color-swabs/color-swabs";
 import { SeriesBubbleContent } from "../../../../components/series-bubble-content/series-bubble-content";
 import { selectSplitDataset } from "../../../../utils/dataset/selectors/selectors";
+import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 import { getContinuousDimension, getContinuousReference, getNominalSplit, hasNominalSplit } from "../../utils/splits";
 
 function findSplitDatumByAttribute(d: Datum, dimensionName: string, range: PlywoodRange): Datum {
@@ -39,14 +40,14 @@ function measureLabel(dataset: Dataset, range: PlywoodRange, series: ConcreteSer
   return <SeriesBubbleContent series={series} datum={datum} showPrevious={essence.hasComparison()}/>;
 }
 
-function colorEntries(dataset: Dataset, range: PlywoodRange, series: ConcreteSeries, essence: Essence): ColorEntry[] {
+function colorEntries(dataset: Dataset, range: PlywoodRange, series: ConcreteSeries, essence: Essence, visualizationColors: VisualizationColors): ColorEntry[] {
   const { data } = dataset;
   const nominalSplit = getNominalSplit(essence);
   const continuousRef = getContinuousReference(essence);
   const hasComparison = essence.hasComparison();
   return data.map((datum, i) => {
     const name = String(nominalSplit.selectValue(datum));
-    const color = NORMAL_COLORS[i];
+    const color = visualizationColors.series[i];
     const hoverDatum = findSplitDatumByAttribute(datum, continuousRef, range);
 
     if (!hoverDatum) {
@@ -75,9 +76,10 @@ interface SeriesHoverContentProps {
 }
 
 export const SeriesHoverContent: React.FunctionComponent<SeriesHoverContentProps> = props => {
+  const { customization: { visualizationColors } } = useSettingsContext();
   const { essence, range, series, dataset } = props;
   if (hasNominalSplit(essence)) {
-    const entries = colorEntries(dataset, range, series, essence);
+    const entries = colorEntries(dataset, range, series, essence, visualizationColors);
     return <ColorSwabs colorEntries={entries} />;
   }
   return <React.Fragment>
diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx
index 8e9751b01..dc7c4c561 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-split/split-chart.tsx
@@ -16,12 +16,12 @@
 
 import { Dataset, Datum, NumberRange, TimeRange } from "plywood";
 import React from "react";
-import { NORMAL_COLORS } from "../../../../../common/models/colors/colors";
 import { Essence } from "../../../../../common/models/essence/essence";
 import { defaultFormatter } from "../../../../../common/models/series/series-format";
 import { Stage } from "../../../../../common/models/stage/stage";
 import { Unary } from "../../../../../common/utils/functional/functional";
 import { selectSplitDataset } from "../../../../utils/dataset/selectors/selectors";
+import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 import { BaseChart } from "../../base-chart/base-chart";
 import { ColoredSeriesChartLine } from "../../chart-line/colored-series-chart-line";
 import { SingletonSeriesChartLine } from "../../chart-line/singleton-series-chart-line";
@@ -47,18 +47,29 @@ interface SplitChartProps {
 }
 
 export const SplitChart: React.FunctionComponent<SplitChartProps> = props => {
-  const { chartId, interactions, visualisationStage, chartStage, essence, xScale, xTicks, selectDatum, dataset } = props;
+  const { customization: { visualizationColors } } = useSettingsContext();
+  const {
+    chartId,
+    interactions,
+    visualisationStage,
+    chartStage,
+    essence,
+    xScale,
+    xTicks,
+    selectDatum,
+    dataset
+  } = props;
   const { interaction } = interactions;
   const splitDatum = selectDatum(dataset);
   const splitDataset = selectSplitDataset(splitDatum);
 
   const series = essence.getConcreteSeries();
 
-  const label = <Label essence={essence} datum={splitDatum} />;
+  const label = <Label essence={essence} datum={splitDatum}/>;
   const hoverContent = isHover(interaction) && <SplitHoverContent
     interaction={interaction}
     essence={essence}
-    dataset={splitDataset} />;
+    dataset={splitDataset}/>;
 
   const continuousSplit = getContinuousSplit(essence);
   const getX = (d: Datum) => continuousSplit.selectValue<TimeRange | NumberRange>(d);
@@ -85,7 +96,7 @@ export const SplitChart: React.FunctionComponent<SplitChartProps> = props => {
           dataset={splitDataset.data}
           stage={lineStage}
           essence={essence}
-          series={firstSeries} />;
+          series={firstSeries}/>;
       }}
     </BaseChart>;
   }
@@ -104,7 +115,7 @@ export const SplitChart: React.FunctionComponent<SplitChartProps> = props => {
     yDomain={domain}>
     {({ yScale, lineStage }) => <React.Fragment>
       {series.toArray().map((series, index) => {
-        const color = NORMAL_COLORS[index];
+        const color = visualizationColors.series[index];
         return <ColoredSeriesChartLine
           key={series.plywoodKey()}
           xScale={xScale}
@@ -114,7 +125,7 @@ export const SplitChart: React.FunctionComponent<SplitChartProps> = props => {
           stage={lineStage}
           essence={essence}
           series={series}
-          color={color} />;
+          color={color}/>;
       })}
     </React.Fragment>}
   </BaseChart>;
diff --git a/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx b/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx
index e63f88b64..d826dda38 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx
@@ -16,12 +16,12 @@
 
 import { Dataset, Datum } from "plywood";
 import React from "react";
-import { NORMAL_COLORS } from "../../../../../common/models/colors/colors";
 import { Essence } from "../../../../../common/models/essence/essence";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
 import { createColorEntry } from "../../../../components/color-swabs/color-entry";
 import { ColorSwabs } from "../../../../components/color-swabs/color-swabs";
 import { SeriesBubbleContent } from "../../../../components/series-bubble-content/series-bubble-content";
+import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 import { Hover } from "../../interactions/interaction";
 import { getContinuousReference } from "../../utils/splits";
 
@@ -38,9 +38,10 @@ interface ColoredSeriesProps {
 }
 
 const ColoredSeries: React.FunctionComponent<ColoredSeriesProps> = props => {
+  const { customization: { visualizationColors } } = useSettingsContext();
   const { datum, hasComparison, series } = props;
   const colorEntries = series.map((series, index) => {
-    const color = NORMAL_COLORS[index];
+    const color = visualizationColors.series[index];
     const name = series.title();
     return createColorEntry({ color, name, hasComparison, datum, series });
   });
diff --git a/src/client/visualizations/line-chart/legend/legend.tsx b/src/client/visualizations/line-chart/legend/legend.tsx
index af7a99667..52362504d 100644
--- a/src/client/visualizations/line-chart/legend/legend.tsx
+++ b/src/client/visualizations/line-chart/legend/legend.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from "react";
-import { NORMAL_COLORS } from "../../../../common/models/colors/colors";
+import { useSettingsContext } from "../../../views/cube-view/settings-context";
 import "./legend.scss";
 
 export interface LegendProps {
@@ -28,12 +28,13 @@ interface LegendValuesProps {
 }
 
 const LegendValues: React.FunctionComponent<LegendValuesProps> = props => {
+  const { customization: { visualizationColors } } = useSettingsContext();
   const { values } = props;
   return <div className="legend-values">
     <table className="legend-values-table">
       <tbody>
       {values.map((value, i) => {
-        const style = { background: NORMAL_COLORS[i] };
+        const style = { background: visualizationColors.series[i] };
         return <tr key={value} className="legend-value">
           <td className="legend-value-color-cell">
             <div className="legend-value-color" style={style} />
diff --git a/src/common/models/colors/colors.ts b/src/common/models/colors/colors.ts
index 770f0ed70..0f3f2c5c3 100644
--- a/src/common/models/colors/colors.ts
+++ b/src/common/models/colors/colors.ts
@@ -15,19 +15,6 @@
  * limitations under the License.
  */
 
-export const NORMAL_COLORS = [
-  "#2D95CA",
-  "#EFB925",
-  "#DA4E99",
-  "#4CC873",
-  "#745CBD",
-  "#EA7136",
-  "#E68EE0",
-  "#218C35",
-  "#B0B510",
-  "#904064"
-];
-
 export const DEFAULT_SERIES_COLORS = [
   "#2D95CA",
   "#EFB925",
@@ -46,7 +33,7 @@ export const DEFAULT_MAIN_COLOR = "#FF5900";
 export const DEFAULT_COLORS: VisualizationColors = {
   main: DEFAULT_MAIN_COLOR,
   series: DEFAULT_SERIES_COLORS
-}
+};
 
 export interface VisualizationColors {
   main: string;

From 51ce24a7a0e71a0fccca934cf15a5ad1000adc54 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 14:58:39 +0100
Subject: [PATCH 05/19] attach appSettings object to Essence so it can be used
 during visualization resolving

---
 .../turnilo-application.tsx                   |  6 ++--
 src/client/deserializers/app-settings.ts      | 26 ++++++++++++++
 src/client/views/cube-view/cube-view.tsx      |  9 ++---
 src/common/models/essence/essence.fixtures.ts | 22 ++++++++++--
 src/common/models/essence/essence.mocha.ts    |  9 +++--
 src/common/models/essence/essence.ts          | 35 +++++++++++--------
 .../utils/rules/split-adjustments.mocha.ts    |  3 +-
 src/common/utils/rules/split-adjustments.ts   |  9 +++--
 .../visualization-dependent-evaluator.ts      |  2 ++
 .../url-hash-converter.mocha.ts               | 15 ++++----
 .../url-hash-converter/url-hash-converter.ts  |  7 ++--
 .../version-2/view-definition-converter-2.ts  |  4 ++-
 .../version-3/view-definition-converter-3.ts  |  4 ++-
 .../version-4/view-definition-converter-4.ts  |  4 ++-
 .../view-definition-converter.ts              |  3 +-
 .../bar-chart/bar-chart.ts                    |  8 ++---
 .../line-chart/line-chart.ts                  | 12 +++----
 17 files changed, 122 insertions(+), 56 deletions(-)

diff --git a/src/client/applications/turnilo-application/turnilo-application.tsx b/src/client/applications/turnilo-application/turnilo-application.tsx
index da2a7dda2..50c1d359f 100644
--- a/src/client/applications/turnilo-application/turnilo-application.tsx
+++ b/src/client/applications/turnilo-application/turnilo-application.tsx
@@ -16,8 +16,10 @@
  */
 
 import { NamedArray } from "immutable-class";
+import memoizeOne from "memoize-one";
 import React from "react";
 import { ClientAppSettings } from "../../../common/models/app-settings/app-settings";
+import { ClientCustomization } from "../../../common/models/customization/customization";
 import { ClientDataCube } from "../../../common/models/data-cube/data-cube";
 import { Essence } from "../../../common/models/essence/essence";
 import { isEnabled as isOAuthEnabled } from "../../../common/models/oauth/oauth";
@@ -34,13 +36,11 @@ import { Ajax } from "../../utils/ajax/ajax";
 import { reportError } from "../../utils/error-reporter/error-reporter";
 import { replaceHash } from "../../utils/url/url";
 import { CubeView } from "../../views/cube-view/cube-view";
+import { SettingsContext, SettingsValue } from "../../views/cube-view/settings-context";
 import { GeneralError } from "../../views/error-view/general-error";
 import { HomeView } from "../../views/home-view/home-view";
 import "./turnilo-application.scss";
 import { cube, generalError, home, oauthCodeHandler, oauthMessageView, View } from "./view";
-import { SettingsContext, SettingsValue } from "../../views/cube-view/settings-context";
-import memoizeOne from "memoize-one";
-import { ClientCustomization } from "../../../common/models/customization/customization";
 
 export interface TurniloApplicationProps {
   version: string;
diff --git a/src/client/deserializers/app-settings.ts b/src/client/deserializers/app-settings.ts
index b4b29e350..574a1312b 100644
--- a/src/client/deserializers/app-settings.ts
+++ b/src/client/deserializers/app-settings.ts
@@ -26,3 +26,29 @@ export function deserialize({ oauth, clientTimeout, customization, version }: Se
     oauth: deserializeOauth(oauth)
   };
 }
+
+/*
+ NOTE: Function is used only for serialize-deserialize cycle in Essence class.
+ Now it's hard to remove that functionality but in the end, Essence does not need to serialize itself.
+*/
+export function serialize(appSettings: ClientAppSettings): SerializedAppSettings {
+  const { clientTimeout, version, customization, oauth } = appSettings;
+  const { visualizationColors, messages, customLogoSvg, hasUrlShortener, locale, headerBackground, sentryDSN, timezones, externalViews } = customization;
+
+  return {
+    clientTimeout,
+    version,
+    oauth,
+    customization: {
+      visualizationColors,
+      messages,
+      customLogoSvg,
+      locale,
+      hasUrlShortener,
+      headerBackground,
+      sentryDSN,
+      timezones: timezones.map(t => t.toJS()),
+      externalViews
+    }
+  };
+}
diff --git a/src/client/views/cube-view/cube-view.tsx b/src/client/views/cube-view/cube-view.tsx
index 3cc8d34f3..06df02b98 100644
--- a/src/client/views/cube-view/cube-view.tsx
+++ b/src/client/views/cube-view/cube-view.tsx
@@ -92,7 +92,7 @@ export interface CubeViewProps {
   hash: string;
   changeCubeAndEssence: Ternary<ClientDataCube, Essence, boolean, void>;
   urlForCubeAndEssence: Binary<ClientDataCube, Essence, string>;
-  getEssenceFromHash: Binary<string, ClientDataCube, Essence>;
+  getEssenceFromHash: Ternary<string, ClientDataCube, ClientAppSettings, Essence>;
   dataCube: ClientDataCube;
   dataCubes: ClientDataCube[];
   openAboutModal: Fn;
@@ -292,7 +292,8 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
   }
 
   getEssenceFromDataCube(dataCube: ClientDataCube): Essence {
-    return Essence.fromDataCube(dataCube);
+    const { appSettings } = this.props;
+    return Essence.fromDataCube(dataCube, appSettings);
   }
 
   getEssenceFromHash(hash: string, dataCube: ClientDataCube): Essence {
@@ -304,8 +305,8 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
       throw new Error("Hash is required.");
     }
 
-    const { getEssenceFromHash } = this.props;
-    return getEssenceFromHash(hash, dataCube);
+    const { getEssenceFromHash, appSettings } = this.props;
+    return getEssenceFromHash(hash, dataCube, appSettings);
   }
 
   globalResizeListener = () => {
diff --git a/src/common/models/essence/essence.fixtures.ts b/src/common/models/essence/essence.fixtures.ts
index 93c5983a7..5efe27b65 100644
--- a/src/common/models/essence/essence.fixtures.ts
+++ b/src/common/models/essence/essence.fixtures.ts
@@ -21,9 +21,23 @@ import { HEAT_MAP_MANIFEST } from "../../visualization-manifests/heat-map/heat-m
 import { LINE_CHART_MANIFEST } from "../../visualization-manifests/line-chart/line-chart";
 import { TABLE_MANIFEST } from "../../visualization-manifests/table/table";
 import { TOTALS_MANIFEST } from "../../visualization-manifests/totals/totals";
+import { clientAppSettings } from "../app-settings/app-settings.fixtures";
 import { customClientCube, twitterClientDataCube, wikiClientDataCube } from "../data-cube/data-cube.fixtures";
-import { NumberFilterClause, NumberRange, RelativeTimeFilterClause, TimeFilterPeriod } from "../filter-clause/filter-clause";
-import { boolean, numberRange, stringContains, stringIn, stringMatch, timePeriod, timeRange } from "../filter-clause/filter-clause.fixtures";
+import {
+  NumberFilterClause,
+  NumberRange,
+  RelativeTimeFilterClause,
+  TimeFilterPeriod
+} from "../filter-clause/filter-clause";
+import {
+  boolean,
+  numberRange,
+  stringContains,
+  stringIn,
+  stringMatch,
+  timePeriod,
+  timeRange
+} from "../filter-clause/filter-clause.fixtures";
 import { Filter } from "../filter/filter";
 import { EMPTY_SERIES, SeriesList } from "../series-list/series-list";
 import { measureSeries } from "../series/series.fixtures";
@@ -35,6 +49,7 @@ import { VisualizationManifest } from "../visualization-manifest/visualization-m
 import { Essence, EssenceValue, VisStrategy } from "./essence";
 
 const defaultEssence: EssenceValue = {
+  appSettings: clientAppSettings,
   dataCube: customClientCube("essence-fixture-data-cube", "essence-fixture-data-cube"),
   visualization: null,
   visualizationSettings: null,
@@ -96,6 +111,7 @@ export class EssenceFixtures {
       stringSplitCombine("namespace", { sort: { reference: "added", direction: SortDirection.descending }, limit: 5 })
     ];
     return new Essence({
+      appSettings: clientAppSettings,
       dataCube: wikiClientDataCube,
       visualization: HEAT_MAP_MANIFEST,
       visualizationSettings: HEAT_MAP_MANIFEST.visualizationSettings.defaults,
@@ -130,6 +146,7 @@ export class EssenceFixtures {
       measureSeries("added")
     ];
     return new Essence({
+      appSettings: clientAppSettings,
       dataCube: wikiClientDataCube,
       visualization: TABLE_MANIFEST as unknown as VisualizationManifest,
       visualizationSettings: TABLE_MANIFEST.visualizationSettings.defaults,
@@ -158,6 +175,7 @@ export class EssenceFixtures {
       measureSeries("added")
     ];
     return new Essence({
+      appSettings: clientAppSettings,
       dataCube: wikiClientDataCube,
       visualization: LINE_CHART_MANIFEST as unknown as VisualizationManifest,
       visualizationSettings: LINE_CHART_MANIFEST.visualizationSettings.defaults,
diff --git a/src/common/models/essence/essence.mocha.ts b/src/common/models/essence/essence.mocha.ts
index c191a7b38..3a33b7ff2 100644
--- a/src/common/models/essence/essence.mocha.ts
+++ b/src/common/models/essence/essence.mocha.ts
@@ -22,6 +22,7 @@ import { GRID_MANIFEST } from "../../visualization-manifests/grid/grid";
 import { LINE_CHART_MANIFEST } from "../../visualization-manifests/line-chart/line-chart";
 import { TABLE_MANIFEST } from "../../visualization-manifests/table/table";
 import { TOTALS_MANIFEST } from "../../visualization-manifests/totals/totals";
+import { clientAppSettings } from "../app-settings/app-settings.fixtures";
 import { twitterClientDataCube } from "../data-cube/data-cube.fixtures";
 import { TimeFilterPeriod } from "../filter-clause/filter-clause";
 import { timePeriod } from "../filter-clause/filter-clause.fixtures";
@@ -33,6 +34,7 @@ import { DimensionSort, SortDirection } from "../sort/sort";
 import { Split, SplitType } from "../split/split";
 import { Splits } from "../splits/splits";
 import { TimeShift } from "../time-shift/time-shift";
+import { VisualizationManifest } from "../visualization-manifest/visualization-manifest";
 import { Essence, VisStrategy } from "./essence";
 import { EssenceFixtures } from "./essence.fixtures";
 
@@ -41,7 +43,7 @@ describe("EssenceProps", () => {
 
   describe(".fromDataCube", () => {
     it.skip("works in the base case", () => {
-      const essence = Essence.fromDataCube(dataCube);
+      const essence = Essence.fromDataCube(dataCube, clientAppSettings);
 
       // TODO: don't test toJS
       expect(essence.toJS()).to.deep.equal({
@@ -135,7 +137,7 @@ describe("EssenceProps", () => {
             sort: new DimensionSort({ reference: "time", direction: SortDirection.ascending })
           })],
           series,
-          current: null,
+          current: null as VisualizationManifest,
           expected: LINE_CHART_MANIFEST
         }
       ];
@@ -143,6 +145,7 @@ describe("EssenceProps", () => {
       tests.forEach(({ splits, current, series, expected }) => {
         it(`chooses ${expected.name} given splits: [${splits}] with current ${current && current.name}`, () => {
           const { visualization } = Essence.getBestVisualization(
+            clientAppSettings,
             twitterClientDataCube,
             Splits.fromSplits(splits),
             SeriesList.fromSeries(series),
@@ -269,7 +272,7 @@ describe("EssenceProps", () => {
     describe("#changeVisualisation", () => {
       [TABLE_MANIFEST, LINE_CHART_MANIFEST, BAR_CHART_MANIFEST].forEach(manifest => {
         it("it sets visResolve to manual", () => {
-          const essence = EssenceFixtures.twitterNoVisualisation().changeVisualization(manifest);
+          const essence = EssenceFixtures.twitterNoVisualisation().changeVisualization(manifest as VisualizationManifest);
           expect(essence.visualization.name).to.deep.equal(manifest.name);
           expect(essence.visResolve.isManual()).to.be.true;
         });
diff --git a/src/common/models/essence/essence.ts b/src/common/models/essence/essence.ts
index acd173ebb..7dc1e84c7 100644
--- a/src/common/models/essence/essence.ts
+++ b/src/common/models/essence/essence.ts
@@ -17,11 +17,13 @@
 
 import { Timezone } from "chronoshift";
 import { List, OrderedSet, Record as ImmutableRecord, Set } from "immutable";
-import { serialize } from "../../../client/deserializers/data-cube";
+import { serialize as serializeAppSettings } from "../../../client/deserializers/app-settings";
+import { serialize as serializeDataCube } from "../../../client/deserializers/data-cube";
 import { thread } from "../../utils/functional/functional";
 import nullableEquals from "../../utils/immutable-utils/nullable-equals";
 import { visualizationIndependentEvaluator } from "../../utils/rules/visualization-independent-evaluator";
 import { MANIFESTS } from "../../visualization-manifests";
+import { ClientAppSettings } from "../app-settings/app-settings";
 import {
   ClientDataCube,
   getDefaultFilter,
@@ -78,6 +80,7 @@ export enum VisStrategy {
 type DimensionId = string;
 
 export interface EssenceValue {
+  appSettings: ClientAppSettings;
   dataCube: ClientDataCube;
   visualization: VisualizationManifest;
   visualizationSettings: VisualizationSettings | null;
@@ -92,6 +95,7 @@ export interface EssenceValue {
 }
 
 const defaultEssence: EssenceValue = {
+  appSettings: null,
   dataCube: null,
   visualization: null,
   visualizationSettings: null,
@@ -111,18 +115,18 @@ export interface EffectiveFilterOptions {
 }
 
 type VisualizationResolverResult = Pick<EssenceValue, "splits" | "visualization" | "visResolve">;
-type VisualizationResolverParameters = Pick<EssenceValue, "visualization" | "dataCube" | "splits" | "series">;
+type VisualizationResolverParameters = Pick<EssenceValue, "visualization" | "dataCube" | "splits" | "series" | "appSettings">;
 
-function resolveVisualization({ visualization, dataCube, splits, series }: VisualizationResolverParameters): VisualizationResolverResult {
+function resolveVisualization({ visualization, dataCube, splits, series, appSettings }: VisualizationResolverParameters): VisualizationResolverResult {
 
   let visResolve: Resolve;
   // Place vis here because it needs to know about splits and colors (and maybe later other things)
   if (!visualization) {
-    const visAndResolve = Essence.getBestVisualization(dataCube, splits, series, null);
+    const visAndResolve = Essence.getBestVisualization(appSettings, dataCube, splits, series, null);
     visualization = visAndResolve.visualization;
   }
 
-  const ruleVariables = { dataCube, series, splits, isSelectedVisualization: true };
+  const ruleVariables = { appSettings, dataCube, series, splits, isSelectedVisualization: true };
   visResolve = visualization.evaluateRules(ruleVariables);
   if (visResolve.isAutomatic()) {
     const adjustment = visResolve.adjustment;
@@ -143,6 +147,7 @@ function resolveVisualization({ visualization, dataCube, splits, series }: Visua
 export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
 
   static getBestVisualization(
+    appSettings: ClientAppSettings,
     dataCube: ClientDataCube,
     splits: Splits,
     series: SeriesList,
@@ -150,7 +155,7 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
   ): VisualizationAndResolve {
     const visAndResolves = MANIFESTS.map(visualization => {
       const isSelectedVisualization = visualization === currentVisualization;
-      const ruleVariables = { dataCube, splits, series, isSelectedVisualization };
+      const ruleVariables = { appSettings, dataCube, splits, series, isSelectedVisualization };
       return {
         visualization,
         resolve: visualization.evaluateRules(ruleVariables)
@@ -160,8 +165,9 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
     return visAndResolves.sort((vr1, vr2) => Resolve.compare(vr1.resolve, vr2.resolve))[0];
   }
 
-  static fromDataCube(dataCube: ClientDataCube): Essence {
+  static fromDataCube(dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
     const essence = new Essence({
+      appSettings,
       dataCube,
       visualization: null,
       visualizationSettings: null,
@@ -238,9 +244,10 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
 
   public toJS() {
     return {
+      appSettings: serializeAppSettings(this.appSettings),
       visualization: this.visualization,
       visualizationSettings: this.visualizationSettings,
-      dataCube: serialize(this.dataCube),
+      dataCube: serializeDataCube(this.dataCube),
       timezone: this.timezone.toJS(),
       filter: this.filter && this.filter.toJS(),
       splits: this.splits && this.splits.toJS(),
@@ -435,9 +442,9 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
     }
 
     function adjustVisualization(essence: Essence): Essence {
-      const { dataCube, visualization, splits, series } = essence;
+      const { dataCube, visualization, splits, series, appSettings } = essence;
       const { visualization: newVis } = Essence.getBestVisualization(
-        dataCube, splits, series, visualization);
+        appSettings, dataCube, splits, series, visualization);
       if (newVis === visualization) return essence;
       return essence.changeVisualization(newVis, newVis.visualizationSettings.defaults);
     }
@@ -501,7 +508,7 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
   }
 
   public changeSplits(splits: Splits, strategy: VisStrategy): Essence {
-    const { splits: oldSplits, dataCube, visualization, visResolve, filter, series } = this;
+    const { splits: oldSplits, appSettings, dataCube, visualization, visResolve, filter, series } = this;
 
     const newSplits = this.setSortOnSplits(splits).updateWithFilter(filter, dataCube.dimensions);
 
@@ -518,7 +525,7 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
 
     function adjustVisualization(essence: Essence): Essence {
       if (adjustStrategy(strategy) !== VisStrategy.FairGame) return essence;
-      const { visualization: newVis } = Essence.getBestVisualization(dataCube, newSplits, series, visualization);
+      const { visualization: newVis } = Essence.getBestVisualization(appSettings, dataCube, newSplits, series, visualization);
       if (newVis === visualization) return essence;
       return essence.changeVisualization(newVis, newVis.visualizationSettings.defaults);
     }
@@ -612,8 +619,8 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
   }
 
   public resolveVisualizationAndUpdate() {
-    const { visualization, splits, dataCube, series } = this;
-    const result = resolveVisualization({ splits, dataCube, visualization, series });
+    const { visualization, splits, dataCube, series, appSettings } = this;
+    const result = resolveVisualization({ appSettings, splits, dataCube, visualization, series });
     return this
       .set("visResolve", result.visResolve)
       .set("visualization", result.visualization)
diff --git a/src/common/utils/rules/split-adjustments.mocha.ts b/src/common/utils/rules/split-adjustments.mocha.ts
index 9fcd2d55e..95af3ac6f 100644
--- a/src/common/utils/rules/split-adjustments.mocha.ts
+++ b/src/common/utils/rules/split-adjustments.mocha.ts
@@ -28,6 +28,7 @@ import {
   adjustLimit,
   adjustSort
 } from "./split-adjustments";
+import { DEFAULT_COLORS } from "../../models/colors/colors";
 
 describe("Split adjustment utilities", () => {
   describe("adjustContinuousTimeSplit", () => {
@@ -118,7 +119,7 @@ describe("Split adjustment utilities", () => {
         limits: [42, 100]
       };
       const split = stringSplitCombine("foobar", { limit: 50 });
-      const adjusted = adjustColorSplit(split, dimension, SeriesList.fromSeries([]));
+      const adjusted = adjustColorSplit(split, dimension, SeriesList.fromSeries([]), DEFAULT_COLORS);
 
       expect(adjusted.limit).to.be.equal(10);
     });
diff --git a/src/common/utils/rules/split-adjustments.ts b/src/common/utils/rules/split-adjustments.ts
index fb8d5583e..06a43100f 100644
--- a/src/common/utils/rules/split-adjustments.ts
+++ b/src/common/utils/rules/split-adjustments.ts
@@ -14,21 +14,20 @@
  * limitations under the License.
  */
 
-import { NORMAL_COLORS } from "../../models/colors/colors";
+import { VisualizationColors } from "../../models/colors/colors";
 import { Dimension } from "../../models/dimension/dimension";
 import { SeriesList } from "../../models/series-list/series-list";
 import { DimensionSort, SeriesSort, SortDirection } from "../../models/sort/sort";
 import { Split, SplitType } from "../../models/split/split";
 import { thread } from "../functional/functional";
 
-const COLORS_COUNT = NORMAL_COLORS.length;
-
-export function adjustColorSplit(split: Split, dimension: Dimension, series: SeriesList): Split {
+export function adjustColorSplit(split: Split, dimension: Dimension, series: SeriesList, visualizationColors: VisualizationColors): Split {
+  const colorsCount = visualizationColors.series.length;
   return thread(
     split,
     adjustSort(dimension, series),
     // TODO: This magic 5 will disappear in #756
-    adjustFiniteLimit([5, COLORS_COUNT], COLORS_COUNT)
+    adjustFiniteLimit([5, colorsCount], colorsCount)
   );
 }
 
diff --git a/src/common/utils/rules/visualization-dependent-evaluator.ts b/src/common/utils/rules/visualization-dependent-evaluator.ts
index 648e468c1..dbf4003ca 100644
--- a/src/common/utils/rules/visualization-dependent-evaluator.ts
+++ b/src/common/utils/rules/visualization-dependent-evaluator.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ClientAppSettings } from "../../models/app-settings/app-settings";
 import { ClientDataCube } from "../../models/data-cube/data-cube";
 import { SeriesList } from "../../models/series-list/series-list";
 import { Splits } from "../../models/splits/splits";
@@ -27,6 +28,7 @@ export interface PredicateVariables {
 }
 
 export interface ActionVariables {
+  appSettings: ClientAppSettings;
   dataCube: ClientDataCube;
   splits: Splits;
   series: SeriesList;
diff --git a/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts b/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
index 5edf3f25e..2ec5629d6 100644
--- a/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
+++ b/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
@@ -22,6 +22,7 @@ import { ViewDefinitionVersion } from "../../view-definitions";
 import { hashToObject } from "../../view-definitions/hash-conversions";
 import { getHashSegments, urlHashConverter } from "./url-hash-converter";
 import { UrlHashConverterFixtures } from "./url-hash-converter.fixtures";
+import { clientAppSettings } from "../../models/app-settings/app-settings.fixtures";
 
 interface HashEssenceCase {
   version: ViewDefinitionVersion;
@@ -41,7 +42,7 @@ describe("urlHashConverter", () => {
       const { visualization } = essence;
 
       it(`decodes ${visualization.name} version ${version} correctly`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
 
         expect(decodedEssence.toJS()).to.deep.equal(essence.toJS());
       });
@@ -58,7 +59,7 @@ describe("urlHashConverter", () => {
       const { visualization } = essence;
 
       it(`decodes ${visualization.name} version ${version} correctly`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
 
         expect(decodedEssence.toJS()).to.deep.equal(essence.toJS());
       });
@@ -75,14 +76,14 @@ describe("urlHashConverter", () => {
       const { visualization } = essence;
 
       it(`decodes ${visualization.name} version ${version} correctly`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
 
         expect(decodedEssence.toJS()).to.deep.equal(essence.toJS());
       });
 
       it(`is symmetric in decode/encode for ${visualization.name} in version ${version}`, () => {
         const encodedHash = urlHashConverter.toHash(essence, version);
-        const decodedEssence = urlHashConverter.essenceFromHash(encodedHash, wikiClientDataCube);
+        const decodedEssence = urlHashConverter.essenceFromHash(encodedHash, wikiClientDataCube, clientAppSettings);
 
         expect(essence.toJS()).to.deep.equal(decodedEssence.toJS());
       });
@@ -93,7 +94,7 @@ describe("urlHashConverter", () => {
       }
 
       it(`is symmetric in encode/decode for ${visualization.name} in version ${version}`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
         const encodedHash = urlHashConverter.toHash(decodedEssence, version);
 
         try {
@@ -115,7 +116,7 @@ describe("urlHashConverter", () => {
 
   minimalNumberOfSegmentsTests.forEach(({ version, hash }) => {
     it(`decodes version ${version} with minimal number of segments`, () => {
-      const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube);
+      const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
 
       expect(decodedEssence).to.be.an.instanceOf(Essence);
     });
@@ -130,7 +131,7 @@ describe("urlHashConverter", () => {
 
   wrongHashStructureTests.forEach(({ hash, errorMessage }) => {
     it(`throws error for hash: "${hash}" with wrong structure`, () => {
-      const essenceFromHashCall = () => urlHashConverter.essenceFromHash(hash, wikiClientDataCube);
+      const essenceFromHashCall = () => urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
       expect(essenceFromHashCall).to.throw(errorMessage);
     });
   });
diff --git a/src/common/utils/url-hash-converter/url-hash-converter.ts b/src/common/utils/url-hash-converter/url-hash-converter.ts
index c068eadef..fcf9d1c46 100644
--- a/src/common/utils/url-hash-converter/url-hash-converter.ts
+++ b/src/common/utils/url-hash-converter/url-hash-converter.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ClientAppSettings } from "../../models/app-settings/app-settings";
 import { ClientDataCube } from "../../models/data-cube/data-cube";
 import { Essence } from "../../models/essence/essence";
 import { Visualization } from "../../models/visualization-manifest/visualization-manifest";
@@ -30,7 +31,7 @@ const SEGMENT_SEPARATOR = "/";
 const MINIMAL_HASH_SEGMENTS_COUNT = 2;
 
 export interface UrlHashConverter {
-  essenceFromHash(hash: string, dataCube: ClientDataCube): Essence;
+  essenceFromHash(hash: string, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence;
 
   toHash(essence: Essence, version?: ViewDefinitionVersion): string;
 }
@@ -85,14 +86,14 @@ export function getHashSegments(hash: string): HashSegments {
 }
 
 export const urlHashConverter: UrlHashConverter = {
-  essenceFromHash(hash: string, dataCube: ClientDataCube): Essence {
+  essenceFromHash(hash: string, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
     const { version, encodedModel, visualization } = getHashSegments(hash);
 
     const urlEncoder = definitionUrlEncoders[version];
     const definitionConverter = definitionConverters[version];
 
     const definition = urlEncoder.decodeUrlHash(encodedModel, visualization);
-    return definitionConverter.fromViewDefinition(definition, dataCube);
+    return definitionConverter.fromViewDefinition(definition, dataCube, appSettings);
   },
 
   toHash(essence: Essence, version: ViewDefinitionVersion = DEFAULT_VIEW_DEFINITION_VERSION): string {
diff --git a/src/common/view-definitions/version-2/view-definition-converter-2.ts b/src/common/view-definitions/version-2/view-definition-converter-2.ts
index 95a99bfb6..f0660c2f4 100644
--- a/src/common/view-definitions/version-2/view-definition-converter-2.ts
+++ b/src/common/view-definitions/version-2/view-definition-converter-2.ts
@@ -33,6 +33,7 @@ import {
   TimeRange,
   TimeRangeExpression
 } from "plywood";
+import { ClientAppSettings } from "../../models/app-settings/app-settings";
 import { ClientDataCube } from "../../models/data-cube/data-cube";
 import { DateRange } from "../../models/date-range/date-range";
 import { Dimension } from "../../models/dimension/dimension";
@@ -65,7 +66,7 @@ export type FilterSelection = Expression | string;
 export class ViewDefinitionConverter2 implements ViewDefinitionConverter<ViewDefinition2, Essence> {
   version = 2;
 
-  fromViewDefinition(definition: ViewDefinition2, dataCube: ClientDataCube): Essence {
+  fromViewDefinition(definition: ViewDefinition2, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
     const visualization = manifestByName(definition.visualization);
     const visualizationSettings = visualization.visualizationSettings.defaults;
 
@@ -79,6 +80,7 @@ export class ViewDefinitionConverter2 implements ViewDefinitionConverter<ViewDef
     const pinnedSort = definition.pinnedSort;
 
     return new Essence({
+      appSettings,
       dataCube,
       visualization,
       visualizationSettings,
diff --git a/src/common/view-definitions/version-3/view-definition-converter-3.ts b/src/common/view-definitions/version-3/view-definition-converter-3.ts
index dcf04357b..1e9cda419 100644
--- a/src/common/view-definitions/version-3/view-definition-converter-3.ts
+++ b/src/common/view-definitions/version-3/view-definition-converter-3.ts
@@ -16,6 +16,7 @@
 
 import { Timezone } from "chronoshift";
 import { List, OrderedSet } from "immutable";
+import { ClientAppSettings } from "../../models/app-settings/app-settings";
 import { ClientDataCube } from "../../models/data-cube/data-cube";
 import { Essence } from "../../models/essence/essence";
 import { Filter } from "../../models/filter/filter";
@@ -31,7 +32,7 @@ import { ViewDefinition3 } from "./view-definition-3";
 export class ViewDefinitionConverter3 implements ViewDefinitionConverter<ViewDefinition3, Essence> {
   version = 3;
 
-  fromViewDefinition(definition: ViewDefinition3, dataCube: ClientDataCube): Essence {
+  fromViewDefinition(definition: ViewDefinition3, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
     const timezone = Timezone.fromJS(definition.timezone);
 
     const visualization = manifestByName(definition.visualization);
@@ -48,6 +49,7 @@ export class ViewDefinitionConverter3 implements ViewDefinitionConverter<ViewDef
     const series = seriesDefinitionConverter.toEssenceSeries(definition.measures, dataCube.measures);
 
     return new Essence({
+      appSettings,
       dataCube,
       visualization,
       visualizationSettings,
diff --git a/src/common/view-definitions/version-4/view-definition-converter-4.ts b/src/common/view-definitions/version-4/view-definition-converter-4.ts
index 9b2fd27cb..df55a3f3e 100644
--- a/src/common/view-definitions/version-4/view-definition-converter-4.ts
+++ b/src/common/view-definitions/version-4/view-definition-converter-4.ts
@@ -29,11 +29,12 @@ import { seriesDefinitionConverter } from "./series-definition";
 import { splitConverter } from "./split-definition";
 import { ViewDefinition4 } from "./view-definition-4";
 import { fromViewDefinition, toViewDefinition } from "./visualization-settings-converter";
+import { ClientAppSettings } from "../../models/app-settings/app-settings";
 
 export class ViewDefinitionConverter4 implements ViewDefinitionConverter<ViewDefinition4, Essence> {
   version = 4;
 
-  fromViewDefinition(definition: ViewDefinition4, dataCube: ClientDataCube): Essence {
+  fromViewDefinition(definition: ViewDefinition4, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
     const timezone = Timezone.fromJS(definition.timezone);
 
     const visualization = manifestByName(definition.visualization);
@@ -69,6 +70,7 @@ export class ViewDefinitionConverter4 implements ViewDefinitionConverter<ViewDef
     const series = seriesDefinitionConverter.toEssenceSeries(definition.series, dataCube.measures);
 
     return new Essence({
+      appSettings,
       dataCube,
       visualization,
       visualizationSettings,
diff --git a/src/common/view-definitions/view-definition-converter.ts b/src/common/view-definitions/view-definition-converter.ts
index 46e584540..3883f7c2b 100644
--- a/src/common/view-definitions/view-definition-converter.ts
+++ b/src/common/view-definitions/view-definition-converter.ts
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
+import { ClientAppSettings } from "../models/app-settings/app-settings";
 import { ClientDataCube } from "../models/data-cube/data-cube";
 import { Essence } from "../models/essence/essence";
 
 export interface ViewDefinitionConverter<VD extends object, E extends Essence> {
   version: number;
 
-  fromViewDefinition(definition: VD, dataCube: ClientDataCube): E;
+  fromViewDefinition(definition: VD, dataCube: ClientDataCube, appSettings: ClientAppSettings): E;
 
   toViewDefinition(essence: E): VD;
 }
diff --git a/src/common/visualization-manifests/bar-chart/bar-chart.ts b/src/common/visualization-manifests/bar-chart/bar-chart.ts
index 9d217c824..2445593d8 100644
--- a/src/common/visualization-manifests/bar-chart/bar-chart.ts
+++ b/src/common/visualization-manifests/bar-chart/bar-chart.ts
@@ -49,7 +49,7 @@ const rulesEvaluator = visualizationDependentEvaluatorBuilder
   })
 
   .when(Predicates.areExactSplitKinds("time", "*"))
-  .then(({ splits, series, dataCube }) => {
+  .then(({ splits, series, dataCube, appSettings }) => {
     const timeSplit = splits.getSplit(0);
     const nominalSplit = splits.getSplit(1);
     const nominalDimension = findDimensionByName(dataCube.dimensions, nominalSplit.reference);
@@ -58,21 +58,21 @@ const rulesEvaluator = visualizationDependentEvaluatorBuilder
       // Switch splits in place and conform
       splits: new Splits({
         splits: List([
-          adjustColorSplit(nominalSplit, nominalDimension, series),
+          adjustColorSplit(nominalSplit, nominalDimension, series, appSettings.customization.visualizationColors),
           adjustContinuousTimeSplit(timeSplit)
         ])
       })
     });
   })
   .when(Predicates.areExactSplitKinds("*", "time"))
-  .then(({ splits, series, dataCube, isSelectedVisualization }) => {
+  .then(({ splits, series, dataCube, isSelectedVisualization, appSettings }) => {
     const timeSplit = splits.getSplit(1);
     const nominalSplit = splits.getSplit(0);
     const nominalDimension = findDimensionByName(dataCube.dimensions, nominalSplit.reference);
 
     const newSplits = new Splits({
       splits: List([
-        adjustColorSplit(nominalSplit, nominalDimension, series),
+        adjustColorSplit(nominalSplit, nominalDimension, series, appSettings.customization.visualizationColors),
         adjustContinuousTimeSplit(timeSplit)
       ])
     });
diff --git a/src/common/visualization-manifests/line-chart/line-chart.ts b/src/common/visualization-manifests/line-chart/line-chart.ts
index f13b4db53..29ac6ab60 100644
--- a/src/common/visualization-manifests/line-chart/line-chart.ts
+++ b/src/common/visualization-manifests/line-chart/line-chart.ts
@@ -81,7 +81,7 @@ const rulesEvaluator = visualizationDependentEvaluatorBuilder
   })
 
   .when(Predicates.areExactSplitKinds("time", "*"))
-  .then(({ splits, series, dataCube }) => {
+  .then(({ splits, series, dataCube, appSettings }) => {
     const timeSplit = splits.getSplit(0);
 
     const newTimeSplit = timeSplit
@@ -91,7 +91,7 @@ const rulesEvaluator = visualizationDependentEvaluatorBuilder
     const colorSplit = splits.getSplit(1);
     const colorDimension = findDimensionByName(dataCube.dimensions, colorSplit.reference);
 
-    const newColorSplit = adjustColorSplit(colorSplit, colorDimension, series);
+    const newColorSplit = adjustColorSplit(colorSplit, colorDimension, series, appSettings.customization.visualizationColors);
 
     return Resolve.automatic(8, {
       splits: new Splits({ splits: List([newColorSplit, newTimeSplit]) })
@@ -99,20 +99,20 @@ const rulesEvaluator = visualizationDependentEvaluatorBuilder
   })
 
   .when(Predicates.areExactSplitKinds("*", "time"))
-  .then(({ splits, series, dataCube }) => {
+  .then(({ splits, series, dataCube, appSettings }) => {
     const timeSplit = splits.getSplit(1);
     const newTimeSplit = adjustContinuousTimeSplit(timeSplit);
 
     const colorSplit = splits.getSplit(0);
     const colorDimension = findDimensionByName(dataCube.dimensions, colorSplit.reference);
-    const newColorSplit = adjustColorSplit(colorSplit, colorDimension, series);
+    const newColorSplit = adjustColorSplit(colorSplit, colorDimension, series, appSettings.customization.visualizationColors);
 
     const newSplits = new Splits({ splits: List([newColorSplit, newTimeSplit]) });
     if (newSplits.equals(splits)) return Resolve.ready(10);
     return Resolve.automatic(8, { splits: newSplits });
   })
   .when(Predicates.areExactSplitKinds("*", "number"))
-  .then(({ splits, dataCube, series }) => {
+  .then(({ splits, dataCube, series, appSettings }) => {
     const numberSplit = splits.getSplit(1);
     const numberDimension = findDimensionByName(dataCube.dimensions, numberSplit.reference);
 
@@ -120,7 +120,7 @@ const rulesEvaluator = visualizationDependentEvaluatorBuilder
 
     const colorSplit = splits.getSplit(0);
     const colorDimension = findDimensionByName(dataCube.dimensions, colorSplit.reference);
-    const newColorSplit = adjustColorSplit(colorSplit, colorDimension, series);
+    const newColorSplit = adjustColorSplit(colorSplit, colorDimension, series, appSettings.customization.visualizationColors);
 
     const newSplits = new Splits({ splits: List([newColorSplit, newNumberSplit]) });
     if (newSplits.equals(splits)) return Resolve.ready(10);

From 3c8fdf853c23c2885143235972f5372e91142c10 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 15:02:16 +0100
Subject: [PATCH 06/19] lint stuff

---
 .../line-chart/charts/charts-per-series/series-chart.tsx        | 2 +-
 src/common/utils/rules/split-adjustments.mocha.ts               | 2 +-
 src/common/utils/url-hash-converter/url-hash-converter.mocha.ts | 2 +-
 .../view-definitions/version-4/view-definition-converter-4.ts   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
index cc74b88cb..de9f71a47 100644
--- a/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
+++ b/src/client/visualizations/line-chart/charts/charts-per-series/series-chart.tsx
@@ -21,6 +21,7 @@ import { ConcreteSeries } from "../../../../../common/models/series/concrete-ser
 import { Stage } from "../../../../../common/models/stage/stage";
 import { VisMeasureLabel } from "../../../../components/vis-measure-label/vis-measure-label";
 import { selectFirstSplitDataset, selectMainDatum, selectSplitDatums } from "../../../../utils/dataset/selectors/selectors";
+import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 import { BaseChart } from "../../base-chart/base-chart";
 import { ColoredSeriesChartLine } from "../../chart-line/colored-series-chart-line";
 import { SingletonSeriesChartLine } from "../../chart-line/singleton-series-chart-line";
@@ -31,7 +32,6 @@ import { extentAcrossSplits } from "../../utils/extent";
 import { ContinuousTicks } from "../../utils/pick-x-axis-ticks";
 import { getContinuousSplit, getNominalSplit, hasNominalSplit } from "../../utils/splits";
 import { SeriesHoverContent } from "./series-hover-content";
-import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 
 interface SeriesChartProps {
   chartId: string;
diff --git a/src/common/utils/rules/split-adjustments.mocha.ts b/src/common/utils/rules/split-adjustments.mocha.ts
index 95af3ac6f..e34da7286 100644
--- a/src/common/utils/rules/split-adjustments.mocha.ts
+++ b/src/common/utils/rules/split-adjustments.mocha.ts
@@ -16,6 +16,7 @@
 
 import { expect } from "chai";
 import { $ } from "plywood";
+import { DEFAULT_COLORS } from "../../models/colors/colors";
 import { createDimension, Dimension } from "../../models/dimension/dimension";
 import { SeriesList } from "../../models/series-list/series-list";
 import { measureSeries } from "../../models/series/series.fixtures";
@@ -28,7 +29,6 @@ import {
   adjustLimit,
   adjustSort
 } from "./split-adjustments";
-import { DEFAULT_COLORS } from "../../models/colors/colors";
 
 describe("Split adjustment utilities", () => {
   describe("adjustContinuousTimeSplit", () => {
diff --git a/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts b/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
index 2ec5629d6..92f3e6a8b 100644
--- a/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
+++ b/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
@@ -15,6 +15,7 @@
  */
 
 import { expect } from "chai";
+import { clientAppSettings } from "../../models/app-settings/app-settings.fixtures";
 import { wikiClientDataCube } from "../../models/data-cube/data-cube.fixtures";
 import { Essence } from "../../models/essence/essence";
 import { EssenceFixtures } from "../../models/essence/essence.fixtures";
@@ -22,7 +23,6 @@ import { ViewDefinitionVersion } from "../../view-definitions";
 import { hashToObject } from "../../view-definitions/hash-conversions";
 import { getHashSegments, urlHashConverter } from "./url-hash-converter";
 import { UrlHashConverterFixtures } from "./url-hash-converter.fixtures";
-import { clientAppSettings } from "../../models/app-settings/app-settings.fixtures";
 
 interface HashEssenceCase {
   version: ViewDefinitionVersion;
diff --git a/src/common/view-definitions/version-4/view-definition-converter-4.ts b/src/common/view-definitions/version-4/view-definition-converter-4.ts
index df55a3f3e..94c406ee7 100644
--- a/src/common/view-definitions/version-4/view-definition-converter-4.ts
+++ b/src/common/view-definitions/version-4/view-definition-converter-4.ts
@@ -16,6 +16,7 @@
 
 import { Timezone } from "chronoshift";
 import { List, OrderedSet } from "immutable";
+import { ClientAppSettings } from "../../models/app-settings/app-settings";
 import { ClientDataCube } from "../../models/data-cube/data-cube";
 import { Essence } from "../../models/essence/essence";
 import { Filter } from "../../models/filter/filter";
@@ -29,7 +30,6 @@ import { seriesDefinitionConverter } from "./series-definition";
 import { splitConverter } from "./split-definition";
 import { ViewDefinition4 } from "./view-definition-4";
 import { fromViewDefinition, toViewDefinition } from "./visualization-settings-converter";
-import { ClientAppSettings } from "../../models/app-settings/app-settings";
 
 export class ViewDefinitionConverter4 implements ViewDefinitionConverter<ViewDefinition4, Essence> {
   version = 4;

From 3149b3a4c3014c15825e44fbcda4f944c3157a03 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 15:10:55 +0100
Subject: [PATCH 07/19] pass app settings to mkurl endpoint

---
 src/server/app.ts                      |  2 +-
 src/server/routes/mkurl/mkurl.mocha.ts |  3 ++-
 src/server/routes/mkurl/mkurl.ts       | 10 ++++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/server/app.ts b/src/server/app.ts
index 338d1e593..6a42ecfd4 100644
--- a/src/server/app.ts
+++ b/src/server/app.ts
@@ -148,7 +148,7 @@ export default function createApp(serverSettings: ServerSettings, settingsManage
   attachRouter("/sources", sourcesRouter(settingsManager.sourcesGetter));
   attachRouter("/plywood", plywoodRouter(settingsManager));
   attachRouter("/plyql", plyqlRouter(settingsManager.sourcesGetter));
-  attachRouter("/mkurl", mkurlRouter(settingsManager.sourcesGetter));
+  attachRouter("/mkurl", mkurlRouter(settingsManager.appSettings, settingsManager.sourcesGetter));
   attachRouter("/shorten", shortenRouter(settingsManager.appSettings, isTrustedProxy));
 
   attachRouter("/", turniloRouter(settingsManager.appSettings, () => settingsManager.getTimekeeper(), version));
diff --git a/src/server/routes/mkurl/mkurl.mocha.ts b/src/server/routes/mkurl/mkurl.mocha.ts
index 0eca618cd..7e02950b3 100644
--- a/src/server/routes/mkurl/mkurl.mocha.ts
+++ b/src/server/routes/mkurl/mkurl.mocha.ts
@@ -19,6 +19,7 @@ import * as bodyParser from "body-parser";
 import express from "express";
 import { $ } from "plywood";
 import supertest from "supertest";
+import { appSettings } from "../../../common/models/app-settings/app-settings.fixtures";
 import { wikiSourcesWithExecutor } from "../../../common/models/sources/sources.fixtures";
 import { UrlHashConverterFixtures } from "../../../common/utils/url-hash-converter/url-hash-converter.fixtures";
 import { mkurlRouter } from "./mkurl";
@@ -29,7 +30,7 @@ const app = express();
 
 app.use(bodyParser.json());
 
-app.use(mkurlPath, mkurlRouter(() => Promise.resolve(wikiSourcesWithExecutor)));
+app.use(mkurlPath, mkurlRouter(appSettings, () => Promise.resolve(wikiSourcesWithExecutor)));
 
 describe("mkurl router", () => {
   it("gets a simple url back", (testComplete: any) => {
diff --git a/src/server/routes/mkurl/mkurl.ts b/src/server/routes/mkurl/mkurl.ts
index 3f26d8fea..7e551e706 100644
--- a/src/server/routes/mkurl/mkurl.ts
+++ b/src/server/routes/mkurl/mkurl.ts
@@ -16,6 +16,8 @@
  */
 
 import { Request, Response, Router } from "express";
+import { deserialize } from "../../../client/deserializers/app-settings";
+import { AppSettings, ClientAppSettings, serialize } from "../../../common/models/app-settings/app-settings";
 import { ClientDataCube } from "../../../common/models/data-cube/data-cube";
 import { isQueryable } from "../../../common/models/data-cube/queryable-data-cube";
 import { Essence } from "../../../common/models/essence/essence";
@@ -24,7 +26,11 @@ import { urlHashConverter } from "../../../common/utils/url-hash-converter/url-h
 import { definitionConverters, ViewDefinitionVersion } from "../../../common/view-definitions";
 import { SourcesGetter } from "../../utils/settings-manager/settings-manager";
 
-export function mkurlRouter(sourcesGetter: SourcesGetter) {
+function convertAppSettings(appSettings: AppSettings): ClientAppSettings {
+  return deserialize(serialize(appSettings));
+}
+
+export function mkurlRouter(appSettings: AppSettings, sourcesGetter: SourcesGetter) {
 
   const router = Router();
 
@@ -79,7 +85,7 @@ export function mkurlRouter(sourcesGetter: SourcesGetter) {
     };
 
     try {
-      essence = definitionConverter.fromViewDefinition(viewDefinition, clientDataCube);
+      essence = definitionConverter.fromViewDefinition(viewDefinition, clientDataCube, convertAppSettings(appSettings));
     } catch ({ message }) {
       res.status(400).send({ error: "invalid viewDefinition object", message });
       return;

From 29149273b332ae6dc1f4df58c01bacecca9beb89 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 23 Nov 2022 15:23:51 +0100
Subject: [PATCH 08/19] todos for last pieces

---
 src/client/visualizations/bar-chart/bar-chart.scss              | 2 ++
 .../visualizations/bar-chart/improved-bar-chart/bars/bars.scss  | 1 +
 src/client/visualizations/heat-map/utils/scales.ts              | 1 +
 src/client/visualizations/line-chart/base-chart/base-chart.scss | 1 +
 src/client/visualizations/scatterplot/scatterplot.scss          | 1 +
 5 files changed, 6 insertions(+)

diff --git a/src/client/visualizations/bar-chart/bar-chart.scss b/src/client/visualizations/bar-chart/bar-chart.scss
index 684645fdc..e60f7571f 100644
--- a/src/client/visualizations/bar-chart/bar-chart.scss
+++ b/src/client/visualizations/bar-chart/bar-chart.scss
@@ -37,6 +37,7 @@
     position: absolute;
 
     .selection-highlight {
+      // TODO: replace with visualisationColors.main
       @include css-variable(border-color, brand);
       pointer-events: none;
       border-width: 1px;
@@ -113,6 +114,7 @@
         }
 
         > rect.background {
+          // TODO: replace with visualisationColors.main
           @include css-variable(fill, brand);
           pointer-events: none;
         }
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss
index 4132b374d..849e40f9f 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss
@@ -18,6 +18,7 @@
 
 .bar-chart-bars {
   .bar-chart-bar {
+    // TODO: replace with visualisationColors.main
     @include css-variable(fill, brand);
   }
 
diff --git a/src/client/visualizations/heat-map/utils/scales.ts b/src/client/visualizations/heat-map/utils/scales.ts
index 957518ce2..f0e435b30 100644
--- a/src/client/visualizations/heat-map/utils/scales.ts
+++ b/src/client/visualizations/heat-map/utils/scales.ts
@@ -25,6 +25,7 @@ import { nestedDataset } from "./nested-dataset";
 export type ColorScale = d3.ScaleLinear<string, string>;
 
 const white = "#fff";
+// TODO: replace with visualisationColors.main
 const orange = "#ff5a00";
 
 interface Scales {
diff --git a/src/client/visualizations/line-chart/base-chart/base-chart.scss b/src/client/visualizations/line-chart/base-chart/base-chart.scss
index 03e2d8fcd..a6a78f6fe 100644
--- a/src/client/visualizations/line-chart/base-chart/base-chart.scss
+++ b/src/client/visualizations/line-chart/base-chart/base-chart.scss
@@ -36,6 +36,7 @@
   }
 
   .hover-guide {
+    // TODO: replace with visualisationColors.main
     @include css-variable(stroke, background-brand-light);
     stroke-width: 1;
   }
diff --git a/src/client/visualizations/scatterplot/scatterplot.scss b/src/client/visualizations/scatterplot/scatterplot.scss
index 576c943ee..9d9a41c35 100644
--- a/src/client/visualizations/scatterplot/scatterplot.scss
+++ b/src/client/visualizations/scatterplot/scatterplot.scss
@@ -48,6 +48,7 @@
   }
 
   .point {
+    // TODO: replace with visualisationColors.main
     @include css-variable(stroke, brand);
     @include css-variable(fill, item-dimension);
   }

From 1cc00d4b8a69fdf0fe4d7cec5a3edc9b83e91f9d Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Thu, 24 Nov 2022 15:50:37 +0100
Subject: [PATCH 09/19] more explicit conversions for mkurl

---
 src/server/routes/mkurl/mkurl.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/server/routes/mkurl/mkurl.ts b/src/server/routes/mkurl/mkurl.ts
index 7e551e706..076d0f6a2 100644
--- a/src/server/routes/mkurl/mkurl.ts
+++ b/src/server/routes/mkurl/mkurl.ts
@@ -19,17 +19,24 @@ import { Request, Response, Router } from "express";
 import { deserialize } from "../../../client/deserializers/app-settings";
 import { AppSettings, ClientAppSettings, serialize } from "../../../common/models/app-settings/app-settings";
 import { ClientDataCube } from "../../../common/models/data-cube/data-cube";
-import { isQueryable } from "../../../common/models/data-cube/queryable-data-cube";
+import { isQueryable, QueryableDataCube } from "../../../common/models/data-cube/queryable-data-cube";
 import { Essence } from "../../../common/models/essence/essence";
 import { getDataCube, Sources } from "../../../common/models/sources/sources";
 import { urlHashConverter } from "../../../common/utils/url-hash-converter/url-hash-converter";
 import { definitionConverters, ViewDefinitionVersion } from "../../../common/view-definitions";
 import { SourcesGetter } from "../../utils/settings-manager/settings-manager";
 
-function convertAppSettings(appSettings: AppSettings): ClientAppSettings {
+function convertToClientAppSettings(appSettings: AppSettings): ClientAppSettings {
   return deserialize(serialize(appSettings));
 }
 
+function convertToClientDataCube(cube: QueryableDataCube): ClientDataCube {
+  return {
+    ...cube,
+    timeAttribute: cube.timeAttribute && cube.timeAttribute.name
+  };
+}
+
 export function mkurlRouter(appSettings: AppSettings, sourcesGetter: SourcesGetter) {
 
   const router = Router();
@@ -78,14 +85,12 @@ export function mkurlRouter(appSettings: AppSettings, sourcesGetter: SourcesGett
       return;
     }
 
-    let essence: Essence;
-    const clientDataCube: ClientDataCube = {
-      ...myDataCube,
-      timeAttribute: myDataCube.timeAttribute && myDataCube.timeAttribute.name
-    };
+    const clientDataCube = convertToClientDataCube(myDataCube);
+    const clientAppSettings = convertToClientAppSettings(appSettings);
 
+    let essence: Essence;
     try {
-      essence = definitionConverter.fromViewDefinition(viewDefinition, clientDataCube, convertAppSettings(appSettings));
+      essence = definitionConverter.fromViewDefinition(viewDefinition, clientAppSettings, clientDataCube);
     } catch ({ message }) {
       res.status(400).send({ error: "invalid viewDefinition object", message });
       return;

From b067039f1e91e1518f05cdd7f47c4219cdea9643 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Thu, 24 Nov 2022 15:51:25 +0100
Subject: [PATCH 10/19] change parameters order of fromViewDefinition for
 brevity

---
 src/client/views/cube-view/cube-view.tsx                    | 4 ++--
 src/common/models/essence/essence.ts                        | 3 ++-
 src/common/utils/url-hash-converter/url-hash-converter.ts   | 6 +++---
 .../version-2/view-definition-converter-2.ts                | 2 +-
 .../version-3/view-definition-converter-3.ts                | 2 +-
 .../version-4/view-definition-converter-4.ts                | 2 +-
 src/common/view-definitions/view-definition-converter.ts    | 2 +-
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/client/views/cube-view/cube-view.tsx b/src/client/views/cube-view/cube-view.tsx
index 06df02b98..e603067ef 100644
--- a/src/client/views/cube-view/cube-view.tsx
+++ b/src/client/views/cube-view/cube-view.tsx
@@ -92,7 +92,7 @@ export interface CubeViewProps {
   hash: string;
   changeCubeAndEssence: Ternary<ClientDataCube, Essence, boolean, void>;
   urlForCubeAndEssence: Binary<ClientDataCube, Essence, string>;
-  getEssenceFromHash: Ternary<string, ClientDataCube, ClientAppSettings, Essence>;
+  getEssenceFromHash: Ternary<string, ClientAppSettings, ClientDataCube, Essence>;
   dataCube: ClientDataCube;
   dataCubes: ClientDataCube[];
   openAboutModal: Fn;
@@ -306,7 +306,7 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
     }
 
     const { getEssenceFromHash, appSettings } = this.props;
-    return getEssenceFromHash(hash, dataCube, appSettings);
+    return getEssenceFromHash(hash, appSettings, dataCube);
   }
 
   globalResizeListener = () => {
diff --git a/src/common/models/essence/essence.ts b/src/common/models/essence/essence.ts
index 7dc1e84c7..c07ddb0ba 100644
--- a/src/common/models/essence/essence.ts
+++ b/src/common/models/essence/essence.ts
@@ -618,9 +618,10 @@ export class Essence extends ImmutableRecord<EssenceValue>(defaultEssence) {
       .resolveVisualizationAndUpdate();
   }
 
+  // NOTE: Pass appsettings to all callers. Probably all callers are from Clicker object
   public resolveVisualizationAndUpdate() {
     const { visualization, splits, dataCube, series, appSettings } = this;
-    const result = resolveVisualization({ appSettings, splits, dataCube, visualization, series });
+    const result = resolveVisualization({ appSettings, dataCube, visualization, splits, series });
     return this
       .set("visResolve", result.visResolve)
       .set("visualization", result.visualization)
diff --git a/src/common/utils/url-hash-converter/url-hash-converter.ts b/src/common/utils/url-hash-converter/url-hash-converter.ts
index fcf9d1c46..5cc6e0aee 100644
--- a/src/common/utils/url-hash-converter/url-hash-converter.ts
+++ b/src/common/utils/url-hash-converter/url-hash-converter.ts
@@ -31,7 +31,7 @@ const SEGMENT_SEPARATOR = "/";
 const MINIMAL_HASH_SEGMENTS_COUNT = 2;
 
 export interface UrlHashConverter {
-  essenceFromHash(hash: string, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence;
+  essenceFromHash(hash: string, appSettings: ClientAppSettings, dataCube: ClientDataCube): Essence;
 
   toHash(essence: Essence, version?: ViewDefinitionVersion): string;
 }
@@ -86,14 +86,14 @@ export function getHashSegments(hash: string): HashSegments {
 }
 
 export const urlHashConverter: UrlHashConverter = {
-  essenceFromHash(hash: string, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
+  essenceFromHash(hash: string, appSettings: ClientAppSettings, dataCube: ClientDataCube): Essence {
     const { version, encodedModel, visualization } = getHashSegments(hash);
 
     const urlEncoder = definitionUrlEncoders[version];
     const definitionConverter = definitionConverters[version];
 
     const definition = urlEncoder.decodeUrlHash(encodedModel, visualization);
-    return definitionConverter.fromViewDefinition(definition, dataCube, appSettings);
+    return definitionConverter.fromViewDefinition(definition, appSettings, dataCube);
   },
 
   toHash(essence: Essence, version: ViewDefinitionVersion = DEFAULT_VIEW_DEFINITION_VERSION): string {
diff --git a/src/common/view-definitions/version-2/view-definition-converter-2.ts b/src/common/view-definitions/version-2/view-definition-converter-2.ts
index f0660c2f4..62e589320 100644
--- a/src/common/view-definitions/version-2/view-definition-converter-2.ts
+++ b/src/common/view-definitions/version-2/view-definition-converter-2.ts
@@ -66,7 +66,7 @@ export type FilterSelection = Expression | string;
 export class ViewDefinitionConverter2 implements ViewDefinitionConverter<ViewDefinition2, Essence> {
   version = 2;
 
-  fromViewDefinition(definition: ViewDefinition2, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
+  fromViewDefinition(definition: ViewDefinition2, appSettings: ClientAppSettings, dataCube: ClientDataCube): Essence {
     const visualization = manifestByName(definition.visualization);
     const visualizationSettings = visualization.visualizationSettings.defaults;
 
diff --git a/src/common/view-definitions/version-3/view-definition-converter-3.ts b/src/common/view-definitions/version-3/view-definition-converter-3.ts
index 1e9cda419..06849bca5 100644
--- a/src/common/view-definitions/version-3/view-definition-converter-3.ts
+++ b/src/common/view-definitions/version-3/view-definition-converter-3.ts
@@ -32,7 +32,7 @@ import { ViewDefinition3 } from "./view-definition-3";
 export class ViewDefinitionConverter3 implements ViewDefinitionConverter<ViewDefinition3, Essence> {
   version = 3;
 
-  fromViewDefinition(definition: ViewDefinition3, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
+  fromViewDefinition(definition: ViewDefinition3, appSettings: ClientAppSettings, dataCube: ClientDataCube): Essence {
     const timezone = Timezone.fromJS(definition.timezone);
 
     const visualization = manifestByName(definition.visualization);
diff --git a/src/common/view-definitions/version-4/view-definition-converter-4.ts b/src/common/view-definitions/version-4/view-definition-converter-4.ts
index 94c406ee7..269decdfd 100644
--- a/src/common/view-definitions/version-4/view-definition-converter-4.ts
+++ b/src/common/view-definitions/version-4/view-definition-converter-4.ts
@@ -34,7 +34,7 @@ import { fromViewDefinition, toViewDefinition } from "./visualization-settings-c
 export class ViewDefinitionConverter4 implements ViewDefinitionConverter<ViewDefinition4, Essence> {
   version = 4;
 
-  fromViewDefinition(definition: ViewDefinition4, dataCube: ClientDataCube, appSettings: ClientAppSettings): Essence {
+  fromViewDefinition(definition: ViewDefinition4, appSettings: ClientAppSettings, dataCube: ClientDataCube): Essence {
     const timezone = Timezone.fromJS(definition.timezone);
 
     const visualization = manifestByName(definition.visualization);
diff --git a/src/common/view-definitions/view-definition-converter.ts b/src/common/view-definitions/view-definition-converter.ts
index 3883f7c2b..3f2345f3f 100644
--- a/src/common/view-definitions/view-definition-converter.ts
+++ b/src/common/view-definitions/view-definition-converter.ts
@@ -21,7 +21,7 @@ import { Essence } from "../models/essence/essence";
 export interface ViewDefinitionConverter<VD extends object, E extends Essence> {
   version: number;
 
-  fromViewDefinition(definition: VD, dataCube: ClientDataCube, appSettings: ClientAppSettings): E;
+  fromViewDefinition(definition: VD, appSettings: ClientAppSettings, dataCube: ClientDataCube): E;
 
   toViewDefinition(essence: E): VD;
 }

From ca0923761b6ab9386f10f2117331474c956955a3 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Thu, 24 Nov 2022 18:03:42 +0100
Subject: [PATCH 11/19] rename and export settings context type

---
 .../turnilo-application/turnilo-application.tsx     | 13 +++++++------
 src/client/views/cube-view/settings-context.ts      |  6 +++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/client/applications/turnilo-application/turnilo-application.tsx b/src/client/applications/turnilo-application/turnilo-application.tsx
index 50c1d359f..c0ec60440 100644
--- a/src/client/applications/turnilo-application/turnilo-application.tsx
+++ b/src/client/applications/turnilo-application/turnilo-application.tsx
@@ -36,7 +36,7 @@ import { Ajax } from "../../utils/ajax/ajax";
 import { reportError } from "../../utils/error-reporter/error-reporter";
 import { replaceHash } from "../../utils/url/url";
 import { CubeView } from "../../views/cube-view/cube-view";
-import { SettingsContext, SettingsValue } from "../../views/cube-view/settings-context";
+import { SettingsContext, SettingsContextValue } from "../../views/cube-view/settings-context";
 import { GeneralError } from "../../views/error-view/general-error";
 import { HomeView } from "../../views/home-view/home-view";
 import "./turnilo-application.scss";
@@ -229,21 +229,22 @@ export class TurniloApplication extends React.Component<TurniloApplicationProps,
     }
   }
 
-  private getSettingsContext(): SettingsValue {
+  private getSettingsContext(): SettingsContextValue {
     const { appSettings: { customization } } = this.props;
     return this.constructSettingsContext(customization);
   }
 
+  // NOTE: is memoization needed?
   private constructSettingsContext = memoizeOne((customization: ClientCustomization) => ({ customization }));
 
   render() {
     return <React.StrictMode>
       <main className="turnilo-application">
         <SettingsContext.Provider value={this.getSettingsContext()}>
-        {this.renderView()}
-        {this.renderAboutModal()}
-        <Notifications/>
-        <Questions/>
+          {this.renderView()}
+          {this.renderAboutModal()}
+          <Notifications/>
+          <Questions/>
         </SettingsContext.Provider>
       </main>
     </React.StrictMode>;
diff --git a/src/client/views/cube-view/settings-context.ts b/src/client/views/cube-view/settings-context.ts
index 8327e6ed0..751e455ff 100644
--- a/src/client/views/cube-view/settings-context.ts
+++ b/src/client/views/cube-view/settings-context.ts
@@ -17,16 +17,16 @@
 import React, { useContext } from "react";
 import { ClientCustomization } from "../../../common/models/customization/customization";
 
-export interface SettingsValue {
+export interface SettingsContextValue {
   customization: ClientCustomization;
 }
 
-export const SettingsContext = React.createContext<SettingsValue>({
+export const SettingsContext = React.createContext<SettingsContextValue>({
   get customization(): ClientCustomization {
     throw new Error("Attempted to consume SettingsContext when there was no Provider in place.");
   }
 });
 
-export function useSettingsContext(): SettingsValue {
+export function useSettingsContext(): SettingsContextValue {
   return useContext(SettingsContext);
 }

From fff240206868767af153ec19da93b83b6c190ad2 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Thu, 24 Nov 2022 18:04:10 +0100
Subject: [PATCH 12/19] functions for derivative main colors

---
 src/common/models/colors/colors.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/common/models/colors/colors.ts b/src/common/models/colors/colors.ts
index 0f3f2c5c3..dc61621a1 100644
--- a/src/common/models/colors/colors.ts
+++ b/src/common/models/colors/colors.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { hsl, rgb } from "d3";
+
 export const DEFAULT_SERIES_COLORS = [
   "#2D95CA",
   "#EFB925",
@@ -39,3 +41,12 @@ export interface VisualizationColors {
   main: string;
   series: Array<string>;
 }
+
+export function lightMain(colors: VisualizationColors): string {
+  return hsl(colors.main).brighter(0.3).formatHex();
+}
+
+export function alphaMain(colors: VisualizationColors): string {
+  const { r, g, b } = rgb(colors.main);
+  return `rgba(${r}, ${g}, ${b}, ${0.14})`;
+}

From 45ce645b41a1c0ff3c68d0e6c06e628386cde8e4 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Thu, 24 Nov 2022 18:05:10 +0100
Subject: [PATCH 13/19] use viz colors in vizualizations

---
 .../visualizations/bar-chart/bar-chart.scss   |  2 --
 .../visualizations/bar-chart/bar-chart.tsx    |  6 +++++
 .../improved-bar-chart/bar/single-bar.tsx     |  4 ++++
 .../bar/single-time-shift-bar.tsx             |  8 +++++++
 .../improved-bar-chart/bars/bars.scss         | 10 ---------
 .../line-chart/base-chart/base-chart.scss     |  1 -
 .../line-chart/chart-line/chart-line.scss     |  9 --------
 .../line-chart/chart-line/chart-line.tsx      | 22 ++++++++++++-------
 .../visualizations/scatterplot/point.tsx      |  8 +++++++
 .../scatterplot/scatterplot.scss              |  6 -----
 10 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/client/visualizations/bar-chart/bar-chart.scss b/src/client/visualizations/bar-chart/bar-chart.scss
index e60f7571f..109c2813e 100644
--- a/src/client/visualizations/bar-chart/bar-chart.scss
+++ b/src/client/visualizations/bar-chart/bar-chart.scss
@@ -114,8 +114,6 @@
         }
 
         > rect.background {
-          // TODO: replace with visualisationColors.main
-          @include css-variable(fill, brand);
           pointer-events: none;
         }
 
diff --git a/src/client/visualizations/bar-chart/bar-chart.tsx b/src/client/visualizations/bar-chart/bar-chart.tsx
index 57c795771..d51c18085 100644
--- a/src/client/visualizations/bar-chart/bar-chart.tsx
+++ b/src/client/visualizations/bar-chart/bar-chart.tsx
@@ -54,6 +54,7 @@ import { VisMeasureLabel } from "../../components/vis-measure-label/vis-measure-
 import { SPLIT, VIS_H_PADDING } from "../../config/constants";
 import { classNames, roundToPx } from "../../utils/dom/dom";
 import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { SettingsContext, SettingsContextValue } from "../../views/cube-view/settings-context";
 import { hasHighlightOn } from "../highlight-controller/highlight-controller";
 import "./bar-chart.scss";
 import { BarCoordinates } from "./bar-coordinates";
@@ -168,6 +169,7 @@ export default function BarChartVisualization(props: VisualizationProps) {
 }
 
 class BarChart extends React.Component<ChartProps, BarChartState> {
+  static contextType = SettingsContext;
   protected className = BAR_CHART_MANIFEST.name;
 
   private coordinatesCache: BarCoordinates[][] = [];
@@ -175,6 +177,8 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
 
   state: BarChartState = this.initState();
 
+  context: SettingsContextValue;
+
   componentDidUpdate() {
     const { scrollerYPosition, scrollerXPosition } = this.state;
 
@@ -491,6 +495,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
   ): { bars: JSX.Element[], highlight: JSX.Element } {
     const { essence } = this.props;
     const { timezone } = essence;
+    const { customization: { visualizationColors } } = this.context;
 
     const bars: JSX.Element[] = [];
     let highlight: JSX.Element;
@@ -547,6 +552,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
             className="background"
             width={roundToPx(barWidth)}
             height={roundToPx(Math.abs(height))}
+            fill={visualizationColors.main}
             x={barOffset}
             y={roundToPx(y)}
           />
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
index 657d521da..5c048d95a 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
@@ -18,6 +18,7 @@ import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
+import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 import { BaseBarChartModel } from "../utils/bar-chart-model";
 import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
@@ -32,6 +33,7 @@ interface SingleBarProps {
 }
 
 export const SingleBar: React.FunctionComponent<SingleBarProps> = props => {
+  const { customization: { visualizationColors } } = useSettingsContext();
   const { datum, xScale, yScale, model: { continuousSplit }, series } = props;
   const [maxHeight] = yScale.range();
   const x = continuousSplit.selectValue<DomainValue>(datum);
@@ -40,11 +42,13 @@ export const SingleBar: React.FunctionComponent<SingleBarProps> = props => {
   const y = series.selectValue(datum);
   const yPos = yScale(y);
   const height = maxHeight - yPos;
+  const fill = visualizationColors.main;
 
   return <rect
     className="bar-chart-bar"
     x={xPos}
     y={yPos}
+    fill={fill}
     width={width}
     height={height} />;
 };
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
index eb08eb7a9..f007bcdf4 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
@@ -16,8 +16,10 @@
 
 import { Datum } from "plywood";
 import React from "react";
+import { alphaMain } from "../../../../../common/models/colors/colors";
 import { ConcreteSeries, SeriesDerivation } from "../../../../../common/models/series/concrete-series";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
+import { useSettingsContext } from "../../../../views/cube-view/settings-context";
 import { BaseBarChartModel } from "../utils/bar-chart-model";
 import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
@@ -32,6 +34,7 @@ interface SingleTimeShiftBar {
 }
 
 export const SingleTimeShiftBar: React.FunctionComponent<SingleTimeShiftBar> = props => {
+  const { customization: { visualizationColors } } = useSettingsContext();
   const { datum, xScale, yScale, model: { continuousSplit }, series } = props;
   const [maxHeight] = yScale.range();
   const x = continuousSplit.selectValue<DomainValue>(datum);
@@ -45,17 +48,22 @@ export const SingleTimeShiftBar: React.FunctionComponent<SingleTimeShiftBar> = p
   const yCurrentStart = yScale(yCurrent);
   const yPreviousStart = yScale(yPrevious);
 
+  const currentFill = visualizationColors.main;
+  const previousFill = alphaMain(visualizationColors);
+
   return <React.Fragment>
     <rect
       className="bar-chart-bar-previous"
       x={xStart + rangeBand - SIDE_PADDING - barWidth}
       y={yPreviousStart}
+      fill={previousFill}
       width={barWidth}
       height={maxHeight - yPreviousStart} />
     <rect
       className="bar-chart-bar"
       x={xStart + SIDE_PADDING}
       y={yCurrentStart}
+      fill={currentFill}
       width={barWidth}
       height={maxHeight - yCurrentStart} />
   </React.Fragment>;
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss
index 849e40f9f..f23e115bb 100644
--- a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss
+++ b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss
@@ -17,16 +17,6 @@
 @import '../../../../imports';
 
 .bar-chart-bars {
-  .bar-chart-bar {
-    // TODO: replace with visualisationColors.main
-    @include css-variable(fill, brand);
-  }
-
-  .bar-chart-bar-previous {
-    @include css-variable(fill, main-time-area);
-  }
-
-
   .bar-chart-total {
     position: absolute;
     top: 15px;
diff --git a/src/client/visualizations/line-chart/base-chart/base-chart.scss b/src/client/visualizations/line-chart/base-chart/base-chart.scss
index a6a78f6fe..03e2d8fcd 100644
--- a/src/client/visualizations/line-chart/base-chart/base-chart.scss
+++ b/src/client/visualizations/line-chart/base-chart/base-chart.scss
@@ -36,7 +36,6 @@
   }
 
   .hover-guide {
-    // TODO: replace with visualisationColors.main
     @include css-variable(stroke, background-brand-light);
     stroke-width: 1;
   }
diff --git a/src/client/visualizations/line-chart/chart-line/chart-line.scss b/src/client/visualizations/line-chart/chart-line/chart-line.scss
index e0b5280ef..ee1a27be0 100644
--- a/src/client/visualizations/line-chart/chart-line/chart-line.scss
+++ b/src/client/visualizations/line-chart/chart-line/chart-line.scss
@@ -21,25 +21,16 @@
   pointer-events: none;
 
   .area {
-    @include css-variable(fill, main-time-area);
     stroke: none;
     fill-opacity: .9;
   }
 
   .line {
-    @include css-variable(stroke, main-time-line);
     fill: none;
     stroke-width: 1.6px;
   }
 
   .singleton {
-    @include css-variable(fill, main-time-line);
     stroke: none;
   }
-
-  .hover {
-    @include css-variable(stroke, main-time-line);
-    fill: $white;
-    stroke-width: 2;
-  }
 }
diff --git a/src/client/visualizations/line-chart/chart-line/chart-line.tsx b/src/client/visualizations/line-chart/chart-line/chart-line.tsx
index 8b7defec1..8cbd99ffc 100644
--- a/src/client/visualizations/line-chart/chart-line/chart-line.tsx
+++ b/src/client/visualizations/line-chart/chart-line/chart-line.tsx
@@ -17,8 +17,10 @@
 import * as d3 from "d3";
 import { Datum } from "plywood";
 import React from "react";
+import { alphaMain } from "../../../../common/models/colors/colors";
 import { Stage } from "../../../../common/models/stage/stage";
 import { Unary } from "../../../../common/utils/functional/functional";
+import { useSettingsContext } from "../../../views/cube-view/settings-context";
 import { ContinuousRange, ContinuousScale } from "../utils/continuous-types";
 import "./chart-line.scss";
 import { prepareDataPoints } from "./prepare-data-points";
@@ -37,13 +39,10 @@ export interface ChartLineProps {
   stage: Stage;
 }
 
-const stroke = (color: string, dashed: boolean): Pick<React.CSSProperties, "stroke" | "strokeDasharray"> => ({
-  stroke: color,
-  strokeDasharray: dashed ? "4 2" : undefined
-});
-
 export const ChartLine: React.FunctionComponent<ChartLineProps> = props => {
-  const { color, dashed, getX, getY, dataset, showArea, stage, xScale, yScale } = props;
+  const { customization: { visualizationColors } } = useSettingsContext();
+  const mainColor = visualizationColors.main;
+  const { color = mainColor, dashed, getX, getY, dataset, showArea, stage, xScale, yScale } = props;
 
   const area = d3.area().y0(yScale(0));
   const line = d3.line();
@@ -54,8 +53,15 @@ export const ChartLine: React.FunctionComponent<ChartLineProps> = props => {
   const hasSinglePoint = points.length === 1;
 
   return <g className="chart-line" transform={stage.getTransform()}>
-    {hasMultiplePoints && <path className="line" d={line(scaledPoints)} style={stroke(color, dashed)} />}
-    {hasMultiplePoints && showArea && <path className="area" d={area(scaledPoints)} />}
+    {hasMultiplePoints && <path
+      className="line"
+      d={line(scaledPoints)}
+      stroke={color}
+      strokeDasharray={dashed ? "4 2" : undefined}/>}
+    {hasMultiplePoints && showArea && <path
+      className="area"
+      fill={alphaMain(visualizationColors)}
+      d={area(scaledPoints)}/>}
     {hasSinglePoint && <circle
       className="singleton"
       cx={scaledPoints[0][0]}
diff --git a/src/client/visualizations/scatterplot/point.tsx b/src/client/visualizations/scatterplot/point.tsx
index 94bb0bb3c..5f929adf0 100644
--- a/src/client/visualizations/scatterplot/point.tsx
+++ b/src/client/visualizations/scatterplot/point.tsx
@@ -19,7 +19,9 @@ import { Datum } from "plywood";
 import { ConcreteSeries } from "../../../common/models/series/concrete-series";
 import "./scatterplot.scss";
 
+import { lightMain } from "../../../common/models/colors/colors";
 import { LinearScale } from "../../utils/linear-scale/linear-scale";
+import { useSettingsContext } from "../../views/cube-view/settings-context";
 
 interface PointProps {
   datum: Datum;
@@ -35,9 +37,13 @@ const POINT_RADIUS = 3;
 const HOVER_AREA_RADIUS = 6;
 
 export const Point: React.FunctionComponent<PointProps> = ({ datum, xScale, yScale, xSeries, ySeries, setHover, resetHover }) => {
+  const { customization: { visualizationColors } } = useSettingsContext();
   const xValue = xSeries.selectValue(datum);
   const yValue = ySeries.selectValue(datum);
 
+  const stroke = visualizationColors.main;
+  const fill = lightMain(visualizationColors);
+
   return (
     <>
       <circle
@@ -45,6 +51,8 @@ export const Point: React.FunctionComponent<PointProps> = ({ datum, xScale, ySca
         cy={yScale(yValue)}
         r={POINT_RADIUS}
         className="point"
+        stroke={stroke}
+        fill={fill}
       />
       <circle
         onMouseEnter={() => setHover(datum)}
diff --git a/src/client/visualizations/scatterplot/scatterplot.scss b/src/client/visualizations/scatterplot/scatterplot.scss
index 9d9a41c35..4fa0288e5 100644
--- a/src/client/visualizations/scatterplot/scatterplot.scss
+++ b/src/client/visualizations/scatterplot/scatterplot.scss
@@ -47,12 +47,6 @@
     }
   }
 
-  .point {
-    // TODO: replace with visualisationColors.main
-    @include css-variable(stroke, brand);
-    @include css-variable(fill, item-dimension);
-  }
-
   .axis-title {
     position: absolute;
     font-weight: $bold;

From 10fef14e6d053b81ea9af3d7acb6b80cf23c7a18 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Thu, 24 Nov 2022 19:16:15 +0100
Subject: [PATCH 14/19] update fromViewDefinition argument order in tests

---
 .../url-hash-converter/url-hash-converter.mocha.ts | 14 +++++++-------
 .../view-definitions/test/essence.fixture.ts       |  2 ++
 .../version-2/view-definition-converter-2.mocha.ts |  7 ++++---
 .../view-definitions/version-4/test/utils.ts       |  3 ++-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts b/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
index 92f3e6a8b..35f8a8d53 100644
--- a/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
+++ b/src/common/utils/url-hash-converter/url-hash-converter.mocha.ts
@@ -42,7 +42,7 @@ describe("urlHashConverter", () => {
       const { visualization } = essence;
 
       it(`decodes ${visualization.name} version ${version} correctly`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, clientAppSettings, wikiClientDataCube);
 
         expect(decodedEssence.toJS()).to.deep.equal(essence.toJS());
       });
@@ -59,7 +59,7 @@ describe("urlHashConverter", () => {
       const { visualization } = essence;
 
       it(`decodes ${visualization.name} version ${version} correctly`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, clientAppSettings, wikiClientDataCube);
 
         expect(decodedEssence.toJS()).to.deep.equal(essence.toJS());
       });
@@ -76,14 +76,14 @@ describe("urlHashConverter", () => {
       const { visualization } = essence;
 
       it(`decodes ${visualization.name} version ${version} correctly`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, clientAppSettings, wikiClientDataCube);
 
         expect(decodedEssence.toJS()).to.deep.equal(essence.toJS());
       });
 
       it(`is symmetric in decode/encode for ${visualization.name} in version ${version}`, () => {
         const encodedHash = urlHashConverter.toHash(essence, version);
-        const decodedEssence = urlHashConverter.essenceFromHash(encodedHash, wikiClientDataCube, clientAppSettings);
+        const decodedEssence = urlHashConverter.essenceFromHash(encodedHash, clientAppSettings, wikiClientDataCube);
 
         expect(essence.toJS()).to.deep.equal(decodedEssence.toJS());
       });
@@ -94,7 +94,7 @@ describe("urlHashConverter", () => {
       }
 
       it(`is symmetric in encode/decode for ${visualization.name} in version ${version}`, () => {
-        const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
+        const decodedEssence = urlHashConverter.essenceFromHash(hash, clientAppSettings, wikiClientDataCube);
         const encodedHash = urlHashConverter.toHash(decodedEssence, version);
 
         try {
@@ -116,7 +116,7 @@ describe("urlHashConverter", () => {
 
   minimalNumberOfSegmentsTests.forEach(({ version, hash }) => {
     it(`decodes version ${version} with minimal number of segments`, () => {
-      const decodedEssence = urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
+      const decodedEssence = urlHashConverter.essenceFromHash(hash, clientAppSettings, wikiClientDataCube);
 
       expect(decodedEssence).to.be.an.instanceOf(Essence);
     });
@@ -131,7 +131,7 @@ describe("urlHashConverter", () => {
 
   wrongHashStructureTests.forEach(({ hash, errorMessage }) => {
     it(`throws error for hash: "${hash}" with wrong structure`, () => {
-      const essenceFromHashCall = () => urlHashConverter.essenceFromHash(hash, wikiClientDataCube, clientAppSettings);
+      const essenceFromHashCall = () => urlHashConverter.essenceFromHash(hash, clientAppSettings, wikiClientDataCube);
       expect(essenceFromHashCall).to.throw(errorMessage);
     });
   });
diff --git a/src/common/view-definitions/test/essence.fixture.ts b/src/common/view-definitions/test/essence.fixture.ts
index 9367b28cb..e35ff2b1c 100644
--- a/src/common/view-definitions/test/essence.fixture.ts
+++ b/src/common/view-definitions/test/essence.fixture.ts
@@ -16,6 +16,7 @@
 
 import { day, Duration, Timezone } from "chronoshift";
 import { OrderedSet } from "immutable";
+import { clientAppSettings } from "../../models/app-settings/app-settings.fixtures";
 import { Essence, EssenceValue } from "../../models/essence/essence";
 import { RelativeTimeFilterClause, TimeFilterPeriod } from "../../models/filter-clause/filter-clause";
 import { Filter } from "../../models/filter/filter";
@@ -61,6 +62,7 @@ const defaults: EssenceOptions = {
 
 export function mockEssence(opts: Partial<EssenceOptions> = {}) {
   return new Essence({
+    appSettings: clientAppSettings,
     dataCube,
     ...defaults,
     ...opts
diff --git a/src/common/view-definitions/version-2/view-definition-converter-2.mocha.ts b/src/common/view-definitions/version-2/view-definition-converter-2.mocha.ts
index bc3e45975..f0c60752a 100644
--- a/src/common/view-definitions/version-2/view-definition-converter-2.mocha.ts
+++ b/src/common/view-definitions/version-2/view-definition-converter-2.mocha.ts
@@ -15,6 +15,7 @@
  */
 
 import { expect } from "chai";
+import { clientAppSettings } from "../../models/app-settings/app-settings.fixtures";
 import { wikiClientDataCube } from "../../models/data-cube/data-cube.fixtures";
 import { TimeFilterPeriod } from "../../models/filter-clause/filter-clause";
 import { stringIn, timePeriod } from "../../models/filter-clause/filter-clause.fixtures";
@@ -64,7 +65,7 @@ describe("ViewDefinitionConverter2", () => {
   ].forEach(({ label, expression, period }) => {
     it(`converts ${label} bucket expression to time period`, () => {
       const viewDefinition = ViewDefinitionConverter2Fixtures.withFilterExpression(expression);
-      const essence = new ViewDefinitionConverter2().fromViewDefinition(viewDefinition, wikiClientDataCube);
+      const essence = new ViewDefinitionConverter2().fromViewDefinition(viewDefinition, clientAppSettings, wikiClientDataCube);
       const convertedClause = essence.filter.clauses.first();
 
       const expectedClause = timePeriod("time", "P1D", period);
@@ -125,7 +126,7 @@ describe("ViewDefinitionConverter2", () => {
         }
       }
     ]);
-    const convertedFilter = new ViewDefinitionConverter2().fromViewDefinition(viewDefinition, wikiClientDataCube).filter;
+    const convertedFilter = new ViewDefinitionConverter2().fromViewDefinition(viewDefinition, clientAppSettings, wikiClientDataCube).filter;
     const convertedClause = convertedFilter.clauses.get(1);
 
     const expectedClause = stringIn("page_last_author", ["TypeScript"]);
@@ -160,7 +161,7 @@ describe("ViewDefinitionConverter2", () => {
         limit: 10
       }
     }]);
-    const convertedSplits = new ViewDefinitionConverter2().fromViewDefinition(viewDefinition, wikiClientDataCube).splits;
+    const convertedSplits = new ViewDefinitionConverter2().fromViewDefinition(viewDefinition, clientAppSettings, wikiClientDataCube).splits;
 
     expect(convertedSplits.getSplit(0).reference).to.equal("page_last_author");
   });
diff --git a/src/common/view-definitions/version-4/test/utils.ts b/src/common/view-definitions/version-4/test/utils.ts
index 85902fe55..402bc1f53 100644
--- a/src/common/view-definitions/version-4/test/utils.ts
+++ b/src/common/view-definitions/version-4/test/utils.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { clientAppSettings } from "../../../models/app-settings/app-settings.fixtures";
 import { Essence } from "../../../models/essence/essence";
 import { assertEqlEssence } from "../../test/assertions";
 import { dataCube } from "../../test/data-cube.fixture";
@@ -21,7 +22,7 @@ import { ViewDefinition4 } from "../view-definition-4";
 import { ViewDefinitionConverter4 } from "../view-definition-converter-4";
 
 const converter = new ViewDefinitionConverter4();
-export const toEssence = (viewDef: ViewDefinition4) => converter.fromViewDefinition(viewDef, dataCube);
+export const toEssence = (viewDef: ViewDefinition4) => converter.fromViewDefinition(viewDef, clientAppSettings, dataCube);
 
 export function assertConversionToEssence(viewDef: ViewDefinition4, essence: Essence) {
   assertEqlEssence(toEssence(viewDef), essence);

From 5e3e3f2129ebd74cf801db7f89d7f6c6ec9653e4 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Thu, 24 Nov 2022 19:45:01 +0100
Subject: [PATCH 15/19] formatHex does not exist on our version of d3. I dunno
 why types say that it should exist.

---
 src/common/models/colors/colors.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/models/colors/colors.ts b/src/common/models/colors/colors.ts
index dc61621a1..033dcf9d2 100644
--- a/src/common/models/colors/colors.ts
+++ b/src/common/models/colors/colors.ts
@@ -43,7 +43,7 @@ export interface VisualizationColors {
 }
 
 export function lightMain(colors: VisualizationColors): string {
-  return hsl(colors.main).brighter(0.3).formatHex();
+  return hsl(colors.main).brighter(1.3).toString();
 }
 
 export function alphaMain(colors: VisualizationColors): string {

From b34544a49c7919ccbf65b301f3522c532a20b74f Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Fri, 25 Nov 2022 11:54:17 +0100
Subject: [PATCH 16/19] remove unused css variables

---
 src/client/utils/styles/_variables.scss          | 2 --
 src/common/models/customization/customization.ts | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/client/utils/styles/_variables.scss b/src/client/utils/styles/_variables.scss
index 60cb356e4..bd56dc3ae 100644
--- a/src/client/utils/styles/_variables.scss
+++ b/src/client/utils/styles/_variables.scss
@@ -75,8 +75,6 @@ $theme-colors: (
   item-measure-hover: darken($item-measure, 6%),
   item-measure-text: $text-standard,
   item-measure: $item-measure,
-  main-time-area: rgba($brand, 0.14),
-  main-time-line: $brand,
   negative: #e14040,
   pinboard-icon: darken($background-base, 5%),
   positive: #08b157,
diff --git a/src/common/models/customization/customization.ts b/src/common/models/customization/customization.ts
index dfeb32d84..22b743058 100644
--- a/src/common/models/customization/customization.ts
+++ b/src/common/models/customization/customization.ts
@@ -88,8 +88,6 @@ const availableCssVariables = [
   "item-measure-hover",
   "item-measure-text",
   "item-measure",
-  "main-time-area",
-  "main-time-line",
   "negative",
   "pinboard-icon",
   "positive",

From 10d6e43e98de61894f4a56785e11d664adb629a1 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Tue, 29 Nov 2022 12:54:42 +0100
Subject: [PATCH 17/19] add docs

---
 docs/configuration-customizations.md | 32 ++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/docs/configuration-customizations.md b/docs/configuration-customizations.md
index 2e564be8a..f96a8fa69 100644
--- a/docs/configuration-customizations.md
+++ b/docs/configuration-customizations.md
@@ -58,6 +58,38 @@ customization:
     background-base: '#fbfbfb;'
 ```
 
+## Visualisation colors
+
+Turnilo allows you to define colors for charts.
+
+For example:
+
+```yaml
+customizaiton:
+  visualizationColors: 
+    main: #FF5900
+    series:
+      - #2D95CA
+      - #EFB925
+      - #DA4E99
+      - #4CC873
+      - #745CBD
+      - #EA7136
+      - #E68EE0
+      - #218C35
+      - #B0B510
+      - #904064
+```
+
+Value is any CSS Color Module Level 3 specifier string. 
+Object is merged with default values, so it is possible to override just one key.
+
+`main` property is used for drawing marks (lines, bars, points etc.) whenever Turnilo draws single series. 
+`series` is an array of colors used for drawing different series marks. 
+For example line chart with two splits will use `series` colors to distinguish different values from second split.
+By default, Turnilo uses 10 different colors for series. But it is possible to define more and Turnilo will adjust necessary split limits.
+
+
 ## External links
 
 Turnilo supports defining external view links with access to `dataCube`, `filter`, `splits`, and `timezone` objects at link generation time.

From 753ac07155efc0b6442ce28b2bd5b9b0f100eb5e Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Tue, 29 Nov 2022 15:34:56 +0100
Subject: [PATCH 18/19] update docs

---
 docs/configuration-customizations.md | 108 ++++++++++++++-------------
 1 file changed, 58 insertions(+), 50 deletions(-)

diff --git a/docs/configuration-customizations.md b/docs/configuration-customizations.md
index f96a8fa69..21c92c6ae 100644
--- a/docs/configuration-customizations.md
+++ b/docs/configuration-customizations.md
@@ -8,38 +8,12 @@ layout: page
 
 You can define a `customization:` section in the config to configure some aspects of the look and feel of Turnilo.
 
-## Visual
+## Theming Turnilo
 
-Can customize the header background color and logo icon by supplying a color string and SVG string respectively.
-
-```yaml
-customization:
-    customLogoSvg: >
-      <svg width="300" height="200"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%" fill="green" />
-      </svg>
-
-    headerBackground: '#2D95CA'
-```
-
-## Url Shortener
-
-Turnilo supports url shorteners for generating short links for current view definitions. This is done by defining function body in configuration.
-Function will receive three arguments, `request` - [node request module](https://github.com/request/request-promise-native), `url` with current hash, and `context` which includes: `clientIp` (the ip of the original client, considering a possible XFF header). Function should return Promise with shortened url as string inside.
+Turnilo allows you to customize colors of user interface. You should keep in sync values in all subsections here. 
+For example brand CSS variable should match main visualization color.
 
-
-
-For example:
-
-```yaml
-customization:
-  urlShortener: |
-    return request.get('http://tinyurl.com/api-create.php?url=' + encodeURIComponent(url))
-```
-
-## CSS Variables
+### CSS Variables
 
 Turnilo allows you to override CSS variables to apply your own theming
 
@@ -58,37 +32,71 @@ customization:
     background-base: '#fbfbfb;'
 ```
 
-## Visualisation colors
+### Visualisation colors
 
-Turnilo allows you to define colors for charts.
+Turnilo allows you to override colors for charts to apply your own theming. Default values for each field are defined in [colors.ts](https://github.com/allegro/turnilo/blob/master/src/common/models/colors/colors.ts). 
 
-For example:
+* `main` property is used for drawing marks (lines, bars, points etc.) whenever Turnilo draws single series.
+
+* `series` is an array of colors used for drawing different series marks. For example line chart with two splits will use `series` colors to distinguish different values from second split.
+
+For example, we can override main color and use [Tableu10](https://www.tableau.com/blog/colors-upgrade-tableau-10-56782) color scheme for series:
 
 ```yaml
 customizaiton:
   visualizationColors: 
-    main: #FF5900
+    main: #829aa3
     series:
-      - #2D95CA
-      - #EFB925
-      - #DA4E99
-      - #4CC873
-      - #745CBD
-      - #EA7136
-      - #E68EE0
-      - #218C35
-      - #B0B510
-      - #904064
+      - #4e79a7
+      - #f28e2c
+      - #e15759
+      - #76b7b2
+      - #59a14f
+      - #edc949
+      - #af7aa1
+      - #ff9da7
+      - #9c755f
+      - #bab0ab
 ```
 
-Value is any CSS Color Module Level 3 specifier string. 
-Object is merged with default values, so it is possible to override just one key.
-
-`main` property is used for drawing marks (lines, bars, points etc.) whenever Turnilo draws single series. 
-`series` is an array of colors used for drawing different series marks. 
-For example line chart with two splits will use `series` colors to distinguish different values from second split.
 By default, Turnilo uses 10 different colors for series. But it is possible to define more and Turnilo will adjust necessary split limits.
 
+### Logo
+
+Turnilo allows you to set custom customize logo icon by supplying an SVG string respectively.
+
+```yaml
+customization:
+    customLogoSvg: >
+      <svg width="300" height="200"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%" fill="green" />
+      </svg>
+```
+
+### Header color
+
+Turnilo allows you to set custom header background color supplying a string with CSS color.
+
+```yaml
+customization:
+  headerBackground: '#2D95CA'
+```
+
+## Url Shortener
+
+Turnilo supports url shorteners for generating short links for current view definitions. This is done by defining function body in configuration.
+Function will receive three arguments, `request` - [node request module](https://github.com/request/request-promise-native), `url` with current hash, and `context` which includes: `clientIp` (the ip of the original client, considering a possible XFF header). Function should return Promise with shortened url as string inside.
+
+
+For example:
+
+```yaml
+customization:
+  urlShortener: |
+    return request.get('http://tinyurl.com/api-create.php?url=' + encodeURIComponent(url))
+```
 
 ## External links
 

From 4567accd60d5a3a664000caa0d04a58c7970ea20 Mon Sep 17 00:00:00 2001
From: Adrian Mroz <adrian.mroz@allegro.pl>
Date: Wed, 30 Nov 2022 13:25:52 +0100
Subject: [PATCH 19/19] lint fix

---
 src/common/models/colors/colors.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/models/colors/colors.ts b/src/common/models/colors/colors.ts
index 033dcf9d2..cbb747c88 100644
--- a/src/common/models/colors/colors.ts
+++ b/src/common/models/colors/colors.ts
@@ -39,7 +39,7 @@ export const DEFAULT_COLORS: VisualizationColors = {
 
 export interface VisualizationColors {
   main: string;
-  series: Array<string>;
+  series: string[];
 }
 
 export function lightMain(colors: VisualizationColors): string {