developmentseed / developmentseed/manywidgets

Improve layout flexibility

Open
#18 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Ran into some issues being able to get a more expressive full-screen layout. AI / Claude notes for things that can be improved with the grid / layout:

# Layout improvement notes

Collected while doing a design pass on `docs/examples/fullscreen-dashboard.ipynb`
(a controls-rail + lonboard-map + chart layout inside `Fullscreen`). Observations
only — none of this is implemented. Ordered roughly by impact.

## 1. Grid: equal columns only

`grid/widget.py` has `columns = traitlets.Int(2)` and `grid/src/index.ts` hard-codes
`repeat(N, minmax(0, 1fr))`. There is no way to express the most common dashboard
shape — a narrow control rail beside a wide map (`320px 1fr`), or a cell spanning
two columns. The workaround in the example (put the chart in the rail so the 50/50
split doesn't leave a dead half-column) works but shouldn't be necessary.

Smallest fix: widen `columns` to `Union([Int(), Unicode()])`; when it's a string,
pass it straight through to `gridTemplateColumns`. ~4 lines across widget.py and
index.ts. Spans would need a per-child wrapper or a `spans=[...]` trait — bigger
API question.

## 2. Chart: fixed pixel width only

`Chart.width` is `Int` (px). `.manywidgets-chart` has `max-width: 100%`, so a chart
can shrink but never fill a wider container. The example exploits this by
oversizing (`width=1100` → the column caps it), which works because Chart.js is
`responsive: true` — but it's a non-obvious trick. Supporting `width=None` (or
`"100%"`) meaning fill-container would make charts compose into layouts naturally.
Same question applies to `height` eventually (fill a fixed-height cell).

## 3. Row/Column: no justify, no per-child sizing

`row/`, `column/` expose only `gap` and `align`. Cells are `flex: 0 1 auto` with no
way to set grow/basis per child, so a `Row` collapses children without intrinsic
width (lonboard maps — already noted in `docs/examples/layout.ipynb`). A `justify`
trait and some per-child flex control (`Row(a, b, flex=[0, 1])`?) would cover most
gaps; until then Grid is the only reliable side-by-side container.

## 4. FilterBinder chip / LayerToggle theming

- `FilterBinder` renders a status chip styled via inline `el.style.cssText`
(`lonboard/filter_binder/src/index.ts`) — unoverridable, no `visible`/compact
trait, and it must stay mounted for static export. In a polished dashboard it
reads as debug output. A `show_status=False` mode that renders (say) a 0-height
element while keeping the JS alive would fix it.
- `lonboard/layer_toggle` never calls `applyThemeVars` and hardcodes its colors
and sizes, so it ignores `theme=`/`style=` and the `--mw-toggle-*` tokens the
core `Toggle` honors. Visually inconsistent next to themed controls.

## 5. Fullscreen: alt layout can't opt into fill-height

Only the no-alt slot path gets the stretch rules (`.mwfs__content > .mwfs__slot`);
a `fullscreen=` layout is `height: auto` and the panel scrolls. Fine as a default,
but a dashboard usually wants "fill the screen, no scroll" — some opt-in (or a
documented `height="70vh"`-style recipe, which is what the example uses) would
help. Also the overlay's `padding: 24px` is hardcoded in `fullscreen/style.css`
where the panel padding is already tokenized — could be a `--mw-*` token too.

## 6. Fixed widget margins

Nearly every widget wrapper carries `margin: 10px 0` in its own style.css.
Containers can only add space (`gap`), never remove it, so tight layouts bottom
out at ~20px rhythm. A `--mw-widget-margin` token (or containers zeroing child
margins and owning spacing via gap) would give real control.

## Aside: what DOES compose well today

`style=` on any themable widget cascades `--mw-*` tokens to descendants across
shadow boundaries — e.g. `Fullscreen(..., style={"--mw-control-max-width": "100%"})`
retunes every control card inside the overlay in one place. This is a genuinely
good lever; worth documenting more prominently in the theming guide.

---- end AI notes -----

@dzole0311 I think some of the flexbox stuff, etc. is beyond me to know exactly what we should do here. Most of the AI notes make sense, but would like to get a sanity check if these seem sensible to do or if we should re-look at some of the grid / layout stuff in a more fundamental way.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the layout implementation in grid/widget.py and grid/src/index.ts, then review the related fullscreen, row/column, chart, FilterBinder, and layer_toggle files named in the notes. First get a maintainer decision on which proposal is in scope; done should mean one selected layout improvement is specified and implemented without taking on the other API questions.

Written by the indexing model from the issue text.

Assessment

Tech stack
python, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.