Merged d3_changes into develop

package.json

@@ -61,13 +61,8 @@
   "dependencies": {
     "@keckelt/tsne": "^1.0.0",
     "arquero": "^4.8.0",
-    "canvas-confetti": "^1.4.0",
     "clone": "^2.1.2",
     "comlink": "^4.2.0",
-    "d3-array": "^3.1.4",
-    "d3-format": "^3.1.0",
-    "d3-selection": "^3.0.0",
-    "d3-transition": "^3.0.1",
     "jquery": "^3.5.0",
     "lineupjs": "4.6.2",
     "lodash.merge": "^4.x",
@@ -77,9 +72,10 @@
     "react-dom": "^16.13.0",
     "react-router-dom": "^5.2.0",
     "split-grid": "^1.0.9",
-    "tdp_publicdb": "git+ssh://[email protected]:caleydo/tdp_publicdb#develop",
+    "tdp_core": "git+ssh://[email protected]/datavisyn/tdp_core#develop",
+    "tdp_publicdb": "git+ssh://[email protected]/caleydo/tdp_publicdb#develop",
     "tippy.js": "^6.2.6",
-    "tourdino": "git+ssh://[email protected]:caleydo/tourdino#develop",
+    "tourdino": "git+ssh://[email protected]/caleydo/tourdino#develop",
     "vega": "~5.20.0",
     "vega-embed": "6.19.1",
     "vega-functions": "5.12.0",

src/CohortRepresentations.ts

@@ -1,4 +1,4 @@
-import d3 from 'd3';
+import {hsl} from 'd3v7';
 import tippy from 'tippy.js';
 import { Cohort } from './Cohort';
 import { IElement, IRectCohortRep } from './CohortInterfaces';
@@ -300,8 +300,7 @@ export class RectCohortRep implements IRectCohortRep {
       this._representation.style.backgroundColor = color;
       this._repClone.style.backgroundColor = color;
       // font color = white if color is too dark
-      if (color !== null && color !== 'transparent' && d3.hsl(color).l < 0.6) {
-        // transparent has lightness of zero
+      if (color !== null && color !== 'transparent' && hsl(color).l < 0.6) { //transparent has lightness of zero
         this._representation.style.color = 'white';
         this._repClone.style.color = 'white';
         this._removeButton.style.color = 'white';

src/Taskview/SearchBar.ts

@@ -1,11 +1,11 @@
-import { select } from 'd3-selection';
-import { IdTextPair, IServerColumn, RestBaseUtils } from 'tdp_core';
-import { dataTypes, depletion, IDataSubtypeConfig, IDataTypeConfig } from 'tdp_publicdb';
-import { colors } from '../colors';
-import { ScoreType } from '../data/Attribute';
-import { checkSpecialAttribute, ISpecialAttribute } from '../data/SpecialAttribute';
-import { deepCopy, getAnimatedLoadingText, log } from '../util';
-import { niceName } from '../utilLabels';
+import {select} from 'd3v7';
+import {IdTextPair, IServerColumn, RestBaseUtils} from 'tdp_core';
+import {dataTypes, depletion, IDataSubtypeConfig, IDataTypeConfig} from 'tdp_publicdb';
+import {colors} from '../colors';
+import {ScoreType} from '../data/Attribute';
+import {checkSpecialAttribute, ISpecialAttribute} from '../data/SpecialAttribute';
+import {deepCopy, getAnimatedLoadingText, log} from '../util';
+import {niceName} from '../utilLabels';
 
 export class SearchBar {
   private _container: HTMLDivElement;

src/Taskview/SearchColumn.ts

@@ -1,4 +1,4 @@
-import { select } from 'd3-selection';
+import {select} from 'd3v7';
 import * as $ from 'jquery';
 import tippy from 'tippy.js';
 import { Cohort } from '../Cohort';

src/Taskview/columns/AColumn.ts

@@ -1,10 +1,11 @@
-import { select } from 'd3-selection';
-import { Cohort, EMPTY_COHORT_ID, LOADER_COHORT_ID } from '../../Cohort';
-import { colors } from '../../colors';
-import { createSearchBarTooltip } from '../../Tooltip';
-import { getAnimatedLoadingBars, log } from '../../util';
-import { ColumnCloseEvent } from '../../utilCustomEvents';
-import Taskview, { InputCohort, OutputCohort } from '../Taskview';
+import {select} from 'd3v7';
+import {Cohort, EMPTY_COHORT_ID, LOADER_COHORT_ID} from '../../Cohort';
+import {colors} from '../../colors';
+import {createSearchBarTooltip} from '../../Tooltip';
+import {getAnimatedLoadingBars, log} from '../../util';
+import {ColumnCloseEvent} from '../../utilCustomEvents';
+import Taskview, {InputCohort, OutputCohort} from '../Taskview';
+
 
 export abstract class AColumn {
   $column: HTMLDivElement;

src/Taskview/columns/AttributeColumn.ts

@@ -1,4 +1,4 @@
-import { select } from 'd3-selection';
+import {select} from 'd3v7';
 import vegaEmbed from 'vega-embed';
 import { TopLevelSpec as VegaLiteSpec } from 'vega-lite';
 import { Cohort } from '../../Cohort';

src/Taskview/columns/CohortColumn.ts

@@ -1,9 +1,9 @@
-import { select } from 'd3-selection';
-import { Cohort } from '../../Cohort';
-import { OnboardingManager } from '../../OnboardingManager';
-import { SortType } from '../../util';
-import { ColumnSortEvent } from '../../utilCustomEvents';
-import { ADataColumn } from './AColumn';
+import {select} from 'd3v7';
+import {Cohort} from '../../Cohort';
+import {OnboardingManager} from '../../OnboardingManager';
+import {SortType} from '../../util';
+import {ColumnSortEvent} from '../../utilCustomEvents';
+import {ADataColumn} from './AColumn';
 
 /**
  * Displays cohorts with their given representation as a column

src/Taskview/columns/NumberColumn.ts

@@ -1,6 +1,6 @@
-import { format as d3Format } from 'd3-format';
-import { Cohort } from '../../Cohort';
-import { ADataColumn } from './AColumn';
+import {format as d3Format} from 'd3v7';
+import {Cohort} from '../../Cohort';
+import {ADataColumn} from './AColumn';
 
 export default class NumberColumn extends ADataColumn {
   constructor($container: HTMLDivElement) {

src/Taskview/tasks/ATask.ts

@@ -1,7 +1,7 @@
-import { select, Selection } from 'd3-selection';
-import { ICohort } from '../../CohortInterfaces';
-import { IAttribute } from '../../data/Attribute';
-import { OnboardingManager } from '../../OnboardingManager';
+import {select, Selection} from 'd3v7';
+import {ICohort} from '../../CohortInterfaces';
+import {IAttribute} from '../../data/Attribute';
+import {OnboardingManager} from '../../OnboardingManager';
 
 export const TASK_CLOSE_EVENT_TYPE = 'task:close';
 

src/Taskview/tasks/Compare.ts

@@ -4,13 +4,14 @@
  * Licensed under the new BSD license, available at http://caleydo.org/license
  **************************************************************************** */
 
-import * as d3 from 'd3';
-import { select, Selection } from 'd3-selection';
-import { IMeasureResult, IMeasureVisualization, ISetParameters, ISimilarityMeasure, MethodManager, SCOPE, Type, WorkerManager } from 'tourdino';
-import { Cohort } from '../../Cohort';
-import { Attribute, IAttribute } from '../../data/Attribute';
-import { log } from '../../util';
-import { ATask } from './ATask';
+
+import {hsl, scaleLinear, select, Selection} from 'd3v7';
+import * as d3v3 from 'd3v3';
+import {IMeasureResult, IMeasureVisualization, ISetParameters, ISimilarityMeasure, MethodManager, SCOPE, Type, WorkerManager} from 'tourdino';
+import {Cohort} from '../../Cohort';
+import {Attribute, IAttribute} from '../../data/Attribute';
+import {log} from '../../util';
+import {ATask} from './ATask';
 
 export class Compare extends ATask {
   public label = `Compare`;
@@ -117,8 +118,7 @@ export class Compare extends ATask {
         const parent = select(this).node().parentNode as HTMLElement; // parent span-element
         select(parent).style('background-color', (d) => (d as Cohort).colorTaskView);
         let color = '#333333';
-        if (d && d.colorTaskView && d.colorTaskView !== 'transparent' && d3.hsl(d.colorTaskView).l < 0.5) {
-          // transparent has lightness of zero
+        if (d && d.colorTaskView && 'transparent' !== d.colorTaskView && hsl(d.colorTaskView).l < 0.5) { //transparent has lightness of zero
           color = 'white';
         }
         select(parent.parentNode as HTMLElement)
@@ -504,7 +504,7 @@ export class Compare extends ATask {
       if (measure.visualization) {
         const { visualization } = measure;
         if (cellData.setParameters) {
-          const d3v3Details = d3.select(details.node());
+          const d3v3Details = d3v3.select(details.node());
           visualization.generateVisualization(d3v3Details, cellData.setParameters, cellData.score);
         }
       }
@@ -744,8 +744,7 @@ interface IHighlightData {
 
 export function textColor4Background(backgroundColor: string) {
   let color = '#333333';
-  if (backgroundColor !== 'transparent' && d3.hsl(backgroundColor).l < 0.5) {
-    // transparent has lightness of zero
+  if ('transparent' !== backgroundColor && hsl(backgroundColor).l < 0.5) { //transparent has lightness of zero
     color = 'white';
   }
 
@@ -758,10 +757,7 @@ export function score2color(score: number): { background: string; foreground: st
 
   if (score <= 0.05) {
     // log.debug('bg color cahnge')
-    const calcColor = d3.scale
-      .linear()
-      .domain([0, 0.05])
-      .range(<any[]>['#000000', '#FFFFFF']);
+    const calcColor = scaleLinear().domain([0, 0.05]).range(<any[]>['#000000', '#FFFFFF']);
 
     background = calcColor(score).toString();
     foreground = textColor4Background(background);

src/Taskview/tasks/Details.ts

@@ -1,5 +1,5 @@
 import * as aq from 'arquero';
-import { select } from 'd3-selection';
+import {select} from 'd3v7';
 import * as LineUpJS from 'lineupjs';
 import { Cohort } from '../../Cohort';
 import { ICohort } from '../../CohortInterfaces';

src/Taskview/tasks/Filter.ts

@@ -1,16 +1,17 @@
-import { Selection } from 'd3-selection';
-import { ICohort } from '../../CohortInterfaces';
-import { IAttribute } from '../../data/Attribute';
-import { getAnimatedLoadingText, log } from '../../util';
-import { AreaChart } from '../visualizations/AreaChart';
-import { AVegaVisualization } from '../visualizations/AVegaVisualization';
-import { Option, OptionGroup, VisConfig } from '../visualizations/config/VisConfig';
-import { DensityPlot } from '../visualizations/DensityPlot';
-import { GroupedBoxplot } from '../visualizations/GroupedBoxplot';
-import { VegaGroupedHistogram } from '../visualizations/GroupedHistogram';
-import { KaplanMeierPlot } from '../visualizations/KaplanMeierPlot';
-import { Scatterplot } from '../visualizations/Scatterplot';
-import { ATask } from './ATask';
+
+import {Selection} from 'd3v7';
+import {ICohort} from '../../CohortInterfaces';
+import {IAttribute} from '../../data/Attribute';
+import {getAnimatedLoadingText, log} from '../../util';
+import {AreaChart} from '../visualizations/AreaChart';
+import {AVegaVisualization} from '../visualizations/AVegaVisualization';
+import {Option, OptionGroup, VisConfig} from '../visualizations/config/VisConfig';
+import {DensityPlot} from '../visualizations/DensityPlot';
+import {GroupedBoxplot} from '../visualizations/GroupedBoxplot';
+import {VegaGroupedHistogram} from '../visualizations/GroupedHistogram';
+import {KaplanMeierPlot} from '../visualizations/KaplanMeierPlot';
+import {Scatterplot} from '../visualizations/Scatterplot';
+import {ATask} from './ATask';
 
 export class Filter extends ATask {
   public label = `View, Filter & Split`;

src/Taskview/tasks/Prevalence.ts

@@ -1,6 +1,4 @@
-import { format } from 'd3-format';
-import { select } from 'd3-selection';
-import { transition } from 'd3-transition';
+import {format, select, transition} from 'd3v7';
 import tippy from 'tippy.js';
 import { Cohort, IBloodlineElement } from '../../Cohort';
 import { ICohort } from '../../CohortInterfaces';

src/Taskview/visualizations/AVegaVisualization.ts

@@ -1,6 +1,5 @@
-import { format } from 'd3-format';
-import { select } from 'd3-selection';
-import { cloneDeep } from 'lodash';
+import {format, select} from 'd3v7';
+import {cloneDeep} from 'lodash';
 import tippy from 'tippy.js';
 import { View as VegaView } from 'vega';
 import vegaEmbed from 'vega-embed';

src/Taskview/visualizations/DensityPlot.ts

@@ -1,5 +1,4 @@
-import { format } from 'd3-format';
-import { select } from 'd3-selection';
+import {format, select} from 'd3v7';
 import log from 'loglevel';
 import { Spec as VegaSpec } from 'vega';
 import { TopLevelSpec as VegaLiteSpec } from 'vega-lite';

src/Taskview/visualizations/GroupedBoxplot.ts

@@ -1,5 +1,4 @@
-import { format } from 'd3-format';
-import { select } from 'd3-selection';
+import {format, select} from 'd3v7';
 import log from 'loglevel';
 import { Spec as VegaSpec } from 'vega';
 import { TopLevelSpec as VegaLiteSpec } from 'vega-lite';

src/Taskview/visualizations/KaplanMeierPlot.ts

@@ -1,15 +1,15 @@
 import log from 'loglevel';
-import { select } from 'd3-selection';
-import { TopLevelSpec as VegaLiteSpec } from 'vega-lite';
-import { Spec as VegaSpec, None } from 'vega';
-import { desc, op, from, rolling, table, not } from 'arquero';
-import { OrderKeys, ExprList } from 'arquero/dist/types/table/transformable';
-import { IdValuePair, ServerColumnAttribute } from '../../data/Attribute';
-import { DATA_LABEL } from './constants';
-import { getCohortLabel, getCohortLabels } from '../../Cohort';
-import { SingleAttributeVisualization, AVegaVisualization } from './AVegaVisualization';
-import { ICohort } from '../../CohortInterfaces';
-import { confidenceToggleGroup, confidenceNone } from './config/ConfidenceConfig';
+import {select} from 'd3v7';
+import {TopLevelSpec as VegaLiteSpec} from 'vega-lite';
+import {Spec as VegaSpec, None} from 'vega';
+import {IdValuePair, ServerColumnAttribute} from '../../data/Attribute';
+import {DATA_LABEL} from './constants';
+import {desc, op, from, rolling, table, not} from 'arquero';
+import {getCohortLabel, getCohortLabels} from '../../Cohort';
+import {SingleAttributeVisualization, AVegaVisualization} from './AVegaVisualization';
+import {ICohort} from '../../CohortInterfaces';
+import {OrderKeys, ExprList} from 'arquero/dist/types/table/transformable';
+import {confidenceToggleGroup, confidenceNone} from './config/ConfidenceConfig';
 import confidenceIcon from '../../assets/icons/confidence.svg';
 
 export class KaplanMeierPlot extends SingleAttributeVisualization {

src/Taskview/visualizations/MultiAttributeVisualization.ts

@@ -1,6 +1,5 @@
 import * as aq from 'arquero';
-import { format } from 'd3-format';
-import { select } from 'd3-selection';
+import {format, select} from 'd3v7';
 import tippy from 'tippy.js';
 import vegaEmbed from 'vega-embed';
 import { TopLevelSpec as VegaLiteSpec } from 'vega-lite';

src/Taskview/visualizations/Scatterplot.ts

@@ -1,16 +1,16 @@
 import * as Comlink from 'comlink';
-import { select } from 'd3-selection';
-import { Spec as VegaSpec } from 'vega';
-import { TopLevelSpec as VegaLiteSpec } from 'vega-lite';
-import { TopLevel, LayerSpec } from 'vega-lite/build/src/spec';
-import { Field } from 'vega-lite/build/src/channeldef';
-import { Cohort } from '../../Cohort';
-import { AttributeType, IAttribute, IdValuePair, ServerColumnAttribute } from '../../data/Attribute';
-import { NumRangeOperators } from '../../rest';
-import { IFilterDesc, inRange } from '../../util';
-import { FilterEvent } from '../../utilCustomEvents';
-import { DATA_LABEL } from './constants';
-import { AxisType, MultiAttributeVisualization } from './MultiAttributeVisualization';
+import {select} from 'd3v7';
+import {Spec as VegaSpec} from 'vega';
+import {TopLevelSpec as VegaLiteSpec} from 'vega-lite';
+import {Cohort} from '../../Cohort';
+import {AttributeType, IAttribute, IdValuePair, ServerColumnAttribute} from '../../data/Attribute';
+import {NumRangeOperators} from '../../rest';
+import {IFilterDesc, inRange} from '../../util';
+import {FilterEvent} from '../../utilCustomEvents';
+import {DATA_LABEL} from './constants';
+import {AxisType, MultiAttributeVisualization} from './MultiAttributeVisualization';
+import {TopLevel, LayerSpec} from 'vega-lite/build/src/spec';
+import {Field} from 'vega-lite/build/src/channeldef';
 
 export class Scatterplot extends MultiAttributeVisualization {
   static readonly NAME: string = 'Scatterplot';

src/app.ts

@@ -1,4 +1,4 @@
-import { select, Selection } from 'd3-selection';
+import {select, Selection} from 'd3v7';
 import SplitGrid from 'split-grid';
 import {
   AppContext,

src/common/config.ts

@@ -216,7 +216,7 @@ export const gene: IDataSourceConfig = {
       ColumnDescUtils.stringCol('symbol', { label: 'Symbol', width: 120 }),
       ColumnDescUtils.stringCol('id', { label: 'Ensembl' }),
       ColumnDescUtils.stringCol('name', { label: 'Name' }),
-      ColumnDescUtils.categoricalCol('chromosome', toChromosomes(find('chromosome').categories), { label: 'Chromosome' }),
+      ColumnDescUtils.categoricalCol('chromosome', toChromosomes(find('chromosome').categories as string[]), { label: 'Chromosome' }),
       ColumnDescUtils.categoricalCol('biotype', find('biotype').categories, { label: 'Biotype' }),
       ColumnDescUtils.categoricalCol(
         'strand',

src/data/Attribute.ts

@@ -187,7 +187,7 @@ export class ServerColumnAttribute extends Attribute {
   constructor(public readonly id: string, public readonly view: string, public readonly database: string, readonly serverColumn: IServerColumn) {
     super(id, view, database, serverColumn.type);
     this.label = niceName(serverColumn.label);
-    this.categories = serverColumn.categories;
+    this.categories = serverColumn.categories as string[];
   }
 
   async filter(cht: Cohort, filter: INumRange[] | IEqualsList, rangeLabel?: string): Promise<Cohort> {

src/index.ts

@@ -10,4 +10,3 @@ export * from './cohortview';
 export * from './rest';
 
 export * from './util';
-export * from './utils';

src/util.ts

@@ -1,4 +1,4 @@
-import { select, Selection } from 'd3-selection';
+import {select, Selection} from 'd3v7';
 import * as logger from 'loglevel';
 import { NotificationHandler } from 'tdp_core';
 import { ICohort } from './CohortInterfaces';

src/utilLabels.ts

@@ -1,5 +1,5 @@
-import { format } from 'd3-format';
-import { IEqualsList, INumRange, isEqualsList, isNumRangeFilter, NumRangeOperators } from './rest';
+import {format} from 'd3v7';
+import {IEqualsList, INumRange, isEqualsList, isNumRangeFilter, NumRangeOperators} from './rest';
 
 export function niceName(label: string): string {
   return label