change checkbox structure

lineupjs · Dec 23, 2018 · 7a8de4d · 7a8de4d
1 parent 65c1ffe
commit 7a8de4d
Show file tree

Hide file tree

Showing 22 changed files with 122 additions and 147 deletions.
diff --git a/src/provider/tasks.ts b/src/provider/tasks.ts
@@ -1,4 +1,4 @@
-import {abortAble, abortAbleAll, IAbortAblePromise} from 'lineupengine';
+import {abortAbleAll, IAbortAblePromise} from 'lineupengine';
 import {IForEachAble, lazySeq} from '../internal/interable';
 import {boxplotBuilder, categoricalStatsBuilder, categoricalValueCacheBuilder, dateStatsBuilder, dateValueCacheBuilder, IAdvancedBoxPlotData, ICategoricalStatistics, IDateStatistics, IStatistics, normalizedStatsBuilder, dateValueCache2Value, categoricalValueCache2Value, joinIndexArrays, IBuilder} from '../internal/math';
 import {ANOTHER_ROUND} from '../internal/scheduler';

diff --git a/src/renderer/CategoricalCellRenderer.ts b/src/renderer/CategoricalCellRenderer.ts
@@ -92,7 +92,7 @@ function interactiveSummary(col: HasCategoricalFilter, context: IRenderContext,
   const {template, update} = hist(col, interactive || wideEnough(col));
   let filterUpdate: (missing: number, col: HasCategoricalFilter) => void;
   return {
-    template: `${template}${interactive ? filterMissingNumberMarkup(false, 0, context.idPrefix) : ''}</div>`,
+    template: `${template}${interactive ? filterMissingNumberMarkup(false, 0) : ''}</div>`,
     update: (n: HTMLElement) => {
       if (!filterUpdate) {
         filterUpdate = interactiveHist(col, n);

diff --git a/src/renderer/CategoricalStackedDistributionlCellRenderer.ts b/src/renderer/CategoricalStackedDistributionlCellRenderer.ts
@@ -69,7 +69,7 @@ function interactiveSummary(col: HasCategoricalFilter, context: IRenderContext,
   const {template, update} = stackedBar(col);
   let filterUpdate: (missing: number, col: HasCategoricalFilter) => void;
   return {
-    template: `${template}${interactive ? filterMissingNumberMarkup(false, 0, context.idPrefix) : ''}</div>`,
+    template: `${template}${interactive ? filterMissingNumberMarkup(false, 0) : ''}</div>`,
     update: (n: HTMLElement) => {
       if (!filterUpdate) {
         filterUpdate = interactiveHist(col, n);

diff --git a/src/renderer/HistogramCellRenderer.ts b/src/renderer/HistogramCellRenderer.ts
@@ -18,7 +18,7 @@ import {color} from 'd3-color';
 
 interface IHistData {
   maxBin: number;
-  hist: INumberBin[];
+  hist: ReadonlyArray<INumberBin>;
   global?: IStatistics | null;
 }
 
@@ -110,7 +110,7 @@ function interactiveSummary(col: IMapAbleColumn, context: IRenderContext, templa
       <div class="${cssClass('histogram-max-hint')}" style="width: ${100 - f.percent(f.filterMax)}%"></div>
       <div class="${cssClass('histogram-min')}" data-value="${round(f.filterMin, 2)}" style="left: ${f.percent(f.filterMin)}%" title="min filter, drag or shift click to change"></div>
       <div class="${cssClass('histogram-max')}" data-value="${round(f.filterMax, 2)}" style="right: ${100 - f.percent(f.filterMax)}%" title="max filter, drag or shift click to change"></div>
-      ${filterMissingNumberMarkup(f.filterMissing, 0, context.idPrefix)}
+      ${filterMissingNumberMarkup(f.filterMissing, 0)}
     `;
 
   let updateFilter: (missing: number, col: IMapAbleColumn) => void;

diff --git a/src/renderer/StringCellRenderer.ts b/src/renderer/StringCellRenderer.ts
@@ -4,7 +4,7 @@ import StringColumn from '../model/StringColumn';
 import {filterMissingMarkup, findFilterMissing} from '../ui/missing';
 import {default as IRenderContext, ICellRendererFactory} from './interfaces';
 import {renderMissingDOM} from './missing';
-import {setText, uniqueId, exampleText} from './utils';
+import {setText, exampleText} from './utils';
 import {cssClass} from '../styles';
 
 
@@ -103,7 +103,7 @@ export default class StringCellRenderer implements ICellRendererFactory {
     };
   }
 
-  createSummary(col: StringColumn, context: IRenderContext, interactive: boolean) {
+  createSummary(col: StringColumn, _context: IRenderContext, interactive: boolean) {
     if (!interactive) {
       return {
         template: `<div></div>`,
@@ -119,11 +119,10 @@ export default class StringCellRenderer implements ICellRendererFactory {
       bak = '';
     }
     let update: (col: StringColumn) => void;
-    const id = uniqueId(context.idPrefix);
     return {
       template: `<form><input type="text" placeholder="Filter ${col.desc.label}..." autofocus value="${(bak instanceof RegExp) ? bak.source : bak}">
-          <div class="${cssClass('checkbox')}"><input id="${id}" type="checkbox" ${(bak instanceof RegExp) ? 'checked="checked"' : ''}><label for="${id}">RegExp</label></div>
-          ${filterMissingMarkup(bakMissing, context.idPrefix)}</form>`,
+          <label><input type="checkbox" ${(bak instanceof RegExp) ? 'checked="checked"' : ''}><span>RegExp</span></label>
+          ${filterMissingMarkup(bakMissing)}</form>`,
       update: (node: HTMLElement) => {
         if (!update) {
           update = StringCellRenderer.interactiveSummary(col, node);

diff --git a/src/ui/dialogs/BooleanFilterDialog.ts b/src/ui/dialogs/BooleanFilterDialog.ts
@@ -1,7 +1,6 @@
 import BooleanColumn from '../../model/BooleanColumn';
 import ADialog, {IDialogContext} from './ADialog';
-import {updateFilterState, uniqueId} from './utils';
-import {cssClass} from '../../styles';
+import {updateFilterState} from './utils';
 
 /** @internal */
 export default class BooleanFilterDialog extends ADialog {
@@ -16,11 +15,10 @@ export default class BooleanFilterDialog extends ADialog {
   }
 
   protected build(node: HTMLElement) {
-    const id = uniqueId(this.dialog.idPrefix);
     node.insertAdjacentHTML('beforeend', `
-     <div class="${cssClass('checkbox')}"><input id="${id}0" type="radio" name="boolean_check" value="null" ${this.before == null ? 'checked="checked"' : ''}><label id="${id}0">No Filter</label></div>
-     <div class="${cssClass('checkbox')}"><input id="${id}1" type="radio" name="boolean_check" value="true" ${this.before === true ? 'checked="checked"' : ''}><label id="${id}1">True</label></div>
-     <div class="${cssClass('checkbox')}"><input id="${id}2" type="radio" name="boolean_check" value="false" ${this.before === false ? 'checked="checked"' : ''}><label id="${id}2">False</label></div>
+     <label><input type="radio" name="boolean_check" value="null" ${this.before == null ? 'checked="checked"' : ''}><span>No Filter</span></label>
+     <label><input type="radio" name="boolean_check" value="true" ${this.before === true ? 'checked="checked"' : ''}><span>True</span></label>
+     <label><input type="radio" name="boolean_check" value="false" ${this.before === false ? 'checked="checked"' : ''}><span>False</span></label>
     `);
   }
 

diff --git a/src/ui/dialogs/CategoricalFilterDialog.ts b/src/ui/dialogs/CategoricalFilterDialog.ts
@@ -3,7 +3,7 @@ import {ICategoricalFilter, isCategoryIncluded} from '../../model/ICategoricalCo
 import SetColumn from '../../model/SetColumn';
 import {filterMissingMarkup, findFilterMissing} from '../missing';
 import ADialog, {IDialogContext} from './ADialog';
-import {updateFilterState, uniqueId, forEach} from './utils';
+import {updateFilterState, forEach} from './utils';
 import {cssClass} from '../../styles';
 
 /** @internal */
@@ -19,31 +19,28 @@ export default class CategoricalFilterDialog extends ADialog {
   }
 
   protected build(node: HTMLElement) {
-
-    const id = uniqueId(this.dialog.idPrefix);
-
     node.insertAdjacentHTML('beforeend', `<div class="${cssClass('dialog-table')}">
-        <div class="${cssClass('checkbox')} ${cssClass('dialog-filter-table-entry')}">
-          <input id="${id}" type="checkbox" checked>
-          <label for="${id}">
+        <label class="${cssClass('dialog-filter-table-entry')}">
+          <input type="checkbox" checked>
+          <span>
             <span class="${cssClass('dialog-filter-table-color')}"></span>
             <div>Un/Select All</div>
-          </label>
-        </div>
-        ${this.column.categories.map((c) => `<div class="${cssClass('checkbox')} ${cssClass('dialog-filter-table-entry')}">
-          <input id="${id}${c.name}" data-cat="${c.name}" type="checkbox"${isCategoryIncluded(this.before, c) ? 'checked' : ''}>
-          <label for="${id}${c.name}">
+          </span>
+        </label>
+        ${this.column.categories.map((c) => `<label class="${cssClass('dialog-filter-table-entry')}">
+          <input data-cat="${c.name}" type="checkbox"${isCategoryIncluded(this.before, c) ? 'checked' : ''}>
+          <span>
             <span class="${cssClass('dialog-filter-table-color')}" style="background-color: ${c.color}"></span>
             <div>${c.label}</div>
-          </label>
-        </div>`).join('')}
+          </span>
+        </label>`).join('')}
     </div>`);
     // selectAll
     const selectAll = this.findInput('input:not([data-cat])');
     selectAll.onchange =  () => {
       forEach(node, 'input[data-cat]', (n: HTMLInputElement) => n.checked = selectAll.checked);
     };
-    node.insertAdjacentHTML('beforeend', filterMissingMarkup(this.before.filterMissing, this.dialog.idPrefix));
+    node.insertAdjacentHTML('beforeend', filterMissingMarkup(this.before.filterMissing));
   }
 
   private updateFilter(filter: string[] | null, filterMissing: boolean) {

diff --git a/src/ui/dialogs/CategoricalMappingFilterDialog.ts b/src/ui/dialogs/CategoricalMappingFilterDialog.ts
@@ -3,7 +3,7 @@ import OrdinalColumn from '../../model/OrdinalColumn';
 import {ICategoricalFilter, isCategoryIncluded} from '../../model/ICategoricalColumn';
 import {filterMissingMarkup, findFilterMissing} from '../missing';
 import ADialog, {IDialogContext} from './ADialog';
-import {updateFilterState, uniqueId, forEach} from './utils';
+import {updateFilterState, forEach} from './utils';
 import {cssClass} from '../../styles';
 
 /** @internal */
@@ -24,25 +24,24 @@ export default class CategoricalMappingFilterDialog extends ADialog {
     }));
     joint.sort((a, b) => a.label.localeCompare(b.label));
 
-    const id = uniqueId(this.dialog.idPrefix);
     node.insertAdjacentHTML('beforeend', `<div class="${cssClass('dialog-table')}">
-        <div class="${cssClass('checkbox')} ${cssClass('dialog-filter-table-entry')}">
-          <input id="${id}" type="checkbox" checked>
-          <label for="${id}">
+        <label class="${cssClass('dialog-filter-table-entry')}">
+          <input type="checkbox" checked>
+          <span>
             <div>Un/Select All</div>
-          </label>
-        </div>
+          </span>
+        </label>
         ${joint.map(({name, color, label, range}) => `
-          <div class="${cssClass('checkbox')} ${cssClass('dialog-filter-table-entry')}">
-            <input id="${id}${name}" data-cat="${name}" type="checkbox"${isCategoryIncluded(this.before, name) ? 'checked' : ''}>
-            <label for="${id}${name}">
+          <label class="${cssClass('dialog-filter-table-entry')}">
+            <input data-cat="${name}" type="checkbox"${isCategoryIncluded(this.before, name) ? 'checked' : ''}>
+            <span>
               <input type="number" value="${range}" min="0" max="100" size="5">
               <div class="${cssClass('dialog-filter-color-bar')}">
                 <span style="background-color: ${color}; width: ${range}%"></span>
               </div>
               <div>${label}</div>
-            </label>
-          </div>`).join('')}
+            </span>
+          </label>`).join('')}
     </div>`);
     // selectAll
     const selectAll = this.findInput('input[type=checkbox]:not([data-cat])');
@@ -54,7 +53,7 @@ export default class CategoricalMappingFilterDialog extends ADialog {
         (<HTMLElement>d.nextElementSibling!.firstElementChild).style.width = `${d.value}%`;
       };
     });
-    node.insertAdjacentHTML('beforeend', filterMissingMarkup(this.before.filterMissing, this.dialog.idPrefix));
+    node.insertAdjacentHTML('beforeend', filterMissingMarkup(this.before.filterMissing));
   }
 
   private updateFilter(filter: string[] | null, filterMissing: boolean) {

diff --git a/src/ui/dialogs/ChangeRendererDialog.ts b/src/ui/dialogs/ChangeRendererDialog.ts
@@ -1,8 +1,6 @@
 import Column from '../../model/Column';
 import {IRankingHeaderContext, IRenderInfo} from '../interfaces';
 import ADialog, {IDialogContext} from './ADialog';
-import {uniqueId} from './utils';
-import {cssClass} from '../../styles';
 
 /** @internal */
 export default class ChangeRendererDialog extends ADialog {
@@ -18,15 +16,14 @@ export default class ChangeRendererDialog extends ADialog {
 
     console.assert(item.length > 1 || group.length > 1 || summary.length > 1); // otherwise no need to show this
 
-    const id = uniqueId(this.dialog.idPrefix);
     const byName = (a: IRenderInfo, b: IRenderInfo) => a.label.localeCompare(b.label);
     node.insertAdjacentHTML('beforeend', `
       <strong>Item Visualization</strong>
-      ${item.sort(byName).map((d) => ` <div class="${cssClass('checkbox')}"><input id="${id}0${d.type}" type="radio" name="renderer" value="${d.type}" ${(current === d.type) ? 'checked' : ''}><label for="${id}0${d.type}">${d.label}</label></div>`).join('')}
+      ${item.sort(byName).map((d) => ` <label><input type="radio" name="renderer" value="${d.type}" ${(current === d.type) ? 'checked' : ''}><span>${d.label}</span></label>`).join('')}
       <strong>Group Visualization</strong>
-      ${group.sort(byName).map((d) => ` <div class="${cssClass('checkbox')}"><input id="${id}1${d.type}" type="radio" name="group" value="${d.type}" ${(currentGroup === d.type) ? 'checked' : ''}><label for="${id}1${d.type}">${d.label}</label></div>`).join('')}
+      ${group.sort(byName).map((d) => ` <label><input type="radio" name="group" value="${d.type}" ${(currentGroup === d.type) ? 'checked' : ''}><span>${d.label}</span></label>`).join('')}
       <strong>Summary Visualization</strong>
-      ${summary.sort(byName).map((d) => ` <div class="${cssClass('checkbox')}"><input id="${id}2${d.type}" type="radio" name="summary" value="${d.type}" ${(currentSummary === d.type) ? 'checked' : ''}><label for="${id}2${d.type}">${d.label}</label></div>`).join('')}
+      ${summary.sort(byName).map((d) => ` <label><input type="radio" name="summary" value="${d.type}" ${(currentSummary === d.type) ? 'checked' : ''}><span>${d.label}</span></label>`).join('')}
     `);
     this.forEach('input[name="renderer"]', (n: HTMLInputElement) => {
       n.addEventListener('change', () => this.column.setRenderer(n.value), { passive: true });