fix #283 reset color mapping

lineupjs · Apr 6, 2020 · 07cadb2 · 07cadb2
1 parent 05034e0
commit 07cadb2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/src/provider/ADataProvider.ts b/src/provider/ADataProvider.ts
@@ -262,6 +262,10 @@ abstract class ADataProvider extends AEventDispatcher implements IDataProvider {
     return factory;
   }
 
+  getTypeFactory() {
+    return this.typeFactory;
+  }
+
   /**
    * events:
    *  * column changes: addColumn, removeColumn

diff --git a/src/provider/interfaces.ts b/src/provider/interfaces.ts
@@ -1,4 +1,4 @@
-import {Column, Ranking, IColumnConstructor, IColumnDesc, IGroup, IndicesArray, IDataRow, IRankingDump, EAggregationState, IColorMappingFunctionConstructor, IMappingFunctionConstructor} from '../model';
+import {Column, Ranking, IColumnConstructor, IColumnDesc, IGroup, IndicesArray, IDataRow, IRankingDump, EAggregationState, IColorMappingFunctionConstructor, IMappingFunctionConstructor, ITypeFactory} from '../model';
 import {AEventDispatcher, ISequence} from '../internal';
 import {IRenderTasks} from '../renderer';
 import {IAbortAblePromise} from 'lineupengine';
@@ -39,6 +39,8 @@ export interface IDataProvider extends AEventDispatcher {
 
   getTaskExecutor(): IRenderTasks;
 
+  getTypeFactory(): ITypeFactory;
+
   takeSnapshot(col: Column): void;
 
   selectAllOf(ranking: Ranking): void;

diff --git a/src/styles/_dialogs.scss b/src/styles/_dialogs.scss
@@ -168,6 +168,8 @@
 
 .#{$lu_css_prefix}-dialog-color {
   width: 17em;
+  display: flex;
+  flex-direction: column;
 
   > strong[data-toggle] {
     cursor: pointer;

diff --git a/src/ui/dialogs/ColorMappingDialog.ts b/src/ui/dialogs/ColorMappingDialog.ts
@@ -2,15 +2,16 @@ import ADialog, {IDialogContext} from './ADialog';
 import {schemeCategory10, schemeSet1, schemeSet2, schemeSet3, schemeAccent, schemeDark2, schemePastel2, schemePastel1} from 'd3-scale-chromatic';
 import {round} from '../../internal';
 import {uniqueId} from '../../renderer/utils';
-import {QuantizedColorFunction, CustomColorMappingFunction, SolidColorFunction, SequentialColorFunction, DivergentColorFunction, DEFAULT_COLOR_FUNCTION} from '../../model/ColorMappingFunction';
-import {IMapAbleColumn, DEFAULT_COLOR, IColorMappingFunction} from '../../model';
+import {QuantizedColorFunction, CustomColorMappingFunction, SolidColorFunction, SequentialColorFunction, DivergentColorFunction} from '../../model/ColorMappingFunction';
+import {IMapAbleColumn, DEFAULT_COLOR, IColorMappingFunction, IMapAbleDesc} from '../../model';
 import {cssClass} from '../../styles';
+import {IRankingHeaderContext} from '../interfaces';
 
 export default class ColorMappingDialog extends ADialog {
   private readonly before: IColorMappingFunction;
   private readonly id = uniqueId('col');
 
-  constructor(private readonly column: IMapAbleColumn, dialog: IDialogContext) {
+  constructor(private readonly column: IMapAbleColumn, dialog: IDialogContext, private readonly ctx: IRankingHeaderContext) {
     super(dialog, {
       livePreview: 'colorMapping'
     });
@@ -202,7 +203,9 @@ export default class ColorMappingDialog extends ADialog {
   }
 
   protected reset() {
-    this.render(this.node.querySelector<HTMLElement>(`.${cssClass('dialog-color')}`)!, DEFAULT_COLOR_FUNCTION);
+    const desc = <IMapAbleDesc>this.column.desc;
+    const colorMapping = this.ctx.provider.getTypeFactory().colorMappingFunction(desc.colorMapping || desc.color);
+    this.render(this.node.querySelector<HTMLElement>(`.${cssClass('dialog-color')}`)!, colorMapping);
   }
 
   protected submit() {

diff --git a/src/ui/toolbar.ts b/src/ui/toolbar.ts
@@ -284,7 +284,7 @@ export const toolbarActions: {[key: string]: IToolbarAction} = {
   filterCategorical: uiDialog('Filter &hellip;', CategoricalFilterDialog, () => [], {mode: 'menu+shortcut', featureCategory: 'ranking', featureLevel: 'basic'}),
   filterOrdinal: uiDialog('Filter &hellip;', CategoricalMappingFilterDialog, () => [], {mode: 'menu+shortcut', featureCategory: 'ranking', featureLevel: 'basic'}),
   filterBoolean: uiDialog('Filter &hellip;', BooleanFilterDialog, () => [], {mode: 'menu+shortcut', featureCategory: 'ranking', featureLevel: 'basic'}),
-  colorMapped: uiDialog('Color Mapping &hellip;', ColorMappingDialog, () => [], {mode: 'menu', featureCategory: 'ui', featureLevel: 'advanced'}),
+  colorMapped: uiDialog('Color Mapping &hellip;', ColorMappingDialog, (ctx) => [ctx], {mode: 'menu', featureCategory: 'ui', featureLevel: 'advanced'}),
   colorMappedCategorical: uiDialog('Color Mapping &hellip;', CategoricalColorMappingDialog, () => [], {mode: 'menu', featureCategory: 'ui', featureLevel: 'advanced'}),
   script: uiDialog('Edit Combine Script &hellip;', ScriptEditDialog, () => [], {mode: 'menu+shortcut', featureCategory: 'model', featureLevel: 'advanced'}),
   reduce: uiDialog('Reduce by &hellip;', ReduceDialog, () => [], {featureCategory: 'model', featureLevel: 'advanced'}),