Taggle Fusion Canvas Texture Renderer

package.json

@@ -86,9 +86,11 @@
   "devDependencies": {
     "@types/d3-array": "^1.2.3",
     "@types/d3-color": "^1.2.1",
+    "@types/d3-drag": "^1.2.1",
     "@types/d3-dispatch": "^1.0.6",
     "@types/d3-scale": "^2.0.2",
     "@types/d3-scale-chromatic": "^1.3.0",
+    "@types/d3-selection": "^1.3.2",
     "@types/d3-time": "^1.0.9",
     "@types/d3-time-format": "^2.1.0",
     "@types/detect-browser": "^2.0.1",
@@ -97,10 +99,12 @@
     "css-loader": "^1.0.0",
     "d3-array": "^1.2.4",
     "d3-color": "^1.2.3",
+    "d3-drag": "^1.2.3",
     "d3-dispatch": "^1.0.5",
     "d3-format": "^1.3.2",
     "d3-scale": "^2.1.2",
     "d3-scale-chromatic": "^1.3.3",
+    "d3-selection": "^1.3.2",
     "d3-time": "^1.0.10",
     "d3-time-format": "^2.1.3",
     "detect-browser": "^3.0.1",

src/model/OverviewDetailColumn.ts

@@ -0,0 +1,99 @@
+import {Category, SupportType, toolbar} from './annotations';
+import {IDataRow, IGroup} from './interfaces';
+import ValueColumn, {IValueColumnDesc} from './ValueColumn';
+
+/**
+ * factory for creating a description creating a rank column
+ * @param label
+ * @returns {{type: string, label: string}}
+ */
+export function createDetailDesc(label: string = 'Detail Checkboxes') {
+  return {type: 'detail', label, fixed: true};
+}
+
+export interface IDetailColumnDesc extends IValueColumnDesc<boolean> {
+  /**
+   * setter for selecting/deselecting the given row
+   */
+  setter(row: IDataRow, value: boolean): void;
+
+  /**
+   * setter for selecting/deselecting the given row
+   */
+  setterAll(rows: IDataRow[], value: boolean): void;
+}
+
+/**
+ * a checkbox column for selections
+ */
+@SupportType()
+@toolbar('sort', 'sortBy', 'group', 'groupBy', 'selectionToOverviewDetail', 'overviewDetailToSelection')
+@Category('support')
+export default class OverviewDetailColumn extends ValueColumn<boolean> {
+  private static DETAILED_GROUP: IGroup = {
+    name: 'Detailed',
+    color: 'blue'
+  };
+  private static NOT_DETAILED_GROUP: IGroup = {
+    name: 'Undetailed',
+    color: 'gray'
+  };
+  static readonly EVENT_DETAIL = 'detail';
+
+  constructor(id: string, desc: Readonly<IDetailColumnDesc>) {
+    super(id, desc);
+    this.setDefaultWidth(20);
+  }
+
+  get frozen() {
+    return this.desc.frozen !== false;
+  }
+
+  protected createEventList() {
+    return super.createEventList().concat([OverviewDetailColumn.EVENT_DETAIL]);
+  }
+
+  setValue(row: IDataRow, value: boolean) {
+    const old = this.getValue(row);
+    if (old === value) {
+      return true;
+    }
+    return this.setImpl(row, value);
+  }
+
+  setValues(rows: IDataRow[], value: boolean) {
+    if (rows.length === 0) {
+      return;
+    }
+    if ((<IDetailColumnDesc>this.desc).setterAll) {
+      (<IDetailColumnDesc>this.desc).setterAll(rows, value);
+    }
+    this.fire(OverviewDetailColumn.EVENT_DETAIL, rows[0], value, rows);
+    return true;
+  }
+
+  private setImpl(row: IDataRow, value: boolean) {
+    if ((<IDetailColumnDesc>this.desc).setter) {
+      (<IDetailColumnDesc>this.desc).setter(row, value);
+    }
+    this.fire(OverviewDetailColumn.EVENT_DETAIL, row, value);
+    return true;
+  }
+
+  toggleValue(row: IDataRow) {
+    const old = this.getValue(row);
+    this.setImpl(row, !old);
+    return !old;
+  }
+
+  compare(a: IDataRow, b: IDataRow) {
+    const va = this.getValue(a) === true;
+    const vb = this.getValue(b) === true;
+    return va === vb ? 0 : (va < vb ? -1 : +1);
+  }
+
+  group(row: IDataRow) {
+    const isSelected = this.getValue(row);
+    return isSelected ? OverviewDetailColumn.DETAILED_GROUP : OverviewDetailColumn.NOT_DETAILED_GROUP;
+  }
+}

src/model/index.ts

@@ -31,6 +31,7 @@ import StringMapColumn from './StringMapColumn';
 import StringsColumn from './StringsColumn';
 import ValueColumn, {IValueColumnDesc} from './ValueColumn';
 import ImpositionBoxPlotColumn from './ImpositionBoxPlotColumn';
+import OverviewDetailColumn from './OverviewDetailColumn';
 import LinkColumn from './LinkColumn';
 import LinkMapColumn from './LinkMapColumn';
 import LinksColumn from './LinksColumn';
@@ -91,6 +92,7 @@ export {default as Ranking, ISortCriteria} from './Ranking';
 export {default as ReduceColumn, createReduceDesc, IReduceDesc, IReduceColumnDesc} from './ReduceColumn';
 export {default as ScriptColumn, createScriptDesc, IScriptDesc, IScriptColumnDesc} from './ScriptColumn';
 export {default as SelectionColumn, createSelectionDesc, ISelectionColumnDesc} from './SelectionColumn';
+export {default as DetailColumn, createDetailDesc, IDetailColumnDesc} from './OverviewDetailColumn';
 export * from './SetColumn';
 export {default as SetColumn} from './SetColumn';
 export {default as StackColumn, createStackDesc} from './StackColumn';
@@ -150,6 +152,7 @@ export function models() {
     date: DateColumn,
     dateMap: DatesMapColumn,
     dates: DatesColumn,
+    detail: OverviewDetailColumn,
     group: GroupColumn,
     hierarchy: HierarchyColumn,
     imposition: ImpositionCompositeColumn,

src/provider/ACommonDataProvider.ts

@@ -2,6 +2,7 @@ import {createAggregateDesc, createRankDesc, createSelectionDesc, IColumnDesc, I
 import {IOrderedGroup} from '../model/Group';
 import Ranking from '../model/Ranking';
 import ADataProvider, {IDataProviderOptions} from './ADataProvider';
+import {createDetailDesc} from '../model/OverviewDetailColumn';
 
 
 function isComplexAccessor(column: any) {
@@ -146,6 +147,7 @@ abstract class ACommonDataProvider extends ADataProvider {
       if (this.multiSelections) {
         r.push(this.create(createSelectionDesc())!);
       }
+      r.push(this.create(createDetailDesc())!);
     }
     this.getColumns().forEach((col) => {
       const c = this.create(col);