janela 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 507d6baa4984a11605225ee2f97d8795f606e1d1b4739bb7d63567702d6a76c5
-  data.tar.gz: b12856e553a97feed8c12c56f78774addd360a603b8fc56cb81b01ee6167fe34
+  metadata.gz: c7fbc539879d1f11c15536c9305299ab9a754add8e26bb443cb582ea236823be
+  data.tar.gz: 150f1292e5c2789cb378e6438c91fd94b766e10088f4daa4aea445ba63341a1b
 SHA512:
-  metadata.gz: 65c9dd8f4ea0efc927fe648e52bd519ef7485d9cfda48bc200f4371cc33d8c844d5a496b9de9af7396b256306b5549614fe3235a1742774c118fc26b3b3e6eac
-  data.tar.gz: 70cac5044f03d17ebf4bd56f5407005815c5945f0979b869d93116d26b4c97d636dd53b18f973d1917efe54ce040d66014bd6e717d9135d66caea1d0a094389c
+  metadata.gz: a6d3e5390adf6ac5882d621abc014986f0da17cadad2bca3ba3404d9d2f0d4c744130d7163be7271ddfc70c1404250d1a9a3aa09f274d88a44be57c93c1ac8d4
+  data.tar.gz: 3d7d77e7022225e40c4c13f150818cfd646b0383400bbc59590014caa877b61894f6a1d0b4f056b4d438a1738b6c1489ead2d4ca60bb58caa9fa7554a15b8637

data/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0] - 2026-09-17
+
+### Added
+
+- `docs/naming.md`, "Naming Things Is Hard": why Janela's words are uncommon but conceivable, the anatomy of the window, which words stay ordinary and why, how a host puts its own words in front of its users, and a checklist for naming anything new. Ships in the gem.
+- The vitral lattice leans toward the pointer with its outer edge pinned, drifts at two depths as the page scrolls, and reads its lead colour from `--vitral-lattice-ink`, so the live and static lattices cannot disagree.
+- More than one value can be selected in a dimension. Ctrl or Cmd click adds a value and takes it out again while the rest stay; a plain click still selects one and clears the dimension when it was the only one. A chart highlights every selected bar and answers the same modifier. Escape clears the frame's filters. All of it works from the keyboard, because a value is already a real button and a browser puts the same modifier on the click it makes from Enter (ADR 024, #35, #36).
+- `vitral.css`, an optional theme that makes a dashboard a stained glass window: each pane holds one of five colours, dark leading runs between them and the light comes from behind. Separate from `janela.css` on purpose, which stays structure while this is taste (ADR 023). Link it, put `class="vitral"` on the element that carries the light, and use `vitral-pane`, `vitral-panes` and `vitral-button` on your own markup to match. Retheme it from the `--vitral-*` custom properties rather than by forking it.
+- `Janela.theme`, naming the stylesheet Janela's own pages load on top of `janela.css`. Unset by default, so nothing changes for a host that has its own look.
+- `janela/vitral_controller`, optional and separate again: it draws the leadlight live and every node leans toward the pointer. Reduced motion, reduced transparency and increased contrast each get a still, solid window instead.
+
+### Changed
+
+- The copyright holder is Retail Tasker. The licence is still MIT, and earlier releases keep the notice they shipped with.
+- A click writes Ransack's `_in` rather than `_eq`, one value or five, so there is one shape in the controller, the view and a stored snapshot. A link already shared with `_eq` keeps working and still reads as selected. `Query#selected_value` is now `selected_values` and returns an array, which matters only to a host that overrode a pane view (ADR 024).
+- The null group is exclusive within its dimension. Ransack ands its conditions, so `(none)` together with a value asks for rows that are both null and not, and returns nothing at all. Selecting either now clears the other rather than rendering an empty dashboard that looks like a bug.
+
+### Fixed
+
+- A pane could show numbers for filters nobody had asked for. A pane's first load is lazy, so a request that began before a click could land after it, and Turbo renders whatever arrives and leaves the URL it fetched on the frame. Janela now keeps its own record of what it asked each pane for, and cancels any request for anything else before it can land, rather than trying to correct a wrong render afterwards. A page opened from a filtered link also no longer reloads every pane the moment it connects, which was both wasted work and the most common source of the stale request (#33).
+- Janela's own pages were a dead end: nothing on them linked back to the application they belong to. They now carry one link to the host's root, when the host has one, labelled from i18n like every other word the engine renders. This was not possible before host route helpers resolved inside the engine (ADR 011, ADR 022).
+- A host's own route helpers work inside Janela's controllers and views. `isolate_namespace` pointed every helper at the engine's routes, so host code that runs there and generates a URL raised: an authentication concern redirecting to `new_session_path`, a `rescue_from`, an `after_action`. An unauthenticated visitor got a 500 instead of a sign-in page. Janela now forwards exactly the helpers the engine does not define itself, so nothing of Janela's can be shadowed by a host route of the same name, and `main_app.` still says either unambiguously. Polymorphic `url_for(@record)` has no name to forward and still needs the prefix (ADR 022, #23).
+- The README explained this as something to do "if your app authenticates per controller", which was wrong about the cause. The trigger is generating a URL inside the engine, whenever authentication runs.
+
 ## [0.3.0] - 2026-09-16
 
 ### Added
@@ -98,6 +122,7 @@ First alpha, installed from GitHub for testing in a single host application.
 - Only models that declare a `janela` block are addressable over HTTP.
 - ADRs 001 to 004 in `docs/decisions/`, shipped inside the gem.
 
+[0.4.0]: https://github.com/retail-tasker/janela/releases/tag/v0.4.0
 [0.3.0]: https://github.com/retail-tasker/janela/releases/tag/v0.3.0
 [0.2.1]: https://github.com/retail-tasker/janela/releases/tag/v0.2.1
 [0.2.0]: https://github.com/retail-tasker/janela/releases/tag/v0.2.0

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2026 Jay Killeen
+Copyright (c) 2026 Retail Tasker
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -2,6 +2,8 @@
 
 PowerBI-style dashboards and cross-filtering slicers, native to Rails and ActiveRecord. Define a dashboard on your models and associations, get a live, sliceable view for internal use, or publish the same definition as a locked, static view for an external audience.
 
+**[See it running](https://demo.janela.winontheshelf.com)**, with a year of demo orders. Click any value and the rest of the dashboard re-scopes. The demo is this repository's own test fixture with seed data, so what you click is what ships.
+
 ## First principle
 
 Janela is a PowerBI-style library built on Ruby and Stimulus, meant to drop onto any Ruby on Rails application. No JS framework, no build step of its own, no separate frontend app. Just a gem you add to an existing Rails app's Gemfile and two Stimulus controllers that ship with it.
@@ -25,7 +27,7 @@ Janela is an alpha on [rubygems.org](https://rubygems.org/gems/janela). It has t
 
 ```ruby
 # Gemfile
-gem "janela", "~> 0.3"
+gem "janela", "~> 0.4"
 ```
 
 ```ruby
@@ -69,6 +71,41 @@ Include the stylesheet in whichever layout renders dashboards. It is small, it i
 <%= stylesheet_link_tag "janela" %>
 ```
 
+### Vitral, the optional theme
+
+A *vitral* is a stained glass window, which is what it makes of a dashboard: each pane holds its own colour, dark leading runs between them, and the light comes from behind. It is a second stylesheet, not a replacement, and it is entirely optional. `janela.css` is structure and `vitral.css` is taste, because taste is the first thing you will want to change (ADR 023):
+
+```erb
+<%= stylesheet_link_tag "janela" %>
+<%= stylesheet_link_tag "vitral" %>
+```
+
+```erb
+<body class="vitral">
+```
+
+The class is what carries the light, so nothing is repainted until you ask. Three public classes let your own page join in: `vitral-pane` puts a sheet of the same glass on any element, `vitral-panes` on a container cycles its children through the five colours, and `vitral-button` is a control made of it. Everything else is a custom property, so `--vitral-came`, `--vitral-glass` and the five `--vitral-pane-*` hues retheme the lot from your own stylesheet without touching the gem's.
+
+For Janela's own pages, name the theme once and the engine's layout wears it:
+
+```ruby
+# config/initializers/janela.rb
+Janela.theme = "vitral"
+```
+
+The leadlight can also answer the pointer, with every node leaning toward the cursor. That part is a Stimulus controller and therefore optional twice over, since Janela's own pages load no JavaScript at all (ADR 011):
+
+```js
+import VitralController from "@retail-tasker/janela/vitral_controller"  // or "janela/vitral_controller" on importmap
+application.register("vitral", VitralController)
+```
+
+```erb
+<body class="vitral" data-controller="vitral">
+```
+
+Anyone who has asked for reduced motion, reduced transparency or more contrast gets a still, solid window instead. A browser with no `backdrop-filter` gets plain panels.
+
 Requires Rails 8.0+ and Ruby 3.3+. If your app is on Rails 8.1.x with the `json` gem at 3.x, encrypted cookie reads raise inside ActiveSupport and every Turbo Frame request will 500 in the browser; pin `gem "json", "< 3"` until Rails ships the fix.
 
 ## Usage
@@ -237,7 +274,9 @@ A host with no tenancy defines nothing, gets a nil owner, and is correct: nothin
 
 ### Filters and clicks
 
-The dashboard's filters live in the page URL as the same `q[...]` parameters, so a reload keeps them and a filtered dashboard is a link you can send: `/reports/orders?q[status_eq]=paid` renders filtered before any JavaScript runs. A pane ignores filters on its own dimension, so clicking a value re-scopes the rest of the dashboard rather than collapsing the pane you clicked. Time panes re-scope with the others but are not click sources yet; drill-down is the next decision. The selected value is marked `aria-pressed="true"` on tables and drawn solid against faded siblings on charts, so it can be styled and read. A pane with no matching rows renders a `.janela-empty` paragraph. A group whose dimension is null is labelled `(none)` and filters with Ransack's null predicate rather than an empty string. Only models that declare a `janela` block can be requested over HTTP.
+The dashboard's filters live in the page URL as the same `q[...]` parameters, so a reload keeps them and a filtered dashboard is a link you can send: `/reports/orders?q[status_in][]=paid` renders filtered before any JavaScript runs. A pane ignores filters on its own dimension, so clicking a value re-scopes the rest of the dashboard rather than collapsing the pane you clicked. Time panes re-scope with the others but are not click sources yet; drill-down is the next decision. Every selected value is marked `aria-pressed="true"` on tables and drawn solid against faded siblings on charts, so it can be styled and read.
+
+**Selecting more than one.** Ctrl or Cmd click adds a value to the selection and takes it out again, leaving the rest alone, which is how every list in every operating system already behaves. A plain click selects one value and replaces whatever was selected, or clears the dimension if that value was the only one. It works the same on a chart. All of it works from the keyboard too: a value is a real `<button>`, so Enter is a click and Ctrl or Cmd with Enter adds. `Escape` clears the frame's filters, and those are the only two keys Janela binds, both only while focus is inside the frame, because a single letter belongs to your application and to any text field on the page (ADR 024). A pane with no matching rows renders a `.janela-empty` paragraph. A group whose dimension is null is labelled `(none)` and filters with Ransack's null predicate rather than an empty string. Only models that declare a `janela` block can be requested over HTTP.
 
 ### Pane URLs
 
@@ -314,12 +353,14 @@ Janela's controllers inherit from your `ApplicationController`, so they are exac
 # config/initializers/janela.rb
 Rails.application.config.to_prepare do
   Janela::ApplicationController.prepend_before_action do
-    redirect_to main_app.new_session_path unless user_signed_in?
+    redirect_to new_session_path unless user_signed_in?
   end
 end
 ```
 
-Two details matter. It is *prepended* so it runs before any filter on your `ApplicationController` that assumes a signed-in user (tenant lookups, audit logging). It redirects through `main_app` because Janela is an isolated engine, so a bare `new_session_path` inside it resolves against Janela's own routes and fails.
+It is *prepended* so it runs before any filter on your `ApplicationController` that assumes a signed-in user (tenant lookups, audit logging).
+
+Your own route helpers work in there. Janela is an isolated engine, so a bare `new_session_path` would normally resolve against Janela's routes and raise, and this bites any host code that generates a URL while inside the engine: an authentication concern, a `rescue_from` that redirects, an `after_action`. Janela forwards the route helpers it does not define itself to your application, so they behave as they do everywhere else (ADR 022). Two things to know. A name Janela also uses means Janela's in here, and `main_app.frames_path` says yours. And `url_for(@record)` resolves polymorphically with no name to forward, so that one still needs `main_app.`.
 
 Scoping is automatic when you use Pundit: `Janela::ApplicationController` calls `policy_scope(model)` if your `ApplicationController` defines it, and falls back to `model.all` otherwise. Every model you put on a dashboard needs a policy with a `Scope`, and so do `Janela::Frame` and `Janela::Snapshot`: frames, pane rows and stored panes are all read through the scope, never around it. `test/dummy/app/controllers/application_controller.rb` is the smallest honest example of the wiring.
 
@@ -335,7 +376,7 @@ work at all, which is enough to navigate on the day you install it:
 /insights/3    one frame
 ```
 
-Both go through your `policy_scope`, so a frame another tenant owns is a 404.
+Both go through your `policy_scope`, so a frame another tenant owns is a 404. Each page carries a link back to your application's root, so they are not a dead end; rename it in your own locale file under `janela.actions.home`, or override the engine's layout if you want your whole navigation there.
 
 These pages load Janela's own stylesheet and nothing of yours, because the gem
 cannot know your asset names or bundler. Two consequences worth knowing. They
@@ -394,7 +435,7 @@ Deliberately out of scope: natural-language query, a separate data warehouse, a
 
 ## Status
 
-**v0.3.0 alpha.** The measures/dimensions DSL, time dimensions, cross-filtering, bar and line charts, pane URLs, shareable dashboard URLs, snapshots, database-backed frames and the engine's own pages for reading and editing them work and are covered by unit and real-browser tests. Not yet built: a visual editor, drill-down on time panes, other chart types. Open work is in [GitHub Issues](https://github.com/retail-tasker/janela/issues).
+**v0.4.0 alpha.** The measures/dimensions DSL, time dimensions, cross-filtering with multi-selection, bar and line charts, pane URLs, shareable dashboard URLs, snapshots, database-backed frames, the engine's own pages for reading and editing them and the optional vitral theme work and are covered by unit and real-browser tests. Not yet built: a visual editor, drill-down on time panes, other chart types. Open work is in [GitHub Issues](https://github.com/retail-tasker/janela/issues).
 
 ## Development
 

data/UPGRADING.md

@@ -12,6 +12,42 @@ bin/rails janela:doctor
 
 It reads your application and lists what still needs changing.
 
+## 0.3.0 to 0.4.0
+
+Selecting more than one value in a dimension (ADR 024). Most hosts do
+nothing: the gesture, the predicate and the keys all arrive on their
+own. Two things need you only if you have reached into Janela's own
+markup.
+
+**1. `selected_value` is now `selected_values`.**
+
+Only if you overrode a pane view. It returns an array, because a
+dimension can now hold more than one value, and the null group is in
+it like any other label:
+
+```erb
+- <% if label.to_s == query.selected_value.to_s %>
++ <% if query.selected?(label) %>
+```
+
+**2. A click now writes `_in` rather than `_eq`.**
+
+A shared link is `?q[status_in][]=paid` instead of `?q[status_eq]=paid`.
+Links you sent before keep working, because Ransack reads both and
+Janela still marks an `_eq` value as selected. You only need to act if
+something of yours parses Janela's URLs or asserts on them, such as a
+test:
+
+```ruby
+- assert_includes page.current_url, "q[status_eq]=paid"
++ assert_includes page.current_url, "q[status_in][]=paid"
+```
+
+**Nothing else changed.** Ctrl or Cmd click adds a value to a
+selection, Escape clears the frame's filters, and both work from the
+keyboard because a value is a real button and Enter carries the same
+modifier. A chart highlights every selected bar.
+
 ## 0.2.1 to 0.3.0
 
 Two things arrive together. Janela's own words settle on frames and
@@ -50,7 +86,7 @@ On importmap the path is `janela/frame_controller` rather than
 path resolves:
 
 ```bash
-yarn add github:retail-tasker/janela#v0.3.0   # or bump your version range
+yarn add github:retail-tasker/janela#v0.4.0   # or bump your version range
 ```
 
 **3. Rename the helper that wraps your panes.**

data/app/assets/javascripts/janela/chart_controller.js

@@ -9,7 +9,7 @@ Chart.register(...registerables)
 // chart is destroyed on disconnect and rebuilt on connect.
 export default class extends Controller {
   static values = { type: String, labels: Array, values: Array, filters: Object, title: String,
-                    selected: String, formatted: Array }
+                    selected: Array, formatted: Array }
 
   connect() {
     this.chart = new Chart(this.element, {
@@ -33,21 +33,27 @@ export default class extends Controller {
           // and disagreeing with the cell beside it.
           tooltip: { callbacks: { label: (item) => this.formattedValue[item.dataIndex] ?? item.formattedValue } }
         },
-        onClick: (_event, elements) => {
+        onClick: (event, elements) => {
           if (elements.length === 0) return
           const label = this.labelsValue[elements[0].index]
           const [key, value] = this.filtersValue[String(label)] || []
-          if (key) this.dispatch("toggle", { detail: { key, value } })
+          // A custom event carries no modifier flags of its own, so the
+          // gesture is read here and passed on (ADR 024).
+          const additive = event.native?.ctrlKey === true || event.native?.metaKey === true
+          if (key) this.dispatch("toggle", { detail: { key, value, additive } })
         }
       }
     })
   }
 
-  // With nothing selected every bar is solid; with a selection only that bar is.
+  // With nothing selected every bar is solid; with a selection only the
+  // selected ones are, and there can be more than one of them.
   colours() {
-    const selected = this.selectedValue
+    const selected = this.selectedValue.map(String)
     return this.labelsValue.map((label) =>
-      !selected || label === selected ? "rgba(54, 162, 235, 0.9)" : "rgba(54, 162, 235, 0.25)"
+      selected.length === 0 || selected.includes(String(label))
+        ? "rgba(54, 162, 235, 0.9)"
+        : "rgba(54, 162, 235, 0.25)"
     )
   }
 

data/app/assets/javascripts/janela/frame_controller.js

@@ -7,37 +7,149 @@ export default class extends Controller {
   static targets = ["pane"]
   static values = { filters: Object }
 
+  initialize() {
+    this.supersede = this.supersede.bind(this)
+  }
+
+  // A pane is a turbo frame that outlives its own contents, so the listener is
+  // attached once per frame rather than once per render.
+  paneTargetConnected(pane) {
+    pane.addEventListener("turbo:before-fetch-request", this.supersede)
+    // What the server already rendered this pane for is what Janela has asked
+    // for, so a later change is measured against it rather than against
+    // nothing.
+    pane.dataset.janelaAsked ||= this.urlFor(pane).href
+  }
+
+  paneTargetDisconnected(pane) {
+    pane.removeEventListener("turbo:before-fetch-request", this.supersede)
+    pane.janelaRequest?.abort()
+  }
+
+  // The request for what Janela last asked for wins, and any other is
+  // cancelled before it can land. A pane's load can be in flight when a click
+  // asks it for something else, and Turbo renders whatever arrives, so an
+  // older answer could overwrite a newer one and leave the pane showing
+  // numbers for filters nobody has any more. Neither arrival order nor start
+  // order settles it: a lazy load can begin after a click and still be for the
+  // old address. What was asked for is the only honest rule (#33).
+  supersede(event) {
+    const pane = event.currentTarget
+    const options = event.detail?.fetchOptions
+    const url = event.detail?.url
+    if (!options || !url) return
+
+    const request = new AbortController()
+    options.signal?.addEventListener("abort", () => request.abort(), { once: true })
+    options.signal = request.signal
+
+    const asked = pane.dataset.janelaAsked
+    if (asked && new URL(url, window.location.origin).href !== asked) {
+      // Stale before it started. Cancel it, and make sure the pane still ends
+      // up fetching what was asked for, since this may have been its only load.
+      request.abort()
+      // Bounded, so an address spelled differently from the one Janela built
+      // cannot set a pane correcting itself forever.
+      const corrections = pane.janelaCorrectedFor === asked ? (pane.janelaCorrections || 0) : 0
+      if ((!pane.janelaRequest || pane.janelaRequestFor !== asked) && corrections < 2) {
+        pane.janelaCorrectedFor = asked
+        pane.janelaCorrections = corrections + 1
+        queueMicrotask(() => { pane.src === asked ? pane.reload() : (pane.src = asked) })
+      }
+      return
+    }
+
+    pane.janelaRequest?.abort()
+    pane.janelaRequest = request
+    pane.janelaRequestFor = asked
+    request.signal.addEventListener("abort", () => {
+      if (pane.janelaRequest === request) pane.janelaRequest = null
+    }, { once: true })
+  }
+
   // Table buttons send key/value as Stimulus action params; charts dispatch a
-  // custom event carrying them in detail. Either way it is one filter toggle.
+  // custom event carrying them in detail. Either way it is one value being
+  // added to or taken out of a selection.
+  //
+  // A plain click selects that value alone, or clears the dimension if it was
+  // the only one selected. Ctrl or Cmd adds and removes while the rest stay,
+  // which is how every list in every operating system already behaves. The
+  // same event carries the same flags when Enter is pressed on a focused
+  // value, so the keyboard needs nothing of its own (ADR 024).
   toggle(event) {
     const { key, value } = { ...event.detail, ...event.params }
+    const additive = event.ctrlKey || event.metaKey || event.detail?.additive === true
     const filters = { ...this.filtersValue }
+    const selected = this.valuesFor(filters, key).includes(String(value))
 
-    if (filters[key] === String(value)) {
-      delete filters[key]
+    // The null group asks for rows that have nothing there, so it cannot be
+    // combined with a value: Ransack ands its conditions, and the pair matches
+    // no row at all. It is exclusive within its dimension instead.
+    this.clearDimension(filters, key)
+
+    if (key.endsWith("_null")) {
+      if (!selected) filters[key] = "1"
     } else {
-      filters[key] = String(value)
+      let values = additive ? this.valuesFor(this.filtersValue, key) : []
+      values = selected ? values.filter((each) => each !== String(value)) : [ ...values, String(value) ]
+      if (values.length) filters[key] = [ ...new Set(values) ].sort()
     }
 
     this.filtersValue = filters
   }
 
   clear() {
-    this.filtersValue = {}
+    if (Object.keys(this.filtersValue).length) this.filtersValue = {}
+  }
+
+  // Whatever is selected for one key, as a set of strings. A filter arrives as
+  // an array from a click and as a string from a hand written _eq link.
+  valuesFor(filters, key) {
+    const held = filters[key]
+    if (held === undefined) return []
+
+    return (Array.isArray(held) ? held : [ held ]).map(String)
+  }
+
+  // Every filter Janela itself writes for the same dimension: the values, the
+  // null group, and an _eq that a shared link may still carry. A host's own
+  // q[...] filters use other predicates and are left alone (ADR 008).
+  clearDimension(filters, key) {
+    const base = key.replace(/_(in|null|eq)$/, "")
+    for (const suffix of [ "in", "null", "eq" ]) delete filters[`${base}_${suffix}`]
   }
 
-  // Stimulus calls this as the controller connects, handing back the value it
-  // just read from the attribute the server rendered, so nothing has changed
-  // yet. A frame rendered from rows is already showing the right numbers
-  // inline, and a src assigned here would make Turbo fetch every pane and
+  // Stimulus calls this as the controller starts, with the filters the server
+  // rendered, so nothing has changed yet. A frame is already showing the right
+  // numbers, and a src assigned here would make Turbo fetch every pane and
   // throw that first render away (ADR 014).
-  filtersValueChanged(filters, previous) {
-    if (previous === undefined || JSON.stringify(filters) === JSON.stringify(previous)) return
+  //
+  // Janela keeps its own record of what it last applied rather than trusting
+  // the previous value it is handed. On a page opened from a filtered link,
+  // Stimulus passes the default empty object as the previous value, not
+  // nothing, so a check on that alone reloaded every pane on connect, and the
+  // redundant load could land after a click and undo it (#33).
+  filtersValueChanged(filters) {
+    const applied = JSON.stringify(filters)
+    if (this.applied === undefined || this.applied === applied) {
+      this.applied = applied
+      return
+    }
+    this.applied = applied
 
     this.paneTargets.forEach((pane) => {
-      const url = new URL(pane.dataset.janelaSrc, window.location.origin)
-      this.writeFilters(url)
-      if (pane.src !== url.href) pane.src = url.href
+      const url = this.urlFor(pane)
+
+      // Janela's own record of what it last asked this pane for, rather than
+      // the pane's src. A lazy load that began before a click lands after it,
+      // and Turbo then puts the URL it fetched back on the frame while leaving
+      // the newer content in place, so src stops describing what is on screen.
+      // Reading it meant the next change that happened to match was skipped
+      // and the pane kept numbers nobody had asked for (#33).
+      if (pane.dataset.janelaAsked === url.href) return
+
+      pane.dataset.janelaAsked = url.href
+      pane.src = url.href
     })
 
     this.syncPageUrl()
@@ -55,11 +167,22 @@ export default class extends Controller {
     if (url.href !== window.location.href) history.replaceState(history.state, "", url)
   }
 
-  // Sorted so the browser serialises filters the same way the server does and
-  // an unchanged src is never reloaded.
+  urlFor(pane) {
+    const url = new URL(pane.dataset.janelaSrc, window.location.origin)
+    this.writeFilters(url)
+    return url
+  }
+
+  // Sorted, keys and values both, so the browser serialises a selection the
+  // same way every time and an unchanged src is never reloaded.
   writeFilters(url) {
     for (const key of Object.keys(this.filtersValue).sort()) {
-      url.searchParams.set(`q[${key}]`, this.filtersValue[key])
+      const held = this.filtersValue[key]
+      if (Array.isArray(held)) {
+        for (const value of [ ...held ].sort()) url.searchParams.append(`q[${key}][]`, value)
+      } else {
+        url.searchParams.set(`q[${key}]`, held)
+      }
     }
   }
 }