more live preview options

src/builder/LineUpBuilder.ts

@@ -22,17 +22,24 @@ export default class LineUpBuilder {
     return this;
   }
 
-  livePreviews({search = false, filter = true, vis = true}) {
-    this.options.livePreviews = [];
-    if (search) {
-      this.options.livePreviews.push('search');
-    }
-    if (filter) {
-      this.options.livePreviews.push('filter');
-    }
-    if (vis) {
-      this.options.livePreviews.push('vis');
-    }
+  livePreviews(obj: {search?: boolean, filter?: boolean, vis?: boolean, sort?: boolean, group?: boolean, groupSort?: boolean, colorMapping?: boolean, dataMapping?: boolean}) {
+    const features: {[key: string]: boolean} = Object.assign({
+      // 'search', 'filter', 'vis', 'sort', 'group', 'sortGroup', 'colorMapping'
+      search: true,
+      filter: true,
+      vis: true,
+      group: true,
+      sort: true,
+      sortGroup: true,
+      colorMapping: true,
+    }, obj);
+    const options: string[] = [];
+    Object.keys(features).forEach((key) => {
+      if (features[key]) {
+        options.push(key);
+      }
+    });
+    this.options.livePreviews = options;
     return this;
   }
 

src/config.ts

@@ -94,7 +94,7 @@ export interface ILineUpOptions {
    * flag whether to shows filter previews as soon as the user changes the filter in the dialog
    * @default ['filter', 'vis']
    */
-  livePreviews: ('search' | 'filter' | 'vis')[];
+  livePreviews: string[];
 
   /**
    * option to specify the default slope graph mode
@@ -209,7 +209,7 @@ export function defaultOptions(): ITaggleOptions {
     defaultSlopeGraphMode: 'item',
     overviewMode: false,
 
-    livePreviews: ['filter', 'vis'],
+    livePreviews: ['search', 'filter', 'vis', 'sort', 'group', 'sortGroup', 'colorMapping'],
     onDialogBackgroundClick: 'cancel',
 
     rowHeight: 18,

src/ui/dialogs/ADialog.ts

@@ -6,7 +6,7 @@ import {IRankingHeaderContext} from '../interfaces';
 
 export interface IDialogOptions {
   title: string;
-  livePreview: boolean;
+  livePreview: boolean | string;
   popup: boolean;
   // popper options
   placement?: Popper.Placement;
@@ -33,7 +33,7 @@ export function dialogContext(ctx: IRankingHeaderContext, level: number, attachm
 
 abstract class ADialog {
 
-  protected readonly options: Readonly<IDialogOptions> = {
+  private readonly options: Readonly<IDialogOptions> = {
     title: '',
     livePreview: false,
     popup: false,
@@ -62,8 +62,12 @@ abstract class ADialog {
 
   protected abstract build(node: HTMLElement): boolean | void;
 
+  protected showLivePreviews() {
+    return this.options.livePreview === true || (typeof this.options.livePreview === 'string' && this.dialog.manager.livePreviews.includes(this.options.livePreview));
+  }
+
   protected enableLivePreviews(selector: string | (HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement)[]) {
-    if (!this.options.livePreview) {
+    if (!this.showLivePreviews()) {
       return;
     }
     const submitter = () => {

src/ui/dialogs/BooleanFilterDialog.ts

@@ -10,7 +10,7 @@ export default class BooleanFilterDialog extends ADialog {
 
   constructor(private readonly column: BooleanColumn, dialog: IDialogContext) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('filter')
+      livePreview: 'filter'
     });
     this.before = this.column.getFilter();
   }

src/ui/dialogs/CategoricalColorMappingDialog.ts

@@ -14,7 +14,9 @@ export default class CategoricalColorMappingDialog extends ADialog {
   private readonly before: ICategoricalColorMappingFunction;
 
   constructor(private readonly column: ICategoricalColumn | CategoricalsColumn | CategoricalMapColumn, dialog: IDialogContext) {
-    super(dialog);
+    super(dialog, {
+      livePreview: 'colorMapping'
+    });
 
     this.before = column.getColorMapping().clone();
   }

src/ui/dialogs/CategoricalFilterDialog.ts

@@ -12,7 +12,7 @@ export default class CategoricalFilterDialog extends ADialog {
 
   constructor(private readonly column: CategoricalColumn | SetColumn, dialog: IDialogContext) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('filter')
+      livePreview: 'filter'
     });
     this.before = this.column.getFilter() || {filter: this.column.categories.map((d) => d.name), filterMissing: false};
   }

src/ui/dialogs/CategoricalMappingFilterDialog.ts

@@ -13,7 +13,7 @@ export default class CategoricalMappingFilterDialog extends ADialog {
 
   constructor(private readonly column: OrdinalColumn, dialog: IDialogContext) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('filter')
+      livePreview: 'filter'
     });
     this.before = this.column.getFilter() || {filter: this.column.categories.map((d) => d.name), filterMissing: false};
   }

src/ui/dialogs/ChangeRendererDialog.ts

@@ -9,7 +9,7 @@ export default class ChangeRendererDialog extends ADialog {
 
   constructor(private readonly column: Column, dialog: IDialogContext, private readonly ctx: IRankingHeaderContext) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('vis')
+      livePreview: 'vis'
     });
 
     this.before = {

src/ui/dialogs/ColorMappingDialog.ts

@@ -11,7 +11,9 @@ export default class ColorMappingDialog extends ADialog {
   private readonly id = uniqueId('col');
 
   constructor(private readonly column: IMapAbleColumn, dialog: IDialogContext) {
-    super(dialog);
+    super(dialog, {
+      livePreview: 'colorMapping'
+    });
 
     this.before = this.column.getColorMapping();
   }
@@ -143,7 +145,7 @@ export default class ColorMappingDialog extends ADialog {
       for (const custom of customs) {
         Array.from(custom.nextElementSibling!.getElementsByTagName('input')).forEach((s) => s.disabled = custom !== d);
       }
-      if (this.options.livePreview) {
+      if (this.showLivePreviews()) {
         this.applyColor();
       }
     };

src/ui/dialogs/CutOffHierarchyDialog.ts

@@ -11,7 +11,9 @@ export default class CutOffHierarchyDialog extends ADialog {
 
 
   constructor(private readonly column: HierarchyColumn, dialog: IDialogContext, private readonly idPrefix: string) {
-    super(dialog);
+    super(dialog, {
+      livePreview: 'cutOff'
+    });
 
     this.innerNodes = resolveInnerNodes(this.column.hierarchy);
     this.innerNodePaths = this.innerNodes.map((n) => n.path);

src/ui/dialogs/DateFilterDialog.ts

@@ -12,7 +12,7 @@ export default class DateFilterDialog extends ADialog {
 
   constructor(private readonly column: DateColumn, dialog: IDialogContext) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('filter')
+      livePreview: 'filter'
     });
     this.before = this.column.getFilter() || noDateFilter();
   }

src/ui/dialogs/GroupDialog.ts

@@ -10,7 +10,9 @@ export default class GroupDialog extends ADialog {
   private readonly handlers: IToolbarDialogAddonHandler[] = [];
 
   constructor(private readonly column: Column, dialog: IDialogContext, private readonly ctx: IRankingHeaderContext) {
-    super(dialog);
+    super(dialog, {
+      livePreview: 'group'
+    });
   }
 
   protected build(node: HTMLElement) {

src/ui/dialogs/MappingDialog.ts

@@ -31,7 +31,9 @@ export default class MappingDialog extends ADialog {
   };
 
   constructor(private readonly column: IMapAbleColumn, dialog: IDialogContext, ctx: IRankingHeaderContext) {
-    super(dialog);
+    super(dialog, {
+      livePreview: 'dataMapping'
+    });
 
     this.idPrefix = `me${ctx.idPrefix}`;
     this.before = this.column.getMapping().clone();
@@ -171,7 +173,7 @@ export default class MappingDialog extends ADialog {
         this.rawDomain[i] = v;
         this.scale.domain = this.rawDomain.slice();
         this.updateLines();
-        if (this.options.livePreview) {
+        if (this.showLivePreviews()) {
           this.column.setMapping(this.scale);
         }
       });

src/ui/dialogs/NumberFilterDialog.ts

@@ -11,7 +11,7 @@ export default class NumberFilterDialog extends ADialog {
 
   constructor(private readonly column: IMapAbleColumn, dialog: IDialogContext, private readonly ctx: IRankingHeaderContext) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('filter')
+      livePreview: 'filter'
     });
 
     this.before = column.getFilter();
@@ -24,7 +24,7 @@ export default class NumberFilterDialog extends ADialog {
       dialogManager: this.ctx.dialogManager,
       idPrefix: this.ctx.idPrefix,
       tasks: this.ctx.provider.getTaskExecutor()
-    }, this.options.livePreview);
+    }, this.showLivePreviews());
   }
 
   protected reset() {

src/ui/dialogs/ReduceDialog.ts

@@ -8,7 +8,9 @@ export default class ReduceDialog extends ADialog {
   private handler: IToolbarDialogAddonHandler | null = null;
 
   constructor(private readonly column: ReduceColumn, dialog: IDialogContext) {
-    super(dialog);
+    super(dialog, {
+      livePreview: 'reduce'
+    })
   }
 
   protected build(node: HTMLElement) {

src/ui/dialogs/RenameRankingDialog.ts

@@ -8,7 +8,9 @@ export default class RenameRankingDialog extends ADialog {
   private readonly before: string;
 
   constructor(private readonly ranking: Ranking, dialog: IDialogContext) {
-    super(dialog);
+    super(dialog, {
+      livePreview: 'rename'
+    });
     this.before = ranking.getLabel();
   }
 

src/ui/dialogs/SearchDialog.ts

@@ -8,7 +8,7 @@ export default class SearchDialog extends ADialog {
 
   constructor(private readonly column: Column, dialog: IDialogContext, private readonly provider: IDataProvider) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('search')
+      livePreview: 'search'
     });
   }
 

src/ui/dialogs/SortDialog.ts

@@ -10,7 +10,9 @@ export default class SortDialog extends ADialog {
   private readonly handlers: IToolbarDialogAddonHandler[] = [];
 
   constructor(private readonly column: Column, private readonly groupSortBy: boolean, dialog: IDialogContext, private readonly ctx: IRankingHeaderContext) {
-    super(dialog);
+    super(dialog, {
+      livePreview: groupSortBy ? 'groupSort' : 'sort'
+    });
   }
 
   protected build(node: HTMLElement) {

src/ui/dialogs/StringFilterDialog.ts

@@ -12,7 +12,7 @@ export default class StringFilterDialog extends ADialog {
 
   constructor(private readonly column: StringColumn, dialog: IDialogContext) {
     super(dialog, {
-      livePreview: dialog.manager.livePreviews.includes('filter')
+      livePreview: 'filter'
     });
 
     this.before = this.column.getFilter();