peter-gy / visrecly Goto Github PK

Description

As I will use a custom fork of draco, including it as a git submodule will facilitate my work

Requirements

• Link in peter-gy/draco as a git submodule as an NX app

Description

Currently, when resizing the window, the full ranking pipeline runs again which is wasteful & should be fixed.

Description

Implement the ideas proposed by a kind expert.

• remove scale labels
• improve category color scale
• use alphabetical labels for overall ranks
• display overall identifier of highlighted rect

Description

The main app body should not be rendered for screen sizes below lg.

Description

Enhance lighthouse scores

Requirements

• Synced scrolling
• Proper rank ordering
• Enhanced vis detail view
• Enhanced responsivity
• Additional tooltips

Description

Migrate nx to its latest version

Requirements

• No functional changes to the code

Description

The calculation of the overall ranking is embarrassingly simple and the vega-lite specs yielded by the generated ASPs are not diverse enough. Possibilities for enhancements should be explored.

Description

Add an introjs-based onboarding to help users interpret the dashboard.

Description

Update the dependencies listed below:

• clingo-wasm

Description

Upgrade to nx 14.6.1.

Description

Due to performance drawbacks of traditional client-server architecture, instead of using a python-based rec-server for recommendation generation, the usage of clingo-wasm with draco-core should be preferred.

Requirements

• Create a new TS-based NX library, called draco-web
• Mimic the feature of draco-vis, but with fresh dependencies

Additional Context

draco-vis cannot be used as an off-the-shelf solution, as it depends on old versions of draco, vega-lite and it uses the deprecated wasm-clingo instead of clingo-wasm.

Description

The skeleton of the dashboard's user interface should be created with basic responsivity support.

Requirements

• Navbar with optional actions
• Sidebar that is open by default
• Scrollable area with dummy children
• Placeholder for grid

Additional Context

Figma Design

Description

• The used datasets should be finalized, data with irregular column names should be removed from the app, as they lead to ASP-parsing server errors.
• VisTask descriptions should be revised

Description

Description

Users should be able to support custom data in common formats such as JSON and CSV.

Description

Interactive, linked highlighting should be supported between the recommendation list and the heatmap

Description

Fix linting errors.

Description

Add basic SEO support to the app.

Description

CSS inconsistencies and programmatic DOM interactions do not work as expected on Safari.

Description

The full pipeline & API for ranking should be created. It should be handled by a separate library, depending on the draco and draco-web modules.

Requirements

• Create models to represent VIS tasks and their ranking logic depending on a given encoding
• Create default VIS tasks and their ranking logic (at least a stub)
• Expose a single ranking function, accepting the following input:
  • data as any[]
  • encoding preferences of the user (which columns should be included)
  • maximum number of models
  • --> should output an augmented SolutionSet with $n$ costs per recommendation

Additional Context

The VIS tasks and their associated ranking logic must be declarative and easily modifiable. This is absolutely necessary to be able to enhance the tool from a domain POV without making significant changes to the codebase.

Ranking Approach

The proposed ranking algorithm has two main pillars:

• Data-oriented: obtained from draco by reading the cost of a model for an ASP
• Task-oriented: "hard-coded" based on relevant literature, by declaring how useful a given encoding is for a specified task

Non-exhaustive list of used literature:

• Task-Based Effectiveness of Basic Visualizations
• Visual Data Analysis with Task-based Recommendations

The recommendations are generated as vega-lite, hence, the used marks need to be matched using its schema.

Currently, the following marks are specified in the schema:

"Mark": {
  "description": "All types of primitive marks.",
  "enum": [
    "arc",
    "area",
    "bar",
    "image",
    "line",
    "point",
    "rect",
    "rule",
    "text",
    "tick",
    "trail",
    "circle",
    "square",
    "geoshape"
  ],
  "type": "string"
},

In a very high-level overview, the steps to take are:

1. Let draco process the raw data with its wisdom collected as .lp files as a part of uwdata/draco#51 and uwdata/draco#52, and save the SolutionSet output.
2. Iterate through the SolutionSet, and assign a VIS-task-based weight to each solution per VIS task. After this, given that we have $n$ VIS tasks at hand, we can generate $n$ composite costs per recommendation by summing the data-based cost with the VIS-task-based cost.
3. Clients of the library can further process these details and use them for representation

Description

Update the workspace to the latest version

Requirements

• No functional changes to the code

Description

Small details such as onboarding texts should be enhanced.

Description

A basic, project-relevant description should be created.

Description

Small rectangles should be added to the first column of the heatmap to make it clear that the user sees a ranking horizontally.

Description

Recommendations should be generated using draco2. The specifications should be rendered using the vega-lite-based renderer implemented in cmudig/draco2#438.

In order to do so, this monorepo needs to be extended with a Python server component wrapping draco2's server implemented in cmudig/draco2#403.

Description

Implement the heatmap UI & support rendering vega-lite charts

Description

It should be possible to pick encoding preferences via the sidebar.

Requirements

• Access data schema before recommendation generation
• State management setup
• Actual sidebar UI

Description

Set up a GH action to deploy the app to Vercel automatically