refactor: replace is_streamgraph with visualization_type

Author: andreishket

vis/js/HeadstartRunner.tsx

@@ -1,32 +1,29 @@
 // @ts-nocheck
-import ReactDOM from "react-dom";
+import Bowser from "bowser";
 import React from "react";
-import { createStore } from "redux";
-import { Provider } from "react-redux";
+import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
 
-import rootReducer, { getInitialState } from "./reducers";
 import {
-  initializeStore,
-  updateDimensions,
   applyForceAreas,
   applyForcePapers,
+  initializeStore,
+  updateDimensions,
 } from "./actions";
-
-import applyHeadstartMiddleware from "./middleware";
-
-import { applyForce } from "./utils/force";
-
-import { getChartSize, getListSize } from "./utils/dimensions";
 import Headstart from "./components/Headstart";
-import { removeQueryParams } from "./utils/url";
-import debounce from "./utils/debounce";
-import DataManager from "./dataprocessing/managers/DataManager";
 import FetcherFactory from "./dataprocessing/fetchers/FetcherFactory";
-import handleZoomSelectQuery from "./utils/backButton";
-
-import Bowser from "bowser";
+import DataManager from "./dataprocessing/managers/DataManager";
+import applyHeadstartMiddleware from "./middleware";
+import rootReducer, { getInitialState } from "./reducers";
+import { STREAMGRAPH_MODE } from "./reducers/chartType";
 import { Config } from "./types/config";
+import handleZoomSelectQuery from "./utils/backButton";
+import debounce from "./utils/debounce";
+import { getChartSize, getListSize } from "./utils/dimensions";
+import { applyForce } from "./utils/force";
+import { removeQueryParams } from "./utils/url";
 
 class HeadstartRunner {
   public config: Config;
@@ -79,7 +76,7 @@ class HeadstartRunner {
     const browserName = browser.getBrowserName(true);
 
     const isSupportedBrowser = SUPPORTED.map((browserName) =>
-      browserName.toLowerCase()
+      browserName.toLowerCase(),
     ).includes(browserName);
 
     if (!isSupportedBrowser || !browserName) {
@@ -88,7 +85,7 @@ class HeadstartRunner {
           "This visualization was successfully tested " +
           "with the latest versions of " +
           "Chrome, Firefox, Safari, Edge and Opera. " +
-          "We strongly recommend using one of these browsers."
+          "We strongly recommend using one of these browsers.",
       );
     }
   }
@@ -98,7 +95,7 @@ class HeadstartRunner {
     rootNode.render(
       <Provider store={this.store}>
         <Headstart />
-      </Provider>
+      </Provider>,
     );
   }
 
@@ -116,7 +113,7 @@ class HeadstartRunner {
     const dataFetcher = FetcherFactory.getInstance(config.mode, {
       serverUrl: config.server_url,
       files: config.files,
-      isStreamgraph: config.is_streamgraph,
+      isStreamgraph: config.visualization_type === STREAMGRAPH_MODE,
     });
 
     return await dataFetcher.getData();
@@ -145,11 +142,14 @@ class HeadstartRunner {
         height,
         list.height,
         this.dataManager.scalingFactors,
-        this.dataManager.author
-      )
+        this.dataManager.author,
+      ),
     );
 
-    if (!this.config.is_streamgraph) {
+    const { visualization_type: visualizationType } = this.config;
+    const isNotStreamgraph = visualizationType !== STREAMGRAPH_MODE;
+
+    if (isNotStreamgraph) {
       this.applyForceLayout();
     }
   }
@@ -190,7 +190,7 @@ class HeadstartRunner {
         this.store.dispatch(applyForceAreas(newAreas, state.chart.height)),
       (newPapers: any) =>
         this.store.dispatch(applyForcePapers(newPapers, state.chart.height)),
-      this.config
+      this.config,
     );
   }
 
@@ -210,7 +210,7 @@ class HeadstartRunner {
     scaleBy: string,
     baseUnit: string,
     isContentBased: boolean,
-    initialSort: string
+    initialSort: string,
   ) {
     this.config.scale_by = scaleBy;
     this.config.base_unit = baseUnit;

vis/js/dataprocessing/managers/DataManager.ts

@@ -1,7 +1,11 @@
 // @ts-nocheck
+import { AllPossiblePapersType, Config, Paper } from "@js/types";
 import d3 from "d3";
 import $ from "jquery";
-import { Config, Paper, AllPossiblePapersType } from "@js/types";
+
+import { GEOMAP_MODE, STREAMGRAPH_MODE } from "@/js/reducers/chartType";
+import { AquanaviPaper } from "@/js/types/models/paper";
+
 import {
   checkIsAquanaviData,
   extractAuthors,
@@ -25,8 +29,6 @@ import {
 } from "../../utils/scale";
 import { transformData } from "../../utils/streamgraph";
 import DEFAULT_SCHEME, { SchemeObject } from "../schemes/defaultScheme";
-import { GEOMAP_MODE } from "@/js/reducers/chartType";
-import { AquanaviPaper } from "@/js/types/models/paper";
 
 const GOLDEN_RATIO = 2.6;
 
@@ -65,7 +67,9 @@ class DataManager {
     // initialize this.scalingFactors
     this.__computeScalingFactors(this.papers.length);
 
-    if (!this.config.is_streamgraph) {
+    const { visualization_type: visualizationType } = this.config;
+    const isNotStreamgraph = visualizationType !== STREAMGRAPH_MODE;
+    if (isNotStreamgraph) {
       // scale this.papers based on the chart size
       this.__scalePapers(chartSize);
       // initialize this.areas

vis/js/default-config.ts

@@ -13,8 +13,7 @@ var config: Config = {
   is_authorview: false,
   //when set to true, scale map using metrics
   content_based: false,
-  //show streamgraph instead of map
-  is_streamgraph: false,
+
   //tag that headstart is appended to
   tag: "visualization",
 

vis/js/reducers/chartType.ts

@@ -1,39 +1,41 @@
-import { VisualizationTypes } from "../types";
+import { Action, VisualizationTypes } from "../types";
 
 export const STREAMGRAPH_MODE = "timeline";
 export const KNOWLEDGEMAP_MODE = "overview";
 export const GEOMAP_MODE = "geomap";
+const WARNINGS = {
+  undefined:
+    "Chart type is not defined in the configuration. The overview one will be used as a fallback.",
+  notAllowed:
+    "Configured chart type is not allowed. The overview one will be used as a fallback.",
+};
 
-const chartType = (
-  state: VisualizationTypes = KNOWLEDGEMAP_MODE,
-  action: any,
-) => {
-  if (action.canceled) {
-    return state;
-  }
+type ChartTypeReducer = (
+  prevState: VisualizationTypes | undefined,
+  action: Action,
+) => VisualizationTypes;
+
+export const chartType: ChartTypeReducer = (prevState, action) => {
+  const state = prevState ?? KNOWLEDGEMAP_MODE;
 
   switch (action.type) {
-    case "INITIALIZE":
-      const isStreamgraph: boolean = action.configObject.is_streamgraph;
-      const type: VisualizationTypes = action.configObject.visualization_type;
+    case "INITIALIZE": {
+      const type = action.configObject?.visualization_type;
 
-      if (isStreamgraph) {
-        return STREAMGRAPH_MODE;
+      if (!type) {
+        console.warn(WARNINGS.undefined);
+        return KNOWLEDGEMAP_MODE;
       }
 
-      switch (type) {
-        case KNOWLEDGEMAP_MODE:
-          return KNOWLEDGEMAP_MODE;
-        case STREAMGRAPH_MODE:
-          return STREAMGRAPH_MODE;
-        case GEOMAP_MODE:
-          return GEOMAP_MODE;
-        default:
-          KNOWLEDGEMAP_MODE;
+      if (![STREAMGRAPH_MODE, KNOWLEDGEMAP_MODE, GEOMAP_MODE].includes(type)) {
+        console.warn(WARNINGS.notAllowed);
+        return KNOWLEDGEMAP_MODE;
       }
-    default:
+
+      return type;
+    }
+    default: {
       return state;
+    }
   }
 };
-
-export default chartType;

vis/js/reducers/data.ts

@@ -2,6 +2,7 @@ import d3 from "d3";
 
 import { getValueOrZero } from "../utils/data";
 import { getDiameterScale, getResizedScale } from "../utils/scale";
+import { STREAMGRAPH_MODE } from "./chartType";
 
 const data = (
   state = { list: [], options: {}, size: null } as any,
@@ -21,7 +22,8 @@ const data = (
         paperMaxScale: action.scalingFactors.paperMaxScale,
         paperWidthFactor: action.configObject.paper_width_factor,
         paperHeightFactor: action.configObject.paper_height_factor,
-        isStreamgraph: action.configObject.is_streamgraph,
+        isStreamgraph:
+          action.configObject.visualization_type === STREAMGRAPH_MODE,
         visualizationId: action.contextObject.id,
         hoveredItemId: null,
       };

vis/js/reducers/heading.ts

@@ -1,5 +1,5 @@
 import { Config } from "../types";
-import { GEOMAP_MODE } from "./chartType";
+import { GEOMAP_MODE, STREAMGRAPH_MODE } from "./chartType";
 
 const context = (state = {}, action: any) => {
   if (action.canceled) {
@@ -45,19 +45,22 @@ const getTitleStyle = (config: Config) => {
 };
 
 const getTitleLabelType = (config: Config) => {
-  if (config.is_authorview && config.is_streamgraph) {
+  const isStreamgraph = config.visualization_type === STREAMGRAPH_MODE;
+  const isGeomap = config.visualization_type === GEOMAP_MODE;
+
+  if (config.is_authorview && isStreamgraph) {
     return "authorview-streamgraph";
   }
 
-  if (config.is_authorview && !config.is_streamgraph) {
+  if (config.is_authorview && !isStreamgraph) {
     return "authorview-knowledgemap";
   }
 
-  if (config.is_streamgraph) {
+  if (isStreamgraph) {
     return "keywordview-streamgraph";
   }
 
-  if (config.visualization_type === GEOMAP_MODE) {
+  if (isGeomap) {
     return "geomap";
   }
 

vis/js/reducers/index.ts

@@ -9,7 +9,7 @@ import areas from "./areas";
 import author from "./author";
 import bubbleOrder from "./bubbleOrder";
 import chart from "./chart";
-import chartType from "./chartType";
+import { chartType } from "./chartType";
 import contextLine from "./contextLine";
 import data from "./data";
 import { geomapSettings } from "./geomapSettings";

vis/js/reducers/timespan.ts

@@ -1,6 +1,8 @@
 // @ts-nocheck
 
 import dateFormat from "dateformat";
+
+import { STREAMGRAPH_MODE } from "./chartType";
 import { getModifier } from "./contextLine";
 
 const timespan = (state = null, action: any) => {
@@ -54,19 +56,22 @@ const getTimespan = (config, context) => {
   const modifier = getModifier(config, context);
   // most recent streamgraphs straight away display "Until xyz",
   // other maps have a more complicated logic
-  if (!config.is_streamgraph || modifier !== "most-recent") {
+
+  const { visualization_type: visualizationType } = config;
+  const isNotStreamgraph = visualizationType !== STREAMGRAPH_MODE;
+  if (isNotStreamgraph || modifier !== "most-recent") {
     const defaultFromHyphenated =
       SERVICE_START[config.service] || SERVICE_START.default;
 
     const fromHyphenated = dateFormat(from, hyphenFormat);
     const fromFormatted = dateFormat(from, displayFormat);
 
     if (fromHyphenated !== defaultFromHyphenated) {
-      return fromFormatted + " - " + toFormatted;
+      return `${fromFormatted} - ${toFormatted}`;
     }
   }
 
-  return "Until " + toFormatted;
+  return `Until ${toFormatted}`;
 };
 
 const getTodayDate = () => {

vis/js/types/configs/config.ts

@@ -20,7 +20,6 @@ export type Config = {
   scale_toolbar: boolean;
   is_authorview: boolean;
   content_based: boolean;
-  is_streamgraph: boolean;
   tag: string;
 
   metric_list?: boolean;