Merge pull request #265 from lineupjs/sgratzl/dialogs

Harmonize dialogs by adding apply, cancel, and reset buttons

demo/dialog.html

@@ -49,6 +49,14 @@
       })
     }
     const lineup = LineUpJS.asTaggle(document.querySelector('article div'), arr);
+
+    lineup.on(LineUpJS.Taggle.EVENT_DIALOG_OPENED, (dialog) => {
+      console.log('dialog opened', dialog);
+    });
+
+    lineup.on(LineUpJS.Taggle.EVENT_DIALOG_CLOSED, (dialog, action) => {
+      console.log('dialog closed', dialog, action);
+    });
   };
 </script>
 

src/builder/LineUpBuilder.ts

@@ -1,4 +1,4 @@
-import {IDynamicHeight, ITaggleOptions} from '../config';
+import {IDynamicHeight, ITaggleOptions, ILivePreviewOptions} from '../config';
 import Column, {IGroupData, IGroupItem, Ranking} from '../model';
 import {ICellRendererFactory, ERenderMode} from '../renderer';
 import {IToolbarAction, IToolbarDialogAddon} from '../ui';
@@ -22,6 +22,11 @@ export default class LineUpBuilder {
     return this;
   }
 
+  livePreviews(options: Partial<ILivePreviewOptions>) {
+    this.options.livePreviews = options;
+    return this;
+  }
+
   /**
    * option to rotate labels on demand in narrow columns
    * @param rotation rotation in degrees

src/builder/adapter/lineup.ts

@@ -7,7 +7,7 @@ import {equal, isSame, pick} from './utils';
 
 
 const providerOptions: (keyof IDataProviderOptions | keyof ILocalDataProviderOptions)[] = ['singleSelection', 'filterGlobally', 'columnTypes', 'taskExecutor', 'jumpToSearchResult'];
-const lineupOptions: (keyof IBuilderAdapterProps)[] = ['animated', 'sidePanel', 'sidePanelCollapsed', 'hierarchyIndicator', 'defaultSlopeGraphMode', 'summaryHeader', 'expandLineOnHover', 'overviewMode', 'renderers', 'canRender', 'toolbar', 'rowHeight', 'rowPadding', 'groupHeight', 'groupPadding', 'dynamicHeight', 'labelRotation', 'ignoreUnsupportedBrowser'];
+const lineupOptions: (keyof IBuilderAdapterProps)[] = ['animated', 'sidePanel', 'sidePanelCollapsed', 'hierarchyIndicator', 'defaultSlopeGraphMode', 'summaryHeader', 'expandLineOnHover', 'overviewMode', 'renderers', 'canRender', 'toolbar', 'rowHeight', 'rowPadding', 'groupHeight', 'groupPadding', 'dynamicHeight', 'labelRotation', 'ignoreUnsupportedBrowser', 'livePreviews'];
 
 interface IRankingContext {
   builders: IBuilderAdapterRankingProps[];

src/config.ts

@@ -52,6 +52,21 @@ export interface ILineUpFlags {
   advancedUIFeatures: boolean;
 }
 
+export interface ILivePreviewOptions {
+  search: boolean;
+  filter: boolean;
+  vis: boolean;
+  sort: boolean;
+  group: boolean;
+  groupSort: boolean;
+  colorMapping: boolean;
+  dataMapping: boolean;
+  reduce: boolean;
+  rename: boolean;
+  cutOff: boolean;
+}
+
+
 export interface ILineUpOptions {
   /**
    * option to enable/disable showing a summary (histogram, ...) in the header
@@ -84,6 +99,18 @@ export interface ILineUpOptions {
    */
   hierarchyIndicator: boolean;
 
+  /**
+   * flag whether dialogs should confirm or cancel on clicking the background
+   * @default cancel
+   */
+  onDialogBackgroundClick: 'cancel' | 'confirm';
+
+  /**
+   * flag whether to shows filter previews as soon as the user changes the filter in the dialog
+   * @default {search: true,filter: true, vis: true,sort: true, group: true, groupSort: true, colorMapping: true}
+   */
+  livePreviews: Partial<ILivePreviewOptions>;
+
   /**
    * option to specify the default slope graph mode
    * @default 'item'
@@ -197,6 +224,17 @@ export function defaultOptions(): ITaggleOptions {
     defaultSlopeGraphMode: 'item',
     overviewMode: false,
 
+    livePreviews: {
+      search: true,
+      filter: true,
+      vis: true,
+      sort: true,
+      group: true,
+      groupSort: true,
+      colorMapping: true
+    },
+    onDialogBackgroundClick: 'cancel',
+
     rowHeight: 18,
     groupHeight: 40,
     groupPadding: 5,
@@ -210,7 +248,7 @@ export function defaultOptions(): ITaggleOptions {
       disableFrozenColumns: true, //disable by default for speed navigator.userAgent.includes('Firefox/52') // disable by default in Firefox ESR 52
       advancedRankingFeatures: true,
       advancedModelFeatures: true,
-      advancedUIFeatures: true
+      advancedUIFeatures: true,
     },
 
     ignoreUnsupportedBrowser: false

src/model/AggregateGroupColumn.ts

@@ -3,6 +3,7 @@ import Column, {widthChanged, labelChanged, metaDataChanged, dirty, dirtyHeader,
 import {IGroup, IColumnDesc} from './interfaces';
 import Ranking from './Ranking';
 import {IEventListener} from '../internal';
+import {integrateDefaults} from './internal';
 
 
 export enum EAggregationState {
@@ -44,8 +45,9 @@ export default class AggregateGroupColumn extends Column {
   static readonly EVENT_AGGREGATE = 'aggregate';
 
   constructor(id: string, desc: Readonly<IAggregateGroupColumnDesc>) {
-    super(id, desc);
-    this.setDefaultWidth(40);
+    super(id, integrateDefaults(desc, {
+      width: 40
+    }));
   }
 
   get frozen() {

src/model/BooleanColumn.ts

@@ -6,6 +6,7 @@ import {ICategoricalColumn, ICategory, ICategoricalColorMappingFunction} from '.
 import {IDataRow, ECompareValueType, IValueColumnDesc, ITypeFactory} from './interfaces';
 import {IEventListener} from '../internal';
 import {DEFAULT_CATEGORICAL_COLOR_FUNCTION} from './CategoricalColorMappingFunction';
+import {integrateDefaults} from './internal';
 
 export interface IBooleanDesc {
   /**
@@ -54,8 +55,9 @@ export default class BooleanColumn extends ValueColumn<boolean> implements ICate
   readonly categories: ICategory[];
 
   constructor(id: string, desc: Readonly<IBooleanColumnDesc>) {
-    super(id, desc);
-    this.setWidthImpl(30);
+    super(id, integrateDefaults(desc, {
+      width: 30
+    }));
     this.categories = [
       {
         name: desc.trueMarker || '✓',

src/model/BooleansColumn.ts

@@ -6,7 +6,7 @@ import {DEFAULT_CATEGORICAL_COLOR_FUNCTION} from './CategoricalColorMappingFunct
 import ValueColumn, {dataLoaded} from './ValueColumn';
 import Column, {labelChanged, metaDataChanged, dirty, dirtyHeader, dirtyValues, rendererTypeChanged, groupRendererChanged, summaryRendererChanged, visibilityChanged, widthChanged, dirtyCaches} from './Column';
 import {IEventListener} from '../internal';
-import {chooseUIntByDataLength} from './internal';
+import {chooseUIntByDataLength, integrateDefaults} from './internal';
 import {toCategory} from './internalCategorical';
 
 
@@ -26,8 +26,9 @@ export default class BooleansColumn extends ArrayColumn<boolean> implements ISet
   private colorMapping: ICategoricalColorMappingFunction;
 
   constructor(id: string, desc: Readonly<IBooleansColumnDesc>) {
-    super(id, desc);
-    this.setDefaultRenderer('upset');
+    super(id, integrateDefaults(desc, {
+      renderer: 'upset'
+    }));
     this.colorMapping = DEFAULT_CATEGORICAL_COLOR_FUNCTION;
   }
 

src/model/Column.ts

@@ -566,13 +566,6 @@ export default class Column extends AEventDispatcher {
     this.fire([Column.EVENT_RENDERER_TYPE_CHANGED, Column.EVENT_DIRTY_VALUES, Column.EVENT_DIRTY], this.renderer, this.renderer = renderer);
   }
 
-  protected setDefaultRenderer(renderer: string) {
-    if (this.renderer !== this.desc.type || this.desc.renderer) {
-      return;
-    }
-    return this.setRenderer(renderer);
-  }
-
   setGroupRenderer(renderer: string) {
     if (renderer === this.groupRenderer) {
       // nothing changes
@@ -581,13 +574,6 @@ export default class Column extends AEventDispatcher {
     this.fire([Column.EVENT_GROUP_RENDERER_TYPE_CHANGED, Column.EVENT_DIRTY_VALUES, Column.EVENT_DIRTY], this.groupRenderer, this.groupRenderer = renderer);
   }
 
-  protected setDefaultGroupRenderer(renderer: string) {
-    if (this.groupRenderer !== this.desc.type || this.desc.groupRenderer) {
-      return;
-    }
-    return this.setGroupRenderer(renderer);
-  }
-
   setSummaryRenderer(renderer: string) {
     if (renderer === this.summaryRenderer) {
       // nothing changes
@@ -596,20 +582,6 @@ export default class Column extends AEventDispatcher {
     this.fire([Column.EVENT_SUMMARY_RENDERER_TYPE_CHANGED, Column.EVENT_DIRTY_HEADER, Column.EVENT_DIRTY], this.summaryRenderer, this.summaryRenderer = renderer);
   }
 
-  protected setDefaultSummaryRenderer(renderer: string) {
-    if (this.summaryRenderer !== this.desc.type || this.desc.summaryRenderer) {
-      return;
-    }
-    return this.setSummaryRenderer(renderer);
-  }
-
-  protected setDefaultWidth(width: number) {
-    if (this.width !== 100 || this.desc.width) {
-      return;
-    }
-    return this.setWidthImpl(width);
-  }
-
   /**
    * marks the header, values, or both as dirty such that the values are reevaluated
    * @param type specify in more detail what is dirty, by default whole column

src/model/DateColumn.ts

@@ -7,6 +7,7 @@ import {defaultGroup, IDataRow, IGroup, ECompareValueType, IValueColumnDesc, DEF
 import {isMissingValue, isUnknown, missingGroup} from './missing';
 import ValueColumn, {dataLoaded} from './ValueColumn';
 import {noDateFilter, defaultDateGrouper, isDummyDateFilter, isDefaultDateGrouper, restoreDateFilter, isEqualDateFilter, isDateIncluded, toDateGroup, chooseAggregatedDate} from './internalDate';
+import {integrateDefaults} from './internal';
 
 
 export declare type IDateColumnDesc = IValueColumnDesc<Date> & IDateDesc;
@@ -46,12 +47,13 @@ export default class DateColumn extends ValueColumn<Date> implements IDateColumn
   private currentGrouper: IDateGrouper = defaultDateGrouper();
 
   constructor(id: string, desc: Readonly<IDateColumnDesc>) {
-    super(id, desc);
+    super(id, integrateDefaults(desc, {
+      groupRenderer: 'datehistogram',
+      summaryRenderer: 'datehistogram'
+    }));
     const f = timeFormat(desc.dateFormat || DateColumn.DEFAULT_DATE_FORMAT);
     this.format = (v) => (v instanceof Date) ? f(v) : '';
     this.parse = desc.dateParse ? timeParse(desc.dateParse) : timeParse(desc.dateFormat || DateColumn.DEFAULT_DATE_FORMAT);
-    this.setDefaultGroupRenderer('datehistogram');
-    this.setDefaultSummaryRenderer('datehistogram');
   }
 
   getFormatter() {

src/model/DatesColumn.ts

@@ -9,7 +9,7 @@ import {IDataRow, ECompareValueType, ITypeFactory} from './interfaces';
 import {isMissingValue} from './missing';
 import DateColumn from './DateColumn';
 import {noDateFilter, isDummyDateFilter, restoreDateFilter} from './internalDate';
-import {chooseUIntByDataLength} from './internal';
+import {chooseUIntByDataLength, integrateDefaults} from './internal';
 
 export enum EDateSort {
   min = 'min',
@@ -49,14 +49,15 @@ export default class DatesColumn extends ArrayColumn<Date | null> implements IDa
   private currentFilter: IDateFilter = noDateFilter();
 
   constructor(id: string, desc: Readonly<IDatesColumnDesc>) {
-    super(id, desc);
+    super(id, integrateDefaults(desc, {
+      renderer: 'datehistogram',
+      groupRenderer: 'datehistogram',
+      summaryRenderer: 'datehistogram'
+    }));
     const f = timeFormat(desc.dateFormat || DateColumn.DEFAULT_DATE_FORMAT);
     this.format = (v) => (v instanceof Date) ? f(v) : '';
     this.parse = desc.dateParse ? timeParse(desc.dateParse) : timeParse(desc.dateFormat || DateColumn.DEFAULT_DATE_FORMAT);
     this.sort = desc.sort || EDateSort.median;
-    this.setDefaultRenderer('datehistogram');
-    this.setDefaultGroupRenderer('datehistogram');
-    this.setDefaultSummaryRenderer('datehistogram');
   }
 
   getFormatter() {

src/model/DatesMapColumn.ts

@@ -11,6 +11,7 @@ import Column, {widthChanged, labelChanged, metaDataChanged, dirty, dirtyHeader,
 import ValueColumn, {dataLoaded} from './ValueColumn';
 import {IEventListener} from '../internal';
 import {noDateFilter, isDummyDateFilter, restoreDateFilter} from './internalDate';
+import {integrateDefaults} from './internal';
 
 export declare type IDateMapColumnDesc = IDatesDesc & IMapColumnDesc<Date | null>;
 
@@ -41,12 +42,13 @@ export default class DatesMapColumn extends MapColumn<Date | null> implements ID
   private currentFilter: IDateFilter = noDateFilter();
 
   constructor(id: string, desc: Readonly<IDateMapColumnDesc>) {
-    super(id, desc);
+    super(id, integrateDefaults(desc, {
+      renderer: 'default'
+    }));
     const f = timeFormat(desc.dateFormat || DateColumn.DEFAULT_DATE_FORMAT);
     this.format = (v) => (v instanceof Date) ? f(v) : '';
     this.parse = desc.dateParse ? timeParse(desc.dateParse) : timeParse(desc.dateFormat || DateColumn.DEFAULT_DATE_FORMAT);
     this.sort = desc.sort || EDateSort.median;
-    this.setDefaultRenderer('default');
   }
 
   getFormatter() {

src/model/HierarchyColumn.ts

@@ -3,7 +3,7 @@ import CategoricalColumn from './CategoricalColumn';
 import Column, {widthChanged, labelChanged, metaDataChanged, dirty, dirtyHeader, dirtyValues, dirtyCaches, rendererTypeChanged, groupRendererChanged, summaryRendererChanged, visibilityChanged} from './Column';
 import {ICategoricalColumn, ICategory, ICategoricalColorMappingFunction} from './ICategoricalColumn';
 import {IDataRow, IGroup, IValueColumnDesc, DEFAULT_COLOR, ITypeFactory} from './interfaces';
-import {colorPool} from './internal';
+import {colorPool, integrateDefaults} from './internal';
 import {missingGroup} from './missing';
 import ValueColumn, {dataLoaded} from './ValueColumn';
 import {IEventListener} from '../internal';
@@ -70,14 +70,14 @@ export default class HierarchyColumn extends ValueColumn<string> implements ICat
   private colorMapping: ICategoricalColorMappingFunction;
 
   constructor(id: string, desc: Readonly<IHierarchyColumnDesc>) {
-    super(id, desc);
+    super(id, integrateDefaults(desc, {
+      renderer: 'categorical'
+    }));
     this.hierarchySeparator = desc.hierarchySeparator || '.';
     this.hierarchy = this.initHierarchy(desc.hierarchy);
     this.currentNode = this.hierarchy;
     this.currentLeaves = computeLeaves(this.currentNode, this.currentMaxDepth);
     this.updateCaches();
-
-    this.setDefaultRenderer('categorical');
     this.colorMapping = DEFAULT_CATEGORICAL_COLOR_FUNCTION;
   }
 

src/model/ImpositionBoxPlotColumn.ts

@@ -10,6 +10,7 @@ import {ScaleMappingFunction} from './MappingFunction';
 import NumbersColumn from './NumbersColumn';
 import {DEFAULT_COLOR_FUNCTION} from './ColorMappingFunction';
 import {DEFAULT_FORMATTER, noNumberFilter} from './internalNumber';
+import {integrateDefaults} from './internal';
 
 
 /**
@@ -47,11 +48,11 @@ export default class ImpositionBoxPlotColumn extends CompositeColumn implements
   static readonly EVENT_COLOR_MAPPING_CHANGED = NumbersColumn.EVENT_COLOR_MAPPING_CHANGED;
 
   constructor(id: string, desc: Readonly<IColumnDesc>) {
-    super(id, desc);
-
-    this.setDefaultRenderer('boxplot');
-    this.setDefaultGroupRenderer('boxplot');
-    this.setDefaultSummaryRenderer('boxplot');
+    super(id, integrateDefaults(desc, {
+      renderer: 'boxplot',
+      groupRenderer: 'boxplot',
+      summaryRenderer: 'boxplot'
+    }));
   }
 
   get label() {

src/model/ImpositionCompositeColumn.ts

@@ -8,6 +8,7 @@ import NumberColumn from './NumberColumn';
 import {DEFAULT_FORMATTER, noNumberFilter} from './internalNumber';
 import {ScaleMappingFunction} from './MappingFunction';
 import {DEFAULT_COLOR_FUNCTION} from './ColorMappingFunction';
+import {integrateDefaults} from './internal';
 
 
 /**
@@ -43,11 +44,11 @@ export default class ImpositionCompositeColumn extends CompositeColumn implement
   static readonly EVENT_COLOR_MAPPING_CHANGED = NumberColumn.EVENT_COLOR_MAPPING_CHANGED;
 
   constructor(id: string, desc: Readonly<IColumnDesc>) {
-    super(id, desc);
-
-    this.setDefaultRenderer('number');
-    this.setDefaultGroupRenderer('boxplot');
-    this.setDefaultSummaryRenderer('histogram');
+    super(id, integrateDefaults(desc, {
+      renderer: 'number',
+      groupRenderer: 'boxplot',
+      summaryRenderer: 'histogram'
+    }));
   }
 
   get label() {

src/model/ImpositionCompositesColumn.ts

@@ -9,6 +9,7 @@ import {ScaleMappingFunction} from './MappingFunction';
 import NumbersColumn from './NumbersColumn';
 import {DEFAULT_COLOR_FUNCTION} from './ColorMappingFunction';
 import {DEFAULT_FORMATTER, noNumberFilter} from './internalNumber';
+import {integrateDefaults} from './internal';
 
 
 /**
@@ -45,11 +46,11 @@ export default class ImpositionCompositesColumn extends CompositeColumn implemen
   static readonly EVENT_COLOR_MAPPING_CHANGED = NumbersColumn.EVENT_COLOR_MAPPING_CHANGED;
 
   constructor(id: string, desc: Readonly<IColumnDesc>) {
-    super(id, desc);
-
-    this.setDefaultRenderer('numbers');
-    this.setDefaultGroupRenderer('numbers');
-    this.setDefaultSummaryRenderer('histogram');
+    super(id, integrateDefaults(desc, {
+      renderer: 'numbers',
+      groupRenderer: 'numbers',
+      summaryRenderer: 'histogram'
+    }));
   }
 
   get label() {