SACGF / SACGF/variantgrid

Download cut-down jQuery UI and Plotly builds (~2.5MB of unused JS shipped)

Open
#1,790 3 comments 0 reactions 0 assignees View on GitHub
Refactoring
Dominant language
Python
Stars
30
Forks
3
Avg merge
9h 28m
Merged PRs (30d)
42

Description

🤖 Written by Claude

Two of our vendored JS libraries are shipping far more than we use. Both are fixed by downloading a different build — no application code changes.

## jQuery UI — full build, 8 widgets used

`variantgrid/static_files/default_static/js/lib/jquery-ui-1.13.2.custom/` is a "custom" download that actually includes **everything**. Header:

```
Includes: widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js,
jquery-patch.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js,
widgets/draggable.js, widgets/droppable.js, widgets/resizable.js, widgets/selectable.js,
widgets/sortable.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js,
widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/dialog.js,
widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/selectmenu.js,
widgets/slider.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js,
effect.js, effects/effect-blind.js, ... (all 15 effects)
```

It is loaded on every page from `uicore/templates/uicore/page/base.html`.

What we actually call:

| Widget | Call sites |
| --- | --- |
| `tabs` | ~25 templates |
| `dialog` | 6 |
| `datepicker` | 6 (`global.js`, `vc_form.js`, patient templates) |
| `slider` | 5 (allele freq, conservation, damage, hotspot graph) |
| `sortable` (+ `disableSelection`) | 4 |
| `accordion` | 3 |
| `selectable` | 1 (`analysis_nodes.js`) |
| `button` / `selectmenu` | `analysis.js`, `wiki_tag.html` |

Never referenced anywhere: **draggable, droppable, resizable, autocomplete, menu, progressbar, spinner, checkboxradio, controlgroup, tooltip, and all 15 effects.**

Two notes:

- The comment above the include says *"Needed for drag & drop — TODO reduce scope of jQuery UI"*. That is stale — the analysis node drag & drop is jsPlumb; `draggable`/`droppable` are never called.
- `.tooltip()` calls in our code are **Bootstrap's**, not jQuery UI's — `bootstrap.min.js` loads later in the body and overwrites the jQuery UI one. Leaving `tooltip` out of the build is safe.

**Task:** re-download from https://jqueryui.com/download/ with only `tabs, dialog, datepicker, slider, sortable, accordion, selectable, button, selectmenu` (plus the core/mouse dependencies the downloader auto-selects), using the existing theme so the CSS is unchanged. Expect roughly 255KB -> ~130KB minified.

The site-specific dirs (`runx1_static`, `shariant_static`) only carry the themed CSS + images now, so they need no change.

## Plotly — 3.3MB, and it is not "latest"

`variantgrid/static_files/default_static/js/lib/plotly-latest.min.js` is 3.3MB and its header says:

```
plotly.js v1.53.0
Copyright 2012-2020, Plotly, Inc.
```

The `plotly-latest` alias was frozen at the 1.x line in 2021, so the filename is misleading and we are pinned to a 2020 build. It is loaded by ~20 templates and is the single largest asset in the project.

Our entire usage surface:

- API: `Plotly.newPlot` (47 call sites) and `Plotly.purge` (1)
- Trace types: `bar`, `scatter`, `line`, `box`, `pie`, `heatmap`

**Task:** replace with a partial bundle sized to those trace types (`plotly.js-cartesian-dist` covers bar/scatter/box/heatmap; pie needs either the `finance`/`basic` combination or a small custom bundle via `plotly.js/lib/index-*`). Name the file with its actual version, e.g. `plotly-2.x.y.min.js`, rather than `latest`. Expect 3.3MB -> well under 1MB.

Worth checking the 1.x -> 2.x migration notes for the trace types above when doing this.

## Related

Dead vendored files (old jQuery, superseded DataTables bundles, duplicated jQuery UI JS in the site static dirs, unused `jquery.xcolor`) have already been deleted separately — about 3.2MB.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with uicore/templates/uicore/page/base.html and the vendored jQuery UI directory, then review the listed widget call sites. Inspect variantgrid/static_files/default_static/js/lib/plotly-latest.min.js and the Plotly.newPlot/Plotly.purge usage before checking the 1.x-to-2.x migration notes. Done means the reduced jQuery UI and versioned partial Plotly bundles are shipped, CSS remains unchanged, and the listed widgets and trace types still work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend, performance, web-dev
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.