chore: largely remove duplicated code regarding light and dark themes

gosling-lang · Nov 23, 2023 · bddf33a · bddf33a
1 parent 5bdd15b
commit bddf33a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 236 deletions.
diff --git a/src/core/utils/theme.ts b/src/core/utils/theme.ts
@@ -1,10 +1,20 @@
-import { type Themes, isThereTheme, getTheme as _getTheme } from '@gosling-lang/gosling-theme';
-import { CHANNEL_DEFAULTS } from '../channel';
+import { isThereTheme, getTheme as _getTheme } from '@gosling-lang/gosling-theme';
 
 /* ----------------------------- THEME ----------------------------- */
 export type Theme = ThemeType | ThemeDeep;
-export type ThemeType = "light" | "dark" | "warm" | "ggplot" | "igv" | "ensembl" | "jbrowse" | "ucsc" | "washu" | "excel" | "google";
-// export type ThemType = keyof typeof Themes; 
+export type ThemeType =
+    | 'light'
+    | 'dark'
+    | 'warm'
+    | 'ggplot'
+    | 'igv'
+    | 'ensembl'
+    | 'jbrowse'
+    | 'ucsc'
+    | 'washu'
+    | 'excel'
+    | 'google';
+// export type ThemType = keyof typeof Themes;
 // Above line leads to `TypeError: Invalid value used as weak map key` error, due to cyclic dependency, I think.
 // Refer to https://github.com/vega/ts-json-schema-generator/issues/1727
 
@@ -144,18 +154,14 @@ export function getTheme(theme: Theme = 'light'): Required<CompleteThemeDeep> {
     if (typeof theme === 'string') {
         if (isThereTheme(theme)) {
             return _getTheme(theme);
-        } else if (theme === 'dark' || theme === 'light') {
-            return THEMES[theme];
         } else {
-            return THEMES['light'];
+            return _getTheme('light');
         }
     } else {
         // Iterate all keys to override from base
-        let baseSpec = JSON.parse(JSON.stringify(THEMES['light']));
+        let baseSpec = JSON.parse(JSON.stringify(_getTheme('light')));
         if (isThereTheme(theme.base)) {
             baseSpec = _getTheme(theme.base);
-        } else if (theme.base === 'light' || theme.base === 'dark') {
-            baseSpec = JSON.parse(JSON.stringify(THEMES[theme.base]));
         }
         // Override defaults from `base`
         Object.keys(baseSpec).forEach(k => {
@@ -169,223 +175,3 @@ export function getTheme(theme: Theme = 'light'): Required<CompleteThemeDeep> {
         return baseSpec;
     }
 }
-
-const LightThemeMarkCommonStyle: Required<MarkStyle> = {
-    color: CHANNEL_DEFAULTS.NOMINAL_COLOR[0],
-    size: 1,
-    stroke: 'black',
-    strokeWidth: 0,
-    opacity: 1,
-    nominalColorRange: CHANNEL_DEFAULTS.NOMINAL_COLOR,
-    quantitativeSizeRange: [2, 6]
-};
-
-const DarkThemeMarkCommonStyle: Required<MarkStyle> = { ...LightThemeMarkCommonStyle, stroke: 'white' };
-
-/* ----------------------------- THEME PRESETS ----------------------------- */
-export const THEMES: { [k in 'light' | 'dark']: Required<CompleteThemeDeep> } = {
-    light: {
-        base: 'light',
-
-        root: {
-            background: 'white',
-            titleColor: 'black',
-            titleBackgroundColor: 'transparent',
-            titleFontSize: 18,
-            titleFontFamily: 'Arial',
-            titleAlign: 'left',
-            titleFontWeight: 'bold',
-            subtitleColor: 'gray',
-            subtitleBackgroundColor: 'transparent',
-            subtitleFontSize: 16,
-            subtitleFontFamily: 'Arial',
-            subtitleFontWeight: 'normal',
-            subtitleAlign: 'left',
-            showMousePosition: true,
-            mousePositionColor: '#000000'
-        },
-
-        track: {
-            background: 'transparent',
-            alternatingBackground: 'transparent',
-            titleColor: 'black',
-            titleBackground: 'white',
-            titleFontSize: 24,
-            titleAlign: 'left',
-            outline: 'black',
-            outlineWidth: 1
-        },
-
-        legend: {
-            position: 'top',
-            background: 'white',
-            backgroundOpacity: 0.7,
-            labelColor: 'black',
-            labelFontSize: 12,
-            labelFontWeight: 'normal',
-            labelFontFamily: 'Arial',
-            backgroundStroke: '#DBDBDB',
-            tickColor: 'black'
-        },
-
-        axis: {
-            tickColor: 'black',
-            labelMargin: 5,
-            labelExcludeChrPrefix: false,
-            labelColor: 'black',
-            labelFontSize: 12,
-            labelFontWeight: 'normal',
-            labelFontFamily: 'Arial',
-            baselineColor: 'black',
-            gridColor: '#E3E3E3',
-            gridStrokeWidth: 1,
-            gridStrokeType: 'solid',
-            gridStrokeDash: [4, 4]
-        },
-
-        markCommon: {
-            ...LightThemeMarkCommonStyle
-        },
-        point: {
-            ...LightThemeMarkCommonStyle,
-            size: 3
-        },
-        rect: {
-            ...LightThemeMarkCommonStyle
-        },
-        triangle: {
-            ...LightThemeMarkCommonStyle
-        },
-        area: {
-            ...LightThemeMarkCommonStyle
-        },
-        line: {
-            ...LightThemeMarkCommonStyle
-        },
-        bar: {
-            ...LightThemeMarkCommonStyle
-        },
-        rule: {
-            ...LightThemeMarkCommonStyle,
-            strokeWidth: 1
-        },
-        link: {
-            ...LightThemeMarkCommonStyle,
-            strokeWidth: 1
-        },
-        text: {
-            ...LightThemeMarkCommonStyle,
-            textAnchor: 'middle',
-            textFontWeight: 'normal'
-        },
-        brush: {
-            ...LightThemeMarkCommonStyle,
-            color: 'gray',
-            opacity: 0.3,
-            stroke: 'black',
-            strokeWidth: 1
-        }
-    },
-    dark: {
-        base: 'dark',
-
-        root: {
-            background: 'black',
-            titleColor: 'white',
-            titleBackgroundColor: 'transparent',
-            titleFontSize: 18,
-            titleFontFamily: 'Arial',
-            titleAlign: 'middle',
-            titleFontWeight: 'bold',
-            subtitleColor: 'lightgray',
-            subtitleBackgroundColor: 'transparent',
-            subtitleFontSize: 16,
-            subtitleFontFamily: 'Arial',
-            subtitleAlign: 'middle',
-            subtitleFontWeight: 'normal',
-            showMousePosition: true,
-            mousePositionColor: '#FFFFFF'
-        },
-
-        track: {
-            background: 'transparent',
-            alternatingBackground: 'transparent',
-            titleColor: 'white',
-            titleBackground: 'black',
-            titleFontSize: 18,
-            titleAlign: 'left',
-            outline: 'white',
-            outlineWidth: 1
-        },
-
-        legend: {
-            position: 'right',
-            background: 'black',
-            backgroundOpacity: 0.7,
-            labelColor: 'white',
-            labelFontSize: 12,
-            labelFontWeight: 'normal',
-            labelFontFamily: 'Arial',
-            backgroundStroke: '#DBDBDB',
-            tickColor: 'white'
-        },
-
-        axis: {
-            tickColor: 'white',
-            labelMargin: 5,
-            labelExcludeChrPrefix: false,
-            labelColor: 'white',
-            labelFontSize: 10,
-            labelFontWeight: 'normal',
-            labelFontFamily: 'Arial',
-            baselineColor: 'white',
-            gridColor: 'gray',
-            gridStrokeWidth: 1,
-            gridStrokeType: 'solid',
-            gridStrokeDash: [4, 4]
-        },
-
-        markCommon: {
-            ...DarkThemeMarkCommonStyle
-        },
-        point: {
-            ...DarkThemeMarkCommonStyle,
-            size: 3
-        },
-        rect: {
-            ...DarkThemeMarkCommonStyle
-        },
-        triangle: {
-            ...DarkThemeMarkCommonStyle
-        },
-        area: {
-            ...DarkThemeMarkCommonStyle
-        },
-        line: {
-            ...DarkThemeMarkCommonStyle
-        },
-        bar: {
-            ...DarkThemeMarkCommonStyle
-        },
-        rule: {
-            ...DarkThemeMarkCommonStyle,
-            strokeWidth: 1
-        },
-        link: {
-            ...DarkThemeMarkCommonStyle,
-            strokeWidth: 1
-        },
-        text: {
-            ...DarkThemeMarkCommonStyle,
-            textAnchor: 'middle',
-            textFontWeight: 'normal'
-        },
-        brush: {
-            ...DarkThemeMarkCommonStyle,
-            color: 'lightgray',
-            opacity: 0.3,
-            stroke: 'white',
-            strokeWidth: 1
-        }
-    }
-};
diff --git a/src/gosling-theme/dark.ts b/src/gosling-theme/dark.ts
@@ -20,32 +20,55 @@ export const dark: ThemeDeep = {
     root: {
         background: 'black',
         titleColor: 'white',
+        titleBackgroundColor: 'transparent',
+        titleFontSize: 18,
+        titleFontFamily: 'Arial',
+        titleAlign: 'middle',
+        titleFontWeight: 'bold',
         subtitleColor: 'lightgray',
-        mousePositionColor: '#FFFFFF',
-        showMousePosition: true
+        subtitleBackgroundColor: 'transparent',
+        subtitleFontSize: 16,
+        subtitleFontFamily: 'Arial',
+        subtitleAlign: 'middle',
+        subtitleFontWeight: 'normal',
+        showMousePosition: true,
+        mousePositionColor: '#FFFFFF'
     },
 
     track: {
+        background: 'transparent',
+        alternatingBackground: 'transparent',
         titleColor: 'white',
         titleBackground: 'black',
+        titleFontSize: 18,
+        titleAlign: 'left',
         outline: 'white',
         outlineWidth: 1
     },
-
     legend: {
+        position: 'right',
         background: 'black',
         backgroundOpacity: 0.7,
         labelColor: 'white',
+        labelFontSize: 12,
+        labelFontWeight: 'normal',
+        labelFontFamily: 'Arial',
         backgroundStroke: '#DBDBDB',
         tickColor: 'white'
     },
-
     axis: {
         tickColor: 'white',
+        labelMargin: 5,
+        labelExcludeChrPrefix: false,
         labelColor: 'white',
+        labelFontSize: 10,
+        labelFontWeight: 'normal',
+        labelFontFamily: 'Arial',
         baselineColor: 'white',
         gridColor: 'gray',
-        gridStrokeWidth: 1
+        gridStrokeWidth: 1,
+        gridStrokeType: 'solid',
+        gridStrokeDash: [4, 4]
     },
 
     markCommon: {

diff --git a/src/gosling-theme/light.ts b/src/gosling-theme/light.ts
@@ -38,7 +38,7 @@ export const light: ThemeDeep = {
         alternatingBackground: 'transparent',
         titleColor: 'black',
         titleBackground: 'white',
-        titleFontSize: 12,
+        titleFontSize: 24,
         titleAlign: 'left',
         outline: 'black',
         outlineWidth: 1
@@ -59,6 +59,8 @@ export const light: ThemeDeep = {
     axis: {
         tickColor: 'black',
         labelColor: 'black',
+        labelMargin: 5,
+        labelExcludeChrPrefix: false,
         labelFontSize: 12,
         labelFontWeight: 'normal',
         labelFontFamily: 'Arial',