Merge pull request #377 from datavisyn/lineupjs4

package.json

@@ -87,7 +87,8 @@
     "lineupjs": "github:lineupjs/lineupjs#develop",
     "phovea_clue": "github:phovea/phovea_clue#develop",
     "select2": "~4.0.13",
-    "select2-bootstrap-theme": "0.1.0-beta.9"
+    "select2-bootstrap-theme": "0.1.0-beta.9",
+    "lodash": "~4.17.15"
   },
   "main": "build/tdp_core.js",
   "devDependencies": {

src/lineup/ARankingView.ts

@@ -1,4 +1,4 @@
-import {EngineRenderer, defaultOptions, IRule, IGroupData, IGroupItem, isGroup, Column, IColumnDesc, LocalDataProvider, deriveColors, TaggleRenderer, ITaggleOptions, ILocalDataProviderOptions, IDataProviderOptions} from 'lineupjs';
+import {EngineRenderer, defaultOptions, updateLodRules, IRule, IGroupData, IGroupItem, isGroup, Column, IColumnDesc, LocalDataProvider, deriveColors, TaggleRenderer, ITaggleOptions, ILocalDataProviderOptions, IDataProviderOptions, IDataRow, spaceFillingRule} from 'lineupjs';
 import {AView} from '../views/AView';
 import {EViewMode, IViewContext, ISelection} from '../views';
 
@@ -8,14 +8,14 @@ import {saveNamedSet} from '../storage';
 import {showErrorModalDialog} from '../dialogs';
 import LineUpSelectionHelper from './internal/LineUpSelectionHelper';
 import {IScore, IScoreRow} from '../extensions';
-import {createInitialRanking, IAdditionalColumnDesc, deriveColumns, IInitialRankingOptions} from './desc';
+import {createInitialRanking, IAdditionalColumnDesc, deriveColumns, IInitialRankingOptions, IColumnOptions} from './desc';
 import {IRankingWrapper, wrapRanking} from './internal/ranking';
 import {pushScoreAsync} from './internal/scorecmds';
 import {debounce, mixin, resolveImmediately} from 'phovea_core/src';
 import LineUpColors from './internal/LineUpColors';
 import {IRow, IServerColumn, IServerColumnDesc} from '../rest';
 import {IContext, ISelectionAdapter, ISelectionColumn} from './selection';
-import LineUpPanelActions, {rule} from './internal/LineUpPanelActions';
+import LineUpPanelActions from './internal/LineUpPanelActions';
 import {addLazyColumn, ILazyLoadedColumn} from './internal/column';
 import {successfullySaved} from '../notifications';
 import {ISecureItem} from 'phovea_core/src/security';
@@ -147,10 +147,10 @@ export interface IARankingViewOptions {
    */
   enableStripedBackground: boolean;
 
-  itemRowHeight: number | ((row: any, index: number) => number) | null;
+  itemRowHeight: number | ((item: IGroupItem | IGroupData) => number) | null;
 
   customOptions: Partial<ITaggleOptions>;
-  customProviderOptions: Partial<ILocalDataProviderOptions & IDataProviderOptions>;
+  customProviderOptions: Partial<ILocalDataProviderOptions & IDataProviderOptions  & { maxNestedSortingCriteria: number; maxGroupColumns: number; filterGlobally: true; }>;
 }
 
 /**
@@ -273,31 +273,36 @@ export abstract class ARankingView extends AView {
 
     this.provider.on(LocalDataProvider.EVENT_ORDER_CHANGED, () => this.updateLineUpStats());
 
-    const config: ITaggleOptions = mixin(defaultOptions(), <Partial<ITaggleOptions>>{
+    const taggleOptions: ITaggleOptions = mixin(defaultOptions(), this.options.customOptions, <Partial<ITaggleOptions>>{
       summaryHeader: this.options.enableHeaderSummary,
       labelRotation: this.options.enableHeaderRotation ? 45 : 0
     }, options.customOptions);
 
     if (typeof this.options.itemRowHeight === 'number' && this.options.itemRowHeight > 0) {
-      config.rowHeight = this.options.itemRowHeight;
+      taggleOptions.rowHeight = this.options.itemRowHeight;
     } else if (typeof this.options.itemRowHeight === 'function') {
       const f = this.options.itemRowHeight;
-      config.dynamicHeight = () => ({
-        defaultHeight: 18,
+      taggleOptions.dynamicHeight = () => ({
+        defaultHeight: taggleOptions.rowHeight,
         padding: () => 0,
         height: (item: IGroupItem | IGroupData) => {
-          return isGroup(item) ? 70 : f(item.v, item.i);
+          return f(item) ?? (isGroup(item) ? taggleOptions.groupHeight : taggleOptions.rowHeight);
         }
       });
     }
 
 
 
     const lineupParent = <HTMLElement>this.node.firstElementChild!;
-    this.taggle = !this.options.enableOverviewMode ? new EngineRenderer(this.provider, lineupParent, config) : new TaggleRenderer(this.provider, lineupParent, Object.assign(config, {
+    this.taggle = !this.options.enableOverviewMode ? new EngineRenderer(this.provider, lineupParent, taggleOptions) : new TaggleRenderer(this.provider, lineupParent, Object.assign(taggleOptions, {
       violationChanged: (_: IRule, violation: string) => this.panel.setViolation(violation)
     }));
 
+    // LineUp creates an element with class `lu-backdrop` that fades out all content when a dialog is opened.
+    // Append `lu-backdrop` one level higher so fading effect can be applied also to the sidePanel when a dialog is opened.
+    const luBackdrop = this.node.querySelector('.lu-backdrop');
+    this.node.appendChild(luBackdrop);
+
     this.panel = new LineUpPanelActions(this.provider, this.taggle.ctx, this.options, this.node.ownerDocument);
     // When a new column desc is added to the provider, update the panel chooser
     this.provider.on(LocalDataProvider.EVENT_ADD_DESC, () => this.updatePanelChooser());
@@ -319,11 +324,15 @@ export abstract class ARankingView extends AView {
       this.taggle.zoomIn();
     });
     if (this.options.enableOverviewMode) {
-      this.panel.on(LineUpPanelActions.EVENT_RULE_CHANGED, (_event: any, rule: IRule) => {
-        (<TaggleRenderer>this.taggle).switchRule(rule);
+      const rule = spaceFillingRule(taggleOptions);
+
+      this.panel.on(LineUpPanelActions.EVENT_TOGGLE_OVERVIEW, (_event: any, isOverviewActive: boolean) => {
+        updateLodRules(this.taggle.style, isOverviewActive, taggleOptions);
+        (<TaggleRenderer>this.taggle).switchRule(isOverviewActive ? rule : null);
       });
+
       if (this.options.enableOverviewMode === 'active') {
-        (<TaggleRenderer>this.taggle).switchRule(rule);
+        this.panel.fire(LineUpPanelActions.EVENT_TOGGLE_OVERVIEW, true);
       }
     }
 
@@ -500,14 +509,14 @@ export abstract class ARankingView extends AView {
     // flag that it is a score but it also a reload function
     colDesc._score = true;
 
-    const ids = this.selectionHelper.rowIdsAsSet(this.provider.getRankings()[0].getOrder());
+    const ids = this.selectionHelper.rowIdsAsSet(<number[]>this.provider.getRankings()[0].getOrder());
     const data = score.compute(ids, this.itemIDType, args);
 
     const r = this.addColumn(colDesc, data, -1, position);
 
     // use _score function to reload the score
     colDesc._score = () => {
-      const ids = this.selectionHelper.rowIdsAsSet(this.provider.getRankings()[0].getOrder());
+      const ids = this.selectionHelper.rowIdsAsSet(<number[]>this.provider.getRankings()[0].getOrder());
       const data = score.compute(ids, this.itemIDType, args);
       return r.reload(data);
     };
@@ -581,9 +590,9 @@ export abstract class ARankingView extends AView {
       const cols = this.getColumnDescs(columns);
       // compatibility since visible is now a supported feature, so rename ones
       for (const col of cols) {
-        if (col.visible != null) {
-          (<any>col).initialColumn = col.visible;
-          delete col.visible;
+        if ((<IColumnOptions>col).visible != null) {
+          (<any>col).initialColumn = (<IColumnOptions>col).visible;
+          delete (<IColumnOptions>col).visible;
         }
       }
       deriveColors(cols);
@@ -612,7 +621,7 @@ export abstract class ARankingView extends AView {
       this.builtLineUp(this.provider);
 
       //record after the initial one
-      clueify(this.context.ref, this.context.graph);
+      clueify(this.taggle, this.context.ref, this.context.graph);
       this.setBusy(false);
     }).catch(showErrorModalDialog)
       .catch((error) => {

src/lineup/desc.ts

@@ -2,7 +2,7 @@
  * Created by sam on 13.02.2017.
  */
 
-import {LocalDataProvider, createSelectionDesc, createAggregateDesc, IColumnDesc, ICategory, ICategoryNode, Column, createRankDesc} from 'lineupjs';
+import {LocalDataProvider, createSelectionDesc, createAggregateDesc, DEFAULT_COLOR, IColumnDesc, ICategory, ICategoryNode, Column, createRankDesc} from 'lineupjs';
 import {extent} from 'd3';
 import {IAnyVector} from 'phovea_core/src/vector';
 import {VALUE_TYPE_CATEGORICAL, VALUE_TYPE_INT, VALUE_TYPE_REAL, VALUE_TYPE_STRING} from 'phovea_core/src/datatype';
@@ -266,14 +266,14 @@ function deriveHierarchy(categories: (Partial<ICategory> & { parent: string | nu
       children: [],
       label: c.name!,
       name: c.name!,
-      color: Column.DEFAULT_COLOR,
+      color: DEFAULT_COLOR,
       value: 0
     }, lookup.get(c.name!) || {}, c);
     lookup.set(c.name!, item);
 
     if (!lookup.has(p)) {
       // create proxy
-      lookup.set(p, {name: p, children: [], label: p, value: 0, color: Column.DEFAULT_COLOR});
+      lookup.set(p, {name: p, children: [], label: p, value: 0, color: DEFAULT_COLOR});
     }
     lookup.get(p)!.children.push(item);
   });

src/lineup/internal/LineUpPanelActions.ts

@@ -1,5 +1,5 @@
 
-import {SidePanel, spaceFillingRule, IGroupSearchItem, LocalDataProvider, createStackDesc, IColumnDesc, createScriptDesc, createSelectionDesc, createAggregateDesc, createGroupDesc, Ranking, createImpositionDesc, createNestedDesc, createReduceDesc, IEngineRankingContext, IRenderContext, IRankingHeaderContextContainer} from 'lineupjs';
+import {SidePanel, IGroupSearchItem, LocalDataProvider, createStackDesc, IColumnDesc, createScriptDesc, createSelectionDesc, createAggregateDesc, createGroupDesc, Ranking, createImpositionDesc, createNestedDesc, createReduceDesc, IEngineRankingContext, IRenderContext, IRankingHeaderContextContainer} from 'lineupjs';
 import {IDType, resolve} from 'phovea_core/src/idtype';
 import {IPlugin, IPluginDesc, list as listPlugins} from 'phovea_core/src/plugin';
 import {editDialog} from '../../storage';
@@ -27,13 +27,6 @@ export interface ISearchOption {
   action(): void;
 }
 
-export const rule = spaceFillingRule({
-  groupHeight: 70,
-  rowHeight: 18,
-  groupPadding: 5
-});
-
-
 /**
  * Wraps the score such that the plugin is loaded and the score modal opened, when the factory function is called
  * @param score
@@ -53,7 +46,7 @@ export function wrap(score: IPluginDesc): IScoreLoader {
 export default class LineUpPanelActions extends EventHandler {
   static readonly EVENT_ZOOM_OUT = 'zoomOut';
   static readonly EVENT_ZOOM_IN = 'zoomIn';
-  static readonly EVENT_RULE_CHANGED = 'ruleChanged';
+  static readonly EVENT_TOGGLE_OVERVIEW = 'toggleOverview';
   static readonly EVENT_SAVE_NAMED_SET = 'saveNamedSet';
   /**
    * @deprecated
@@ -80,6 +73,7 @@ export default class LineUpPanelActions extends EventHandler {
 
   constructor(protected readonly provider: LocalDataProvider, ctx: IRankingHeaderContextContainer & IRenderContext & IEngineRankingContext, private readonly options: Readonly<IARankingViewOptions>, doc = document) {
     super();
+
     this.node = doc.createElement('aside');
     this.node.classList.add('lu-side-panel-wrapper');
 
@@ -201,7 +195,7 @@ export default class LineUpPanelActions extends EventHandler {
       const listener = () => {
         const selected = this.overview.classList.toggle('fa-th-list');
         this.overview.classList.toggle('fa-list');
-        this.fire(LineUpPanelActions.EVENT_RULE_CHANGED, selected ? rule : null);
+        this.fire(LineUpPanelActions.EVENT_TOGGLE_OVERVIEW, selected);
       };
       const overviewButton = new PanelButton(buttons, i18n.t('tdp:core.lineup.LineupPanelActions.toggleOverview'), this.options.enableOverviewMode === 'active' ? 'fa fa-th-list' : 'fa fa-list', listener);
       this.overview = overviewButton.node; // TODO might be removed

src/lineup/internal/OverviewColumn.ts

@@ -16,10 +16,11 @@ export default class OverviewColumn extends BooleanColumn {
 
   constructor(id: string, desc: IBooleanColumnDesc) {
     super(id, Object.assign(desc, {
-      label: i18n.t('tdp:core.lineup.OverviewColumn.overviewSelection')
+      label: i18n.t('tdp:core.lineup.OverviewColumn.overviewSelection'),
+      renderer: 'boolean',
+      groupRenderer: 'boolean',
+      summaryRenderer: 'categorical'
     }));
-    this.setDefaultRenderer('boolean');
-    this.setDefaultGroupRenderer('boolean');
     this.setWidthImpl(0); // hide
   }
 
@@ -29,7 +30,7 @@ export default class OverviewColumn extends BooleanColumn {
 
   setOverview(rows?: any[], name = i18n.t('tdp:core.lineup.OverviewColumn.focus')) {
     this.currentOverview = {name, rows};
-    this.fire([Column.EVENT_DIRTY_VALUES, Column.EVENT_DIRTY], this.overviewSelection, this.overviewSelection = new Set<any>(rows || []));
+    (<OverviewColumn>this).fire([Column.EVENT_DIRTY_VALUES, Column.EVENT_DIRTY], this.overviewSelection, this.overviewSelection = new Set<any>(rows || []));
   }
 
   getOverview() {