Merge pull request #563 from lineupjs/release/v4.6.0

Release v4.6.0
lineupjs · May 3, 2022 · 93e18c2 · 93e18c2
2 parents a3144ca + 2a6170a
commit 93e18c2
Show file tree

Hide file tree

Showing 14 changed files with 135 additions and 55 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -6,14 +6,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - run: npm i -g yarn
       - run: yarn config set checksumBehavior ignore
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ./.yarn/cache

diff --git a/.github/workflows/create_release.yml b/.github/workflows/create_release.yml
@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: main
           ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
@@ -31,7 +31,7 @@ jobs:
           echo -n "::set-output name=next_tag::"
           npm version --no-git-tag-version ${{ github.event.inputs.versionName }} --preid ${{ github.event.inputs.preid }}
       - name: Create pull request into main
-        uses: peter-evans/create-pull-request@v3
+        uses: peter-evans/create-pull-request@v4
         with:
           branch: release/${{ steps.version.outputs.next_tag }}
           commit-message: 'chore: release ${{ steps.version.outputs.next_tag }}'

diff --git a/.github/workflows/release_main.yml b/.github/workflows/release_main.yml
@@ -18,8 +18,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - name: Extract version
@@ -51,14 +51,14 @@ jobs:
     needs: create_release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - run: npm i -g yarn
       - run: yarn config set checksumBehavior ignore
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ./.yarn/cache
@@ -118,7 +118,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: develop
           ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}

diff --git a/demo/taggle_nopanel.html b/demo/taggle_nopanel.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="UTF-8" />
+    <title>LineUp Taggle Test</title>
+
+    <link href="./LineUpJS.css" rel="stylesheet" />
+    <link href="./demo.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script src="https://d3js.org/d3.v4.min.js"></script>
+    <script src="./LineUpJS.js"></script>
+
+    <script>
+      window.onload = function () {
+        const arr = [];
+        const cats = ['c1', 'c2', 'c3'];
+        for (let i = 0; i < 1000; ++i) {
+          arr.push({
+            a: Math.random() * 10,
+            d: 'Row ' + i,
+            cat: cats[Math.floor(Math.random() * 3)],
+            cat2: cats[Math.floor(Math.random() * 3)],
+          });
+        }
+
+        const b = LineUpJS.builder(arr).deriveColumns();
+        b.sidePanel(false);
+        const taggle = b.buildTaggle(document.body);
+
+        setTimeout(() => {
+          taggle.setOverviewMode(true);
+        }, 3000);
+      };
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lineupjs",
   "description": "LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "author": {
     "name": "Samuel Gratzl",
     "email": "sam@sgratzl.com",

diff --git a/src/internal/math.ts b/src/internal/math.ts
@@ -233,7 +233,7 @@ function computeKDE(
 export function boxplotBuilder(
   fixedLength?: number,
   kdePoints?: number
-): IBuilder<number, IAdvancedBoxPlotData> & { buildArr: (s: Float32Array) => IAdvancedBoxPlotData } {
+): IBuilder<number, IAdvancedBoxPlotData> & { buildArr: (s: Float32Array | Float64Array) => IAdvancedBoxPlotData } {
   let min = Number.POSITIVE_INFINITY;
   let max = Number.NEGATIVE_INFINITY;
   let sum = 0;
@@ -243,7 +243,7 @@ export function boxplotBuilder(
 
   // if fixed size use the typed array else a regular array
   const values: number[] = [];
-  const vs: Float32Array | null = fixedLength != null ? new Float32Array(fixedLength) : null;
+  const vs: Float64Array | null = fixedLength != null ? new Float64Array(fixedLength) : null;
 
   const push = (v: number) => {
     length += 1;
@@ -349,11 +349,11 @@ export function boxplotBuilder(
       return invalid;
     }
 
-    const s = vs ? vs.sort() : Float32Array.from(values).sort();
+    const s = vs ? vs.sort() : Float64Array.from(values).sort();
     return buildImpl(s);
   };
 
-  const buildArr = (vs: Float32Array) => {
+  const buildArr = (vs: Float64Array) => {
     const s = vs.slice().sort();
 
     for (let j = 0; j < vs.length; ++j) {
@@ -986,7 +986,7 @@ export interface INumberStatsMessageRequest {
   indices?: UIntTypedArray;
 
   refData: string;
-  data?: Float32Array;
+  data?: Float64Array;
 
   domain: [number, number];
   numberOfBins: number;
@@ -1013,7 +1013,7 @@ export interface IBoxPlotStatsMessageRequest {
   indices?: UIntTypedArray;
 
   refData: string;
-  data?: Float32Array;
+  data?: Float64Array;
 }
 
 /**
@@ -1166,7 +1166,7 @@ function sortWorkerMain() {
     }
   };
 
-  const resolveRefs = <T extends UIntTypedArray | Float32Array | Int32Array | readonly string[]>(
+  const resolveRefs = <T extends UIntTypedArray | Float32Array | Float64Array | Int32Array | readonly string[]>(
     r: IStatsWorkerMessage
   ) => {
     // resolve refs or save the new data
@@ -1247,7 +1247,7 @@ function sortWorkerMain() {
   };
 
   const numberStats = (r: INumberStatsMessageRequest) => {
-    const { data, indices } = resolveRefs<Float32Array>(r);
+    const { data, indices } = resolveRefs<Float64Array>(r);
 
     const b = numberStatsBuilder(r.domain ?? [0, 1], r.numberOfBins);
 
@@ -1269,7 +1269,7 @@ function sortWorkerMain() {
   };
 
   const boxplotStats = (r: IBoxPlotStatsMessageRequest) => {
-    const { data, indices } = resolveRefs<Float32Array>(r);
+    const { data, indices } = resolveRefs<Float64Array>(r);
 
     const b = boxplotBuilder(indices ? indices.length : undefined);
 

diff --git a/src/internal/worker.ts b/src/internal/worker.ts
@@ -170,15 +170,15 @@ export class WorkerTaskScheduler {
     type: 'numberStats',
     args: Partial<INumberStatsMessageRequest>,
     refData: string,
-    data: Float32Array,
+    data: Float64Array,
     refIndices?: string,
     indices?: IndicesArray
   ): Promise<IStatistics>;
   pushStats(
     type: 'boxplotStats',
     args: Partial<IBoxPlotStatsMessageRequest>,
     refData: string,
-    data: Float32Array,
+    data: Float64Array,
     refIndices?: string,
     indices?: IndicesArray
   ): Promise<IAdvancedBoxPlotData>;

diff --git a/src/provider/ScheduledTasks.ts b/src/provider/ScheduledTasks.ts
@@ -348,7 +348,7 @@ export class ScheduleRenderTasks extends ARenderTasks implements IRenderTaskExec
                 'boxplotStats',
                 {},
                 key,
-                this.valueCacheData.get(key) as Float32Array,
+                this.valueCacheData.get(key) as Float64Array,
                 `${ranking.id}:${group.name}`,
                 group.order
               )
@@ -374,7 +374,7 @@ export class ScheduleRenderTasks extends ARenderTasks implements IRenderTaskExec
                 'numberStats',
                 { numberOfBins: summary.hist.length, domain: this.resolveDomain(col, raw) },
                 key,
-                this.valueCacheData.get(key) as Float32Array,
+                this.valueCacheData.get(key) as Float64Array,
                 `${ranking.id}:${group.name}`,
                 group.order
               )
@@ -467,7 +467,7 @@ export class ScheduleRenderTasks extends ARenderTasks implements IRenderTaskExec
               'boxplotStats',
               {},
               key,
-              this.valueCacheData.get(key) as Float32Array,
+              this.valueCacheData.get(key) as Float64Array,
               ranking.id,
               order ? order.joined : ranking.getOrder()
             )
@@ -489,7 +489,7 @@ export class ScheduleRenderTasks extends ARenderTasks implements IRenderTaskExec
               'numberStats',
               { numberOfBins: data.hist.length, domain: this.resolveDomain(col, raw) },
               key,
-              this.valueCacheData.get(key) as Float32Array,
+              this.valueCacheData.get(key) as Float64Array,
               ranking.id,
               order ? order.joined : ranking.getOrder()
             )
@@ -691,7 +691,7 @@ export class ScheduleRenderTasks extends ARenderTasks implements IRenderTaskExec
           'boxplotStats',
           {},
           valueCacheKey,
-          this.valueCacheData.get(valueCacheKey)! as Float32Array
+          this.valueCacheData.get(valueCacheKey)! as Float64Array
         )
       );
     }

diff --git a/src/provider/sort.ts b/src/provider/sort.ts
@@ -52,7 +52,7 @@ function toCompareLookUp(rawLength: number, type: ECompareValueType): ILookUpArr
       return [] as string[];
     case ECompareValueType.FLOAT_ASC:
     case ECompareValueType.FLOAT:
-      return new Float32Array(rawLength);
+      return new Float64Array(rawLength);
     case ECompareValueType.DOUBLE_ASC:
     case ECompareValueType.DOUBLE:
       return new Float64Array(rawLength);
@@ -143,7 +143,7 @@ export class CompareLookup {
     // so a typed array
     return this.data
       .map((d) => d.lookup)
-      .filter((d): d is UIntTypedArray | Float32Array => !Array.isArray(d))
+      .filter((d): d is UIntTypedArray | Float64Array => !Array.isArray(d))
       .map((d) => d.buffer);
   }
 

diff --git a/src/provider/tasks.ts b/src/provider/tasks.ts
@@ -289,7 +289,7 @@ export class ARenderTasks {
 
       if (order == null && !this.valueCacheData.has(key)) {
         // build and valueCache
-        const vs = new Float32Array(this.data.length);
+        const vs = new Float64Array(this.data.length);
         let i = 0;
         return this.builder(
           {

diff --git a/src/renderer/SetCellRenderer.ts b/src/renderer/SetCellRenderer.ts
@@ -32,6 +32,7 @@ export default class SetCellRenderer implements ICellRendererFactory {
       render: (n: HTMLElement, value: (number | boolean)[]) => {
         forEachChild(n, (d: HTMLElement, i) => {
           const v = value[i];
+          d.style.backgroundColor = mapping.apply(categories[i]);
           d.style.opacity = typeof v === 'boolean' ? (v ? '1' : '0') : round(v, 2).toString();
         });
       },

diff --git a/src/ui/EngineRanking.ts b/src/ui/EngineRanking.ts
@@ -939,22 +939,44 @@ export default class EngineRanking extends ACellTableSection<RenderColumn> imple
     this.events.fire(EngineRanking.EVENT_WIDTH_CHANGED);
   }
 
+  private computeShiftedIndex(index: number) {
+    const columns = this.context.columns;
+    // may not match if not all left columns are shown
+    let leftOffset = 0;
+    let indexOffset = 0;
+    // shift frozen ones
+    for (let frozenIndex of this.visibleColumns.frozen) {
+      if (frozenIndex >= this.visibleColumns.first) {
+        break;
+      }
+      leftOffset += columns[frozenIndex].width + COLUMN_PADDING;
+      indexOffset--;
+    }
+    // shift visible before
+    indexOffset += this.visibleColumns.first;
+    for (let i = this.visibleColumns.first; i < index; ++i) {
+      leftOffset += columns[i].width + COLUMN_PADDING;
+    }
+    return {
+      leftOffset,
+      indexOffset,
+    };
+  }
+
   private updateColumn(index: number) {
     const columns = this.context.columns;
     const column = columns[index];
     if (!column) {
       return false;
     }
-    let x = 0;
-    for (let i = this.visibleColumns.first; i < index; ++i) {
-      x += columns[i].width + COLUMN_PADDING;
-    }
+    const { leftOffset, indexOffset } = this.computeShiftedIndex(index);
+
     super.forEachRow((row, rowIndex) => {
       if (EngineRanking.isCanvasRenderedRow(row)) {
-        this.updateCanvasCell(row.firstElementChild! as HTMLCanvasElement, row, rowIndex, column, x);
+        this.updateCanvasCell(row.firstElementChild! as HTMLCanvasElement, row, rowIndex, column, leftOffset);
         return;
       }
-      this.updateCellImpl(column, row.children[index] as HTMLElement, rowIndex);
+      this.updateCellImpl(column, row.children[index - indexOffset] as HTMLElement, rowIndex);
     });
     return true;
   }