lineupjs / lineupengine

fast scalable table renderer

LineUp.js: Visual Analysis of Multi-Attribute Rankings

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.

Key Features

• scalable (~1M rows)
• heterogenous attribute types (string, numerical, categorical, boolean, date)
• composite column types (weighted sum, min, max, mean, median, impose, nested, ...)
• array (multi value) and map column types (strings, stringMap, numbers, numberMap, ...)
• filtering capabilities
• hierarchical sorting (sort by more than one sorting criteria)
• hierarchical grouping (split rows in multiple separate groups)
• group aggregations (show a whole group as a single group row)
• numerous visualizations for summaries, cells, and group aggregations
• side panel for easy filtering and column management
• React, Angular, Vue.js, Polymer, RShiny, Juypter, ObservableHQ, and Power BI wrapper
• Demo Application with CSV import and export capabilities
• API Documentation based on generated TypeDoc documenation

Usage

Installation

npm install lineupjs

<link href="https://unpkg.com/lineupjs/build/LineUpJS.css" rel="stylesheet" />
<script src="https://unpkg.com/lineupjs/build/LineUpJS.js"></script>

Minimal Usage Example

// generate some data
const arr = [];
const cats = ['c1', 'c2', 'c3'];
for (let i = 0; i < 100; ++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 lineup = LineUpJS.asLineUp(document.body, arr);

CodePen

Advanced Usage Example

// arr from before
const builder = LineUpJS.builder(arr);

// manually define columns
builder
  .column(LineUpJS.buildStringColumn('d').label('Label').width(100))
  .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))
  .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))
  .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'));

// and two rankings
const ranking = LineUpJS.buildRanking()
  .supportTypes()
  .allColumns() // add all columns
  .impose('a+cat', 'a', 'cat2'); // create composite column
  .groupBy('cat')
  .sortBy('a', 'desc')


builder
  .defaultRanking()
  .ranking(ranking);

const lineup = builder.build(document.body);

CodePen

Supported Browsers

• Chrome 64+ (best performance)
• Firefox 57+
• Edge 16+

Demo Application

A demo application is located at lineup_app. It support CSV Import, CSV Export, JSON Export, CodePen Export, nad local data management.

The application is deployed at https://lineup.js.org/app

API Documentation

LineUp is implemented in clean TypeScript in an object oriented manner. A fully generated API documentation based on TypeDoc is available at https://lineup.js.org/main/docs

LineUp can be build manually or using via the builder design pattern (see Advanced Usage Example). The builder design pattern in the more common way.

LineUp Builder

The simplest methods to create a new instance are:

• asLineUp returning a ready to use LineUp instance

  asLineUp(node: HTMLElement, data: any[], ...columns: string[]): LineUp

• asTaggle returning a ready to use Taggle instance

  asTaggle(node: HTMLElement, data: any[], ...columns: string[]): Taggle

• builder returning a new DataBuilder

  builder(arr: any[]): DataBuilder`

The DataBuilder allows on the one hand to specify the individual columns more specificly and the creation of custom rankings.

Builder factory functions for creating column descriptions include:

• buildStringColumn returning a new StringColumnBuilder

  buildStringColumn(column: string): StringColumnBuilder

• buildNumberColumn returning a new NumberColumnBuilder

  buildNumberColumn(column: string, domain?: [number, number]): NumberColumnBuilder

• buildCategoricalColumn returning a new CategoricalColumnBuilder

  buildCategoricalColumn(column: string, categories?: (string | Partial<ICategory>)[]): CategoricalColumnBuilder

• buildHierarchicalColumn returning a new HierarchyColumnBuilder

  buildHierarchicalColumn(column: string, hierarchy?: IPartialCategoryNode): HierarchyColumnBuilder

• buildDateColumn returning a new DateColumnBuilder

  buildDateColumn(column: string): DateColumnBuilder

• buildActionsColumn returning a new ActionsColumnBuilder

  buildActionsColumn(): ActionsColumnBuilder

In order to build custom rankings within the DataBuilder the buildRanking returning a new RankingBuilder is used.

buildRanking(): RankingBuilder

LineUp classes and manual creation

The relevant classes for creating a LineUp instance manually are LineUp, Taggle, and LocalDataProvider. A LocalDataProvider is an sub class of ADataProvider implementing the data model management based on a local JavaScript array. LineUp and Taggle are the visual interfaces to the LocalDataProvider.

The classes can be instantiated either using the factory pattern or via their regular class constructors:

createLineUp(container: HTMLElement, data: ADataProvider, config?: Partial<ILineUpOptions>): LineUp

createTaggle(container: HTMLElement, data: ADataProvider, config?: Partial<ITaggleOptions>): Taggle

createLocalDataProvider(data: any[], columns: IColumnDesc[], options?: Partial<ILocalDataProviderOptions>): LocalDataProvider

new LineUp(node: HTMLElement, data: DataProvider, options?: Partial<ILineUpOptions>): LineUp
new Taggle(node: HTMLElement, data: DataProvider, options?: Partial<ITaggleOptions>): Taggle
new LocalDataProvider(data: any[], columns?: IColumnDesc[], options?: Partial<ILocalDataProviderOptions & IDataProviderOptions>): LocalDataProvider

Both LineUp and Taggle are sub classes of ALineUp. The most important functions of this class include:

• getHighlight(): number / setHighlight(dataIndex: number): void to get and set the highlighted row identified by its index in the data. If none is highlighted -1 is returned.
• getSelection(): number[] / setSelection(dataIndices: number[]): void to get and set the selected rows identified by their indices in the data
• on(type: string, listener: IEventListener | null): this to listen to highlight and selection events. LineUp.js event mechanism is based on d3 dispatch, thus instead of an off method null is passed to disable listening to the event. The following events are sent out:
  • highlightChanged(dataIndex: number): void
  • selectionChanged(dataIndices: number[]): void

React Support (LineUp.jsx)

A React wrapper is located at lineupjsx.

Installation

npm install --save lineupjsx

<link href="https://unpkg.com/lineupjsx/build/LineUpJSx.css" rel="stylesheet" />
<script src="https://unpkg.com/lineupjsx/build/LineUpJSx.js"></script>

Minimal Usage Example

// generate some data
const arr = [];
const cats = ['c1', 'c2', 'c3'];
for (let i = 0; i < 100; ++i) {
  arr.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)],
  });
}

<LineUp data={arr} />

CodePen

Result is same as the builder minimal example

Advanced Usage Example

// arr from before
<LineUp data={arr} defaultRanking>
  <LineUpStringColumnDesc column="d" label="Label" width={100} />
  <LineUpCategoricalColumnDesc column="cat" categories={cats} color="green" />
  <LineUpCategoricalColumnDesc column="cat2" categories={cats} color="blue" />
  <LineUpNumberColumnDesc column="a" domain={[0, 10]} color="blue" />

  <LineUpRanking groupBy="cat" sortBy="a:desc">
    <LineUpSupportColumn type="*" />
    <LineUpColumn column="*" />
    <LineUpImposeColumn label="a+cat" column="a" categeoricalColumn="cat2" />
  </LineUpRanking>
</LineUp>

CodePen

Result is same as the builder advanced example

Angular 6 Support (nglineup)

An Angular wrapper is located at nglineup.

Installation

npm install --save nglineup

Minimal Usage Example

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LineUpModule } from '../lib/lineup.module';

import { AppComponent } from './app.component.1';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LineUpModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  readonly data = <any[]>[];

  readonly cats = ['c1', 'c2', 'c3'];

  constructor() {
    const cats = this.cats;
    for (let i = 0; i < 100; ++i) {
      this.data.push({
        a: Math.random() * 10,
        d: 'Row ' + i,
        cat: cats[Math.floor(Math.random() * 3)],
        cat2: cats[Math.floor(Math.random() * 3)],
      });
    }
  }
}

app.component.html:

<lineup-lineup [data]="data"></lineup-lineup>

CodePen

Result is same as the builder minimal example

Advanced Usage Example

app.component.html:

<lineup-lineup [data]="data" [defaultRanking]="true" style="height: 800px;">
  <lineup-string-column-desc column="d" label="Label" [width]="100"></lineup-string-column-desc>
  <lineup-categorical-column-desc column="cat" [categories]="cats" color="green"></lineup-categorical-column-desc>
  <lineup-categorical-column-desc column="cat2" [categories]="cats" color="blue"></lineup-categorical-column-desc>
  <lineup-number-column-desc column="a" [domain]="[0, 10]" color="blue"></lineup-number-column-desc>

  <lineup-ranking groupBy="cat" sortBy="a:desc">
    <lineup-support-column type="*"></lineup-support-column>
    <lineup-column column="*"></lineup-column>
    <lineup-impose-column label="a+cat" column="a" categoricalColumn="cat2"></lineup-impose-column>
  </lineup-ranking>
</lineup-lineup>

CodePen

Result is same as the builder advanced example

Vue.js Support (vue-lineup)

A Vue.js wrapper is located at vue-lineup.

Installation

npm install --save vue-lineup

Minimal Usage Example

const cats = ['c1', 'c2', 'c3'];
const data = [];
for (let i = 0; i < 100; ++i) {
  data.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)],
  });
}

// enable plugin to register components
Vue.use(VueLineUp);

const app = new Vue({
  el: '#app',
  template: `<LineUp v-bind:data="data" />`,
  data: {
    cats,
    data,
  },
});

CodePen

Result is same as the builder minimal example

Advanced Usage Example

const app = new Vue({
  el: '#app',
  template: `<LineUp v-bind:data="data" defaultRanking="true" style="height: 800px">
    <LineUpStringColumnDesc column="d" label="Label" v-bind:width="100" />
    <LineUpCategoricalColumnDesc column="cat" v-bind:categories="cats" color="green" />
    <LineUpCategoricalColumnDesc column="cat2" v-bind:categories="cats" color="blue" />
    <LineUpNumberColumnDesc column="a" v-bind:domain="[0, 10]" color="blue" />
    <LineUpRanking groupBy="cat" sortBy="a:desc">
      <LineUpSupportColumn type="*" />
      <LineUpColumn column="*" />
    </LineUpRanking>
  </LineUp>`,
  data: {
    cats,
    data,
  },
});

CodePen

Result is same as the builder advanced example

Polymer Support (LineUp-Element)

A Polymer 2.0 web component wrapper is located at lineup-element.

Installation

bower install https://github.com/lineupjs/lineup-element

<link rel="import" href="bower_components/lineup-element/lineup-element.html" />

Minimal Usage Example

// generate some data
const arr = [];
const cats = ['c1', 'c2', 'c3'];
for (let i = 0; i < 100; ++i) {
  arr.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)]
  })
}
conat data = { arr, cats };

<lineup-element data="[[data.arr]]"></lineup-element>

TODO CodePen

Result is same as the builder minimal example

Advanced Usage Example

// arr from before
<lineup-element data="[[data.arr]]" side-panel side-panel-collapsed default-ranking="true">
  <lineup-string-desc column="d" label="Label" width="100"></lineup-string-desc>
  <lineup-categorical-desc column="cat" categories="[[cats]]" color="green"></lineup-categorical-desc>
  <lineup-categorical-desc column="cat2" categories="[[cats]]" color="blue"></lineup-categorical-desc>
  <lineup-number-desc column="a" domain="[0, 10]" color="blue"></lineup-number-desc>
  <lineup-ranking group-by="cat" sort-by="a:desc">
    <lineup-support-column type="*"></lineup-support-column>
    <lineup-column column="*"></lineup-column>
  </lineup-ranking>
</lineup-element>

TODO CodePen

Result is same as the builder advanced example

R, RShiny, and R Markdown Support

A HTMLWidget wrapper for R is located at lineup_htmlwidget. It can be used within standalone R Shiny apps or R Markdown files. Integrated plotting does not work due to an outdated integrated Webkit version in RStudio. Crosstalk is supported for synching selections and filtering among widgets.

Installation

devtools::install_github("rstudio/crosstalk")
devtools::install_github("lineupjs/lineup_htmlwidget")
library(lineupjs)

Examples

lineup(iris)

Jupyter Widget (to be released)

A Jupyter Widget wrapper for Python is located at lineup_widget.

Installation

pip install -e git+https://github.com/lineupjs/lineup_widget.git#egg=lineup_widget
jupyter nbextension enable --py [--sys-prefix|--user|--system] lineup_widget

Or, if you use jupyterlab:

pip install -e git+https://github.com/lineupjs/lineup_widget.git#egg=lineup_widget
jupyter labextension install @jupyter-widgets/jupyterlab-manager

Examples

import lineup_widget
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))

w = lineup_widget.LineUpWidget(df)
w.on_selection_changed(lambda selection: print(selection))
w

from __future__ import print_function
from ipywidgets import interact, interactive, interact_manual

def selection_changed(selection):
    return df.iloc[selection]

interact(selection_changed, selection=lineup_widget.LineUpWidget(df));

Observable HQ

A ObservableHQ wrapper is located at lineup-js-observable.

data = {
  const arr = [];
  const cats = ['c1', 'c2', 'c3'];
  for (let i = 0; i < 100; ++i) {
    arr.push({
      a: Math.random() * 10,
      d: 'Row ' + i,
      cat: cats[Math.floor(Math.random() * 3)],
      cat2: cats[Math.floor(Math.random() * 3)]
    })
  }
  return arr;
}

import { asLineUp } from '@sgratzl/lineup-js-observable-library';

viewof selection = asLineUp(arr)

ObservableHQ

Advanced Usage Example

// arr from before
viewof selection = {
  const b = builder(data);
  b.column(
    LineUpJS.buildStringColumn('d')
      .label('Label')
      .width(100)
  )
    .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))
    .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))
    .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'));

  // and two rankings
  const ranking = LineUpJS.buildRanking()
    .supportTypes()
    .allColumns() // add all columns
    .impose('a+cat', 'a', 'cat2') // create composite column
    .groupBy('cat')
    .sortBy('a', 'desc');

  b.defaultRanking().ranking(ranking);
  return b.build();
}

ObservableHQ

PowerBI Custom Visual (under development)

A PowerBI Visual wrapper is located at lineup_powerbi.

Installation

TODO

Examples

TODO

API Documentation

See API documentation and Develop API documentation

Demos

See Demos, Develop Demos, and R Demos

Related Publications

LineUp: Visual Analysis of Multi-Attribute Rankings Paper Paper Website

Samuel Gratzl, Alexander Lex, Nils Gehlenborg, Hanspeter Pfister, and Marc Streit
IEEE Transactions on Visualization and Computer Graphics (InfoVis '13), 19(12), pp. 2277–2286, doi:10.1109/TVCG.2013.173, 2013.

🏆 IEEE VIS InfoVis 2013 Best Paper Award

Taggle: Scalable Visualization of Tabular Data through Aggregation Paper Preprint Paper Website

Katarina Furmanova, Samuel Gratzl, Holger Stitz, Thomas Zichner, Miroslava Jaresova, Martin Ennemoser, Alexander Lex, and Marc Streit
Information Visualization, 19(2): 114-136, doi:10.1177/1473871619878085, 2019.

Dependencies

LineUp.js depends on

• LineUpEngine table rendering engine
• D3 utilities: scales, format, dragging
• Popper.js dialogs

Development Dependencies

Webpack is used as build tool. LineUp itself is written in TypeScript and SASS.

Development Environment

Installation

The setup requires Node.js v16 or higher.

git clone https://github.com/lineupjs/lineupjs.git -b develop
cd lineupjs
npm i -g yarn
yarn install
yarn sdks vscode

Common commands

yarn start
yarn run clean
yarn run compile
yarn test
yarn run lint
yarn run fix
yarn run build
yarn run docs

Run E2E Tests

via cypress.io

Variant 1: with prebuilt LineUp

yarn run compile
yarn run build
yarn run cy:compile
yarn run cy:open

Variant 2: with webpack-dev-server

first shell:

yarn start

second shell:

yarn run cy:compile
yarn run cy:start

Authors

• Samuel Gratzl (@sgratzl)
• Holger Stitz (@thinkh)
• The Caleydo Team (@caleydo)
• datavisyn GmbH (@datavisyn)

---

This repository was created as part of the The Caleydo Project.

lineupengine's Issues

Run-time errors after release of v2.4.1

LineUp breaks in our apps after the release 2.4.1 with the following run-time error:

Uncaught (in promise) TypeError: Class constructor ACellTableSection cannot be invoked without 'new'
    at new EngineRanking (EngineRanking.js:71:1)
    at MultiTableRowRenderer.<anonymous> (EngineRenderer.js:277:1)
    at MultiTableRowRenderer.pushTable (MultiTableRowRenderer.js:107:1)
    at EngineRenderer.push.6NJj.EngineRenderer.addRanking (EngineRenderer.js:276:1)
    at Object.<anonymous> (EngineRenderer.js:225:1)
    at Dispatch.apply (dispatch.js:61:59)
    at fireImpl (AEventDispatcher.js:107:1)
    at Array.forEach (<anonymous>)
    at LocalDataProvider.push.gwz5.AEventDispatcher.fireImpl (AEventDispatcher.js:110:1)
    at LocalDataProvider.push.gwz5.AEventDispatcher.fire (AEventDispatcher.js:84:1)

I think the error is caused by the updated tsconfig.json. We should revert/downgrade version and match the one in lineupjs.

lineupengine/tsconfig.json

Lines 2 to 7 in 7f7a197

	"compilerOptions": {
	"module": "ES2020",
	"target": "ES2019",
	"importHelpers": false,
	"sourceMap": true,
	"lib": ["DOM", "ES2019"],

https://github.com/lineupjs/lineupjs/blob/93e18c26a61797342b4953a2d6b6a9558ce4a177/tsconfig.json#L3-L7

    "module": "ES2015",
    "target": "ES5",
    "importHelpers": false,
    "sourceMap": true,
    "lib": ["DOM", "ES2015", "es2016.array.include", "es2017.object"],

Please create another patch release after this fix.

Context

• lineupjs/lineupjs#425
• lineupjs/lineupjs#426

Frozen columns are shifted even if no scrolling is possible

• Release number or git hash: v1.1.2
• Web browser version and OS: Chrome v76.0.3809.87

Steps to reproduce

1. Set disableFrozenColumns: false in your LineUpFlags configuration
2. Set a column to frozen
3. Make sure your ranking does not scroll horizontally

Observed behavior

Even if the ranking is not shifted (no le-shifted class), the shift per column style is applied if they are frozen.
The frozen columns are implemented by setting left: ...px, which only works because le-shifted is active on the main lineup engine, as the style position: sticky; is applied to the column. If le-shifted is not present, the left: ...px is still applied, offsetting the column even if no shift is required. This causes a hiding of the column behind the others if no scroll is possible/the scrollbar is on the very left.

Additionally, it seems that the margin of 5px which is usually applied to separate each column is not included in the calculation.

Expected behavior

• Apply the left: ...px only if le-shifted is present.

Possible Solution

The following lines cause the issue (I think): https://github.com/lineupjs/lineupengine/blob/v2.1.0/src/style/GridStyleManager.ts#L165-L173

When calling this.updateRule, one could prepend the CSS selector for le-shifted, such that this rule only applies if it is present. This would cause the left: ...px to not apply on non-shifted rankings.

support async in multi column cases

currently just the sync version.

create a real cell based renderer

in the current version the cell renderer is actually a column in a row renderer.

a true cell renderer e.g. would use a 2D displaygrid and would allow every combination how cells are rendered

support animated recreation

e.g. for animated reordering.

with optional color coding support

Master branch build fails

lineupjsx fails to build due to lineupengine. So I tried to compile lineupengine. There are a bunch of errors compiling it and I feel like I'm doing something wrong.

• Release number or git hash: master branch
• tsc: Version 2.8.3
• tslint: 5.10.0

Steps to reproduce

clone, npm install, npm run build as documented in the README

Observed behavior

ERROR in ./src/style/GridStyleManager.ts
Module parse failed: Unexpected token (14:32)
You may need an appropriate loader to handle this file type.
|
|
| export function setTemplate(root: HTMLElement) {
|   root.innerHTML = TEMPLATE;
|   return root;
 @ ./src/style/index.ts 2:0-97 2:0-97 2:0-97 2:0-97 2:0-97
 @ ./src/index.ts

ERROR in ./src/abortAble.ts
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export interface IAbortAblePromise<T> extends Promise<T | symbol> {
|   abort(): void;
| }
 @ ./src/index.ts 4:0-28 4:0-28

ERROR in ./src/style/IColumn.ts
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
|  * column base interface
|  */
| export interface IColumn {
|   readonly index: number;
|   readonly id: string;
 @ ./src/style/index.ts 1:0-34 1:0-34
 @ ./src/index.ts

ERROR in ./src/logic.ts
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
|  * generic exception of a uniform space
|  */
| export interface IRowHeightException {
|   /**
|    * reference index
 @ ./src/index.ts 3:0-24 3:0-24

ERROR in ./src/mixin/PrefetchMixin.ts
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import {EScrollResult, IMixin, IMixinAdapter} from './IMixin';
|
| export interface IPrefetchRendererOptions {
|   /**
|    * number of rows to prefetch
 @ ./src/mixin/index.ts 2:0-57 2:0-57
 @ ./src/index.ts

ERROR in ./src/mixin/IMixin.ts
Module parse failed: Unexpected token (6:7)
You may need an appropriate loader to handle this file type.
|  * scrolling result
|  */
| export enum EScrollResult {
|   /**
|    * nothing has changed
 @ ./src/mixin/index.ts 1:0-75 1:0-75 1:0-75 1:0-75 1:0-75
 @ ./src/index.ts

ERROR in ./src/style/StyleManager.ts
Module parse failed: Unexpected token (7:10)
You may need an appropriate loader to handle this file type.
|  */
| export default class StyleManager {
|   private readonly rules = new Map<string, string>();
|   private readonly node: HTMLStyleElement;
|
 @ ./src/style/index.ts 3:0-55 3:0-55
 @ ./src/index.ts

ERROR in ./src/ARowRenderer.ts
Module parse failed: Unexpected token (8:7)
You may need an appropriate loader to handle this file type.
| import {addScroll, removeScroll, IScrollInfo, IDelayedMode, defaultMode} from './internal';
|
| export declare type IRowRenderContext = IExceptionContext;
|
| export interface IRowRendererOptions {
 @ ./src/index.ts 2:0-31 2:0-31

ERROR in ./src/ACellRenderer.ts
Module parse failed: Unexpected token (9:7)
You may need an appropriate loader to handle this file type.
|
|
| export declare type ICellRenderContext<T extends IColumn> = ICellAdapterRenderContext<T>;
|
| /**
 @ ./src/index.ts 1:0-32 1:0-32

ERROR in ./src/table/MultiTableRowRenderer.ts
Module parse failed: Unexpected token (9:7)
You may need an appropriate loader to handle this file type.
|  * basic interface of a table section
|  */
| export interface ITableSection {
|   readonly id: string;
|   readonly width: number;
 @ ./src/table/index.ts 2:0-8:33 2:0-8:33 2:0-8:33 2:0-8:33 2:0-8:33 2:0-8:33
 @ ./src/index.ts

ERROR in ./src/animation/index.ts
Module parse failed: Unexpected token (9:7)
You may need an appropriate loader to handle this file type.
|  * different row animation modes
|  */
| export enum EAnimationMode {
|   /**
|    * plain update existed both before and after
 @ ./src/index.ts 8:0-28 8:0-28

ERROR in ./src/table/ACellTableSection.ts
Module parse failed: Unexpected token (9:7)
You may need an appropriate loader to handle this file type.
| import {ITableSection} from './MultiTableRowRenderer';
|
| export declare type ICellRenderContext<T extends IColumn> = ICellAdapterRenderContext<T>;
|
| /**
 @ ./src/table/index.ts 1:0-101 1:0-101 1:0-101
 @ ./src/index.ts

Expected behavior

Compiles without error

support row margin

ie. a row margin that will be considered for each row

Library does not work in projects with tslib < 2.1.0

• Release number or git hash: 2.3.0
• Web browser version and OS:

Steps to reproduce

See lineupjs/lineupjs#423 for details.

1. Use LineUp[Engine] in any project with a "hard" dependency of tslib < 2.1.0, i.e. "tslib": "~2.0.0"

Observed behavior

As soon as a ranking is instantiated, this error occurs and nothing works:

WARNING in ./node_modules/lineupengine/build/src/table/MultiTableRowRenderer.js 147:52-65
1570"export '__spreadArray' was not found in 'tslib'
1571 @ ./node_modules/lineupengine/build/src/table/index.js
1572 @ ./node_modules/lineupengine/build/src/index.js
1573 @ ./node_modules/lineupjs/build/src/ui/SlopeGraph.js
1574 @ ./node_modules/lineupjs/build/src/ui/index.js
1575 @ ./node_modules/lineupjs/build/src/index.js
1576 @ ./jamborees/dist/internal/ranking/RankingView.js

This is because at this line, it uses the spread operator (...[asdf, ]), which is imported from tslib as __spreadArray. The problem is that __spreadArray only exists in tslib: 2.1.0 (https://github.com/microsoft/tslib/releases/tag/2.1.0), and it was previously called __spreadArray*s*.

Expected behavior

I suppose LineUpEngine should work with libraries with tslib < 2.1.0.

(Possible) Solutions

We have already set importHelpers to false in LineUp, we should do the same in LineUpEngine I guess.

Uncaught error thrown in StyleManager.verifySheet

When I call taggle.setOverviewMode(...) I get an error thrown in the console:

The trace is:

taggle.setOverviewMode(...) →
updateLodRules →
GridStyleManager.updateRule →
StyleManager.verifySheet →
sheet.deleteRule()

The last line is where the error is thrown. https://github.com/lineupjs/lineupengine/blob/main/src/style/StyleManager.ts#L86

This appears to be caused by incorrectly deleting all the items in a list with a for loop.

const rules = sheet.cssRules;
...
const l = rules.length;
for (let i = 0; i < l; i += 1) { sheet.deleteRule(i); }

Suggested Fix
I have not tested this, but changing the loop logic should fix this.

while (sheet.cssRules.length > 0) { sheet.deleteRule(0); }

Screenshots
Notice how the error repeats, but the index listed is cut in half. This matches what I say above, half the items are deleted before getting to the end of the array, Then something (I don't know what) retriggered the code, and half the rules are deleted again.

Context

• Version: 4.6.0
• Browser: Chrome

Additional context

The ability to call setOverviewMode from a taggle object is new functionality, introduced in lineupjs/lineupjs#552. That might have exposed this error, but it is possible this could be triggered some other way.

support multi column case

the style manager already has support for it but there is no efficient (visible) management for columns, yet. e.g. draw loading divs over multiple cells (on the left) if not visible and skip the right ones.

or if the elements exists don't update them.

Wrong location for Demos link

Open https://lineupengine.js.org/#demos. The link points to https://sgratzl.github.io/lineupengine/develop_docs/demo, which is not available.

support multi table with separator

as needed for lineup with multiple rankings and slope graphs inbetween