lineupjs / lineup_app

LineUp.js Demo Application

LineUp App

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes. This is a demo application using LineUp.js. Details about the LineUp visualization technique can be found at http://lineup.caleydo.org.

The application is deployed at: https://lineup.js.org/app. The develop version using LineUp v4 is deployed at https://lineup.js.org/app_develop. It is a Single Page Application that requires no server installation. No data is transferred to any server but just kept local in your browser local storage using IndexedDB.

Features

• Data Management
  • Choose one of the preloaded datasets
  • Import/Export CSV File
  • Import/Export JSON File
  • Import/Export LineUp JSON Dump
• Session Management save different analyses with a custom session name. A session represents a view on the current dataset along with the currently specified sorting, filtering, grouping, and so on.
• Export the current state to one of
  • https://codepen.io
  • https://jsfiddle.net
  • https://codesandbox.io

Note Uploaded files are stored in your local web browser only.

Supported Browsers

• last 2 Chrome versions (best performance)
• last 2 Edge versions (best performance)
• last 2 Firefox versions
• Firefox Extended Support Release (ESR)

Usage

Hosting

This app is a client only app. Thus, requires no server since all data is stored on the browser only. To host it onself:

1. build the app by following the development environemtn instructions and create a distribution package.
2. copy the content of the /build directory to your target destination
3. host the content through a web server such as NGINX or host it by running a local web server. A list of web servers can be found at https://gist.github.com/willurd/5720255.

Development Environment

Installation

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

Common commands

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

Authors

• Samuel Gratzl (@sgratzl)

lineup_app's Issues

manage local files

when uploading a local file it should be stored in the IndexedDB for later use. Each dataset should result in another card at the beginning with the option to delete and continue it.

update preview images

with the changes style the preview images have to be adapted accordingly.

@thinkh can you take a look at it?

Fix alignment of `Group by` dialog for numerical columns

• Release number or git hash: v4.0.0-alpha.8
• Web browser version and OS: Chrome 71-beta

Steps to reproduce

1. Select a numerical column
2. Open Group by dialog

Observed behavior

Expected behavior

• Alignment should be correct. The buttons at the bottom of the dialog should be visible.

Use colors of original LineUp

Coming from Caleydo/lineupjs#65 and Caleydo/lineup#7

I don't where to find the original color scale other than this paper figure:

Compile errors when using lineupjs as local dependency (and not from npm)

• Release number or git hash: [email protected]
• Web browser version and OS: Windows 10

Steps to reproduce

1. Clone this repository
2. Clone datavisyn/lineupjs
3. cd lineupjs && npm link
4. cd ../lineup_app && npm link lineupjs
5. lineupjs: npm start or npm run watch (to get an initial build)
6. lineup_app: npm start or npm run build

Observed behavior

ERROR in /lineup_app/src/data/forbes-top-2000-companies/index.ts(3,99):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`
ERROR in /lineup_app/src/data/fromFile.ts(4,23):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`
ERROR in /lineup_app/src/data/IDataset.ts(1,30):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`
ERROR in /lineup_app/src/data/soccer/index.ts(3,101):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`
ERROR in /lineup_app/src/data/world-happiness-report/index.ts(3,75):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`
ERROR in /lineup_app/src/data/wur/index.ts(3,75):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`
ERROR in /lineup_app/src/export.ts(1,48):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`
ERROR in /lineup_app/src/shared.ts(2,30):
TS7016: Could not find a declaration file for module 'lineupjs'. '/lineupjs/build/LineUpJS.js' implicitly has an 'any' type.
  Try `npm install @types/lineupjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'lineupjs';`

Expected behavior

• Compiling should also work with npm link
• Or describe the development setup with lineupjs as non-npm dependency

Drag&drop CSV upload results in duplicated LineUp and side panel

• Release number or git hash: lineup.js Demo and taggle.caleydoapp.org
• Web browser version and OS: Chrome

Steps to reproduce

1. Load some sample dataset (e.g. Soccer)
2. Drag some CSV file onto the browser window

Observed behavior

• Side panel and ranking table is shown twice. Once for the initial dataset and a second time for the uploaded dataset.

Expected behavior

• Newly uploaded dataset replaces existing LineUp instance.

add IEEE Top Programming Languages dataset

https://spectrum.ieee.org/static/ieee-top-programming-languages-2018-methods

https://spectrum.ieee.org/ns/IEEE_TPL_2018/data/data_sources_2018.json?v=2
https://spectrum.ieee.org/ns/IEEE_TPL_2018/data/rankings_2018.json?v=2
https://spectrum.ieee.org/ns/IEEE_TPL_2018/data/languages_2018.json?v=2

Dropbox file chooser for dataset selection

Coming from Caleydo/lineupjs#61 and Caleydo/lineup#6.

e.g. via https://www.dropbox.com/developers/dropins

Import CSV throws an error for `category = null`

• Release number or git hash: fa7bad4
• Web browser version and OS: Chrome 67.0.3396.62 (Offizieller Build) beta (64-Bit)

Steps to reproduce

1. Open https://lineup.js.org/app/#soccer
2. Download CSV
3. Go to dataset selection
4. Import the saved file

Observed behavior

Error in console (online)

Error in debugger (local)

Expected behavior

• categories === null should be ignored

Shifted columns vs. header

If the windows size is smaller than the table width and the horizontal scrolling is necessary, the columns in the part that is accessible only by scrolling will be shifted.
Steps:
Downsize your window (in my case the window size was 1041*832)
Load taggle demo (https://taggle.caleydoapp.org/#soccer)
Scroll to access the matrix columns

Note: I think I was already reporting this issue once, but I can't find it anymore. I am sorry if this is a duplicate.

Export CSV does not consider initial custom ranking

• Release number or git hash: https://github.com/thinkh/lineup_app/commit/63796c6a127a0f139bdb23c3975059004ac163db
• Web browser version and OS: Chrome 67.0.3396.62 (Offizieller Build) beta (64-Bit)

Steps to reproduce

1. Clone https://github.com/thinkh/lineup_app/blob/taggle_user_study
2. Run Lineup
3. Export CSV file

Observed behavior

• The exported CSV contains all columns, even though the dataset shows only selected columns (instead of using allColumns())
• After a user interaction (e.g., filter) the export is correct

Expected behavior

• The export should consider initial custom ranking

This issue might be related to #7.

Grouping hierarchy label empty for selection grouping

If grouping by selection is active, the corresponding grouping hierarchy panel is missing a label (it should say something like grouping by selection):

export to Gist not working anymore

see ->https://blog.github.com/2018-02-18-deprecation-notice-removing-anonymous-gist-creation/

Add some left and right padding to footer

Rendering glitches in overview mode

• Release number or git hash: Caleydo@8fb3c96 equal to current develop branch at be45acf with lineupjs@^4.0.0-alpha.2
• Web browser version and OS: Chrome 69-beta

Steps to reproduce

1. Open https://taggle.caleydoapp.org/#soccer
2. Switch to overview mode
3. Scroll the ranking up and down

Observed behavior

• White spots at the header and footer, which makes the header invisible and unusable

Expected behavior

• Rendering without glitches

Export to Codepen not working

• Release number or git hash: https://lineup.js.org/app/
• Web browser version and OS: FF 74

Steps to reproduce

1. Go to https://lineup.js.org/app/#soccer
2. Export to Codepen

Observed behavior

• Any unexpected output or action (or lack of expected output or action)

No lineup displayed

• Web browser console errors (including tracebacks)

The resource from “https://unpkg.com/[email protected]/build/LineUpJS.min.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff). index.html

The resource from “https://unpkg.com/[email protected]/build/LineUpJS.min.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff). index.html

ReferenceError: LineUpJS is not defined

• Server errors (relevant messages and tracebacks)
• Static or animated images showing the UI behavior

Workaround

Open Pen settings and switch to non-minified css and js files.

uploader configuration

in the current version the uploader is a black box based on PapaParse. However, the user might want to customize the loading and detection of column types.

Therefore while uploading a preview of the detected file properties should be shown which allows the user to customize it. However, when not changing a thing within X seconds it should automatically proceed with the default values.

• separator
• column types
• column label
• custom descriptions (categories, domain ranges

Odd checkbox in Filter Dialog

Here's a non-standard checkbox, that also has a weird (though interesting) animation:

Probably better to just use a regular checkbox?

Select filters (in filter dialog) for categorical columns does not work

• Release number or git hash: https://www.npmjs.com/package/lineupjs/v/3.0.1-beta.12
• Web browser version and OS: Chrome 67 beta

Steps to reproduce

1. Open https://lineup.js.org/app/#soccer
2. Click on filter icon for a categorical column
3. Uncheck the first check mark
4. Try to check selected categories

Observed behavior

• Unable to check/uncheck filter
• The first two rows should do the same, don't they?

Expected behavior

• Remove the first row and keep Un/Select All or add a label to the first row
• Check/uncheck categories should work

Broken export to CodeSandbox

• Release number or git hash: 4.0.0
• Web browser version and OS: Chrome 87

Steps to reproduce

1. Open https://lineup.js.org/app_develop/#soccer
2. Export to example to CodeSandbox.io

Observed behavior

Error 1

DependencyNotFoundError
Could not find dependency: 'tslib' relative to '/node_modules/lineupjs/src/provider/ADataProvider.js'

If I follow the instructions and import tslib, I get the following error.

Error 2

TypeError
Cannot read property 'FLOAT_ASC' of undefined

...

  1 | 
> 2 | import * as LineUpJS from "lineupjs";
  3 | import "lineupjs/build/LineUpJS.css";
  4 | import * as Papa from "papaparse";
  5 | 

Switching the dependency to LineUp v4.1.1 shows the same error.

Expected behavior

The export should work without errors and show the demo.

save state of analysis

the current state of the analysis (regardless whether a local or a predefined file) should be stored in the IndexedDB of the browser such that the user can continue his/her analysis.

state needs to be updated upon hash change and when leaving the page.

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
http://dexie.org/

CSV and JSON download broken

• Release number or git hash: lineup.js Demo Page
• Web browser version and OS: Chrome

Steps to reproduce

1. start soccer dataset
2. download JSON or CSV

Observed behavior

• Nothing happens

app.js:124 Uncaught (in promise) DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
    at https://lineup.js.org/app/app.js:124:100635
(anonymous) @ app.js:124
Promise.then (async)
(anonymous) @ app.js:124

Expected behavior

• File successfully downloaded

Grouping not working

After uploading a csv and trying to group, the menu doesn't apply the grouping. Clicking 'confirm' doesn't close the menu.
Clicking outside the menu will make the grouping to be removed.

Clicking on 'confirm' returns error:

Reproduced with selecting an internal dataset from the homepage.

The problem seems to happen with this type of column:

It actually groups, but then it ungroup because the confirm button doesn't work.

Cannot npm start/build after npm install: node_modules/@babel/compat-data/data/corejs3-shipped-proposals

Error: Cannot find module '... /lineup_app/node_modules/@babel/compat-data/data/corejs3-shipped-proposals'

After cloning and npm install, the npm start and npm build give this error.

Import matrix from exported file does not work

• Release number or git hash: 64855d9
• Web browser version and OS: Chrome 67.0.3396.62 (Offizieller Build) beta (64-Bit)

Steps to reproduce

1. Open https://lineup.js.org/app/#soccer
2. Download CSV
3. Go to dataset selection
4. Import the saved file

Observed behavior

Original Demo

Imported CSV file

Expected behavior

• Matrix column should be parsed correctly and visualized as matrix again

Soccer Dataset: The 0 height values should be changed to Missing values.

Soccer Dataset: The 0 height values should be changed to Missing values.

update readme

• preview image
• feature list
• download instructions
• self hosting instructions (e..g http server one liner ref)

Remove MatrixColumn again?

https://github.com/lineupjs/lineup_app/blob/develop/src/model/MatrixColumn.ts

IMO, the lineup_app should just show and use features that are provided by the library thus not extending LineUp itself cause it will break among others all export functionalities.

Import does not load previously exported dataset

@mstreit commented on Fri Oct 12 2018

• Release number or git hash: public soccer demo
• Web browser version and OS: Chrome

Steps to reproduce

1. Open soccer dataset
2. Export CSV
3. Import the previously exported CSV

Similar problems when exporting and importing JSON.

Observed behavior

• Only loading bar is shown

Expected behavior

• Dataset should appear in LineUp

proper handling of selecting wrong files

just allow text/plain, text/csv, text/tsv, text/tab-separated-values mime types

extract current state of ranking upon export

upon export to CodePen or Github Gist the real current state should be recreated. Thus a method for extracting the builder for a given ranking is needed. In addition, filter settings and other live data needs to be set on the real instance

Update Soccer Dataset

https://sofifa.com/ provides player data for the FIFA games by EA (FIFA 2019, etc)

There is scraped dataset on Kaggle which could be used to update/replace the present soccer dataset.
https://www.kaggle.com/karangadiya/fifa19

The data is not metric though.

Sidebar does not close fully

• Release number or git hash: version deployed at https://taggle.caleydoapp.org
• Web browser version and OS: Chrome

Steps to reproduce

1. Open any LineUp ranking
2. Close side bar on the right

-> Selection Item vs Overview is still visible

support uploading of advanced column types

• date
• boolean
• array types:
• set
• boxplot
• map types
• ordinal
• hierarchy

allow uploading json file objects

in addition to CSV files

Let users manually switch the column type

Sometimes user wants to switch the column to a different type (other than the predefined one), e.g., to try different filters. The use case often appears, when users are uploading a CSV file on https://lineup.js.org/app_develop/ and some columns are not detected correctly. At the moment the user does not have the option to change it in the UI. The only option to change it is to open a codepen or similar and edit the column type. This is usually a lot of work for users that "just" want to analyze their data.

In the following are some switches users were requesting:

• String to date
• Date to string
• String to categorical
• Categorical to string
• Number to categorical
• String to link
• Link to string
• Boolean to categorical
• Categorical to boolean

Of course not all switches are possible and useful. We must find a way how we can allow and on the other side restrict this functionality.

Suggestion

1. Every column has a new menu point Switch column type ...
2. On click a dialog opens
3. The dialog provides possible column types (the list needs to be defined)
4. When the user confirms the dialog the column is replaced with the new column type

Open questions

1. Is a live preview and reset button possible?
   • Idea: We could place a preview of the new column next to original one. If the user confirms the dialog the original column is removed. Otherwise (on cancel/reset) the preview column is removed
   • If not we should hide the reset button and/or give the user a warning that this action cannot easily be undone.
2. Which column types can switched into one another?
3. What happens to categories, min/max values, ...?
4. Can we keep sorting/grouping/group sorting for the column?

Alternative option

In case this feature request is too complicated, we should think how to improve the importer of the LineUp demo instead so that the user starts with the correct column type after uploading a dataset.

better drop file support

currently no visual hint