janela 0.2.1 → 0.4.0

data/app/models/janela/query.rb

@@ -0,0 +1,162 @@
+module Janela
+  # The query behind one pane: a measure, optionally grouped by a dimension,
+  # rendered as a single value, a table or a chart. A query ignores filters on
+  # its own dimension so that clicking a value re-scopes the other panes
+  # rather than collapsing this one to the value clicked. A query read from a
+  # snapshot shows stored results and cannot be clicked at all.
+  class Query
+    RENDERERS = %w[table bar line].freeze
+
+    attr_reader :definition, :measure, :dimension, :renderer, :limit, :filters, :snapshot
+
+    # The helper renders the turbo frame and the controller renders its
+    # replacement, so both derive the id the same way from the same parameters.
+    def self.turbo_frame_id(model:, measure:, by: nil, as: :table, granularity: nil, limit: nil, snapshot: nil)
+      parts = [ "janela", ("snapshot_#{snapshot.id}" if snapshot), model.model_name.route_key, measure, by,
+                (granularity if by), (as unless by.nil?), ("top#{limit}" if by && limit) ]
+      parts.compact.join("_")
+    end
+
+    def initialize(definition:, measure:, dimension: nil, renderer: "table", granularity: nil, limit: nil, filters: {}, snapshot: nil, title: nil)
+      @definition = definition
+      @title = title
+      @measure = measure
+      @dimension = dimension
+      @renderer = renderer.to_s
+      @filters = filters
+      @snapshot = snapshot
+
+      raise BadRequest, "unknown pane renderer #{renderer.inspect}" unless RENDERERS.include?(@renderer)
+      @granularity = Dimension.granularity!(granularity) if granularity.present?
+      @limit = definition.limit!(limit) if limit.present?
+    end
+
+    def model
+      definition.model
+    end
+
+    # Every number this pane renders goes through here, so a table cell, a
+    # single value and a chart tooltip cannot disagree about what the measure
+    # means (ADR 020).
+    def format(value)
+      definition.measure!(measure).format(value)
+    end
+
+    def single_value?
+      dimension.nil?
+    end
+
+    def time?
+      !single_value? && dimension_definition.time?
+    end
+
+    def frozen?
+      !snapshot.nil?
+    end
+
+    def granularity
+      @granularity || (dimension_definition.granularity if time?)
+    end
+
+    # Clicking a category adds one Ransack condition; clicking a time bucket
+    # would need two, and the dashboard toggles one key at a time (ADR 006).
+    # A stored pane is the record of a moment and is not clickable (ADR 009).
+    def clickable?
+      !single_value? && !time? && !frozen?
+    end
+
+    def chart?
+      !single_value? && renderer != "table"
+    end
+
+    def turbo_frame_id
+      self.class.turbo_frame_id(model: model, measure: measure, by: dimension, as: renderer,
+                          granularity: @granularity, limit: limit, snapshot: snapshot)
+    end
+
+    # A pane row may carry its own title, which is the first analyst authored
+    # text the gem renders. It is escaped like any other string (ADR 014).
+    def title
+      return @title if @title.present?
+
+      base = if single_value?
+        measure.to_s.humanize
+      else
+        by = "#{measure.to_s.humanize} by #{dimension.to_s.humanize}"
+        time? ? "#{by} per #{granularity}" : by
+      end
+      frozen? ? "#{base} as of #{snapshot.taken_at.strftime('%-d %b %Y')}" : base
+    end
+
+    # What identifies this pane's data inside a snapshot.
+    def lookup_key
+      { "model" => model.model_name.route_key, "measure" => measure.to_s, "dimension" => dimension&.to_s,
+        "granularity" => granularity&.to_s, "limit" => limit }
+    end
+
+    def result(on: nil)
+      return snapshot.stored_result(self) if frozen?
+
+      definition.query(measure, by: dimension, where: applicable_filters, on: on, granularity: granularity, limit: limit)
+    end
+
+    # The Ransack key and value a click on this label should toggle. A null
+    # group filters with the null predicate, not an empty string (ADR 009 has
+    # no say here; see issue #21).
+    # A click writes _in whether one value is selected or five, so there is one
+    # shape in the controller, the view and a stored snapshot. A hand written
+    # _eq link is still read, since a URL somebody already sent should not stop
+    # working to suit us (ADR 024).
+    def filter_params(label)
+      return [ nil, nil ] unless clickable?
+      return [ "#{ransack_name}_null", "1" ] if label.to_s == Dimension::NONE
+
+      [ "#{ransack_name}_in", label.to_s ]
+    end
+
+    # Every label in this pane paired with the filter it toggles, for a chart
+    # to look up by label when a bar is clicked.
+    def filters_for(labels)
+      return {} unless clickable?
+
+      labels.to_h { |label| [ label.to_s, filter_params(label) ] }
+    end
+
+    # The filter on this pane's own dimension is not applied to its query, but
+    # it is what the user clicked here, so the view highlights it.
+    # Every value of this pane's own dimension the filters name. A set, because
+    # a dimension can hold more than one (ADR 024), and the null group is in it
+    # like any other label.
+    def selected_values
+      return [] unless clickable?
+
+      values = Array(filter("#{ransack_name}_in")) + Array(filter("#{ransack_name}_eq"))
+      values = values.map(&:to_s)
+      values << Dimension::NONE if filter("#{ransack_name}_null").present?
+      values
+    end
+
+    def selected?(label)
+      selected_values.include?(label.to_s)
+    end
+
+    private
+      def filter(key)
+        filters[key] || filters[key.to_sym]
+      end
+
+      def dimension_definition
+        definition.dimension!(dimension)
+      end
+
+      def ransack_name
+        dimension_definition.ransack_name
+      end
+
+      def applicable_filters
+        return filters if single_value? || time?
+
+        filters.reject { |key, _| key.to_s.start_with?(ransack_name) }
+      end
+  end
+end

data/app/models/janela/snapshot.rb

@@ -15,8 +15,8 @@ module Janela
       create!(name: name, taken_at: taken_at, filters: taking.filters, panes: taking.panes)
     end
 
-    def stored_result(pane)
-      key = pane.lookup_key
+    def stored_result(query)
+      key = query.lookup_key
       entry = panes.find { |stored| stored.slice(*key.keys) == key }
       raise NotFound, "snapshot #{id} has no pane #{key.compact.values.join(' ')}" unless entry
 
@@ -32,9 +32,9 @@ module Janela
       end
 
       def pane(model, measure, by: nil, granularity: nil, limit: nil, on: nil)
-        pane = Pane.new(definition: model.janela, measure: measure, dimension: by,
-                        granularity: granularity, limit: limit, filters: filters)
-        panes << pane.lookup_key.merge("result" => plain(pane.result(on: on)))
+        query = Query.new(definition: model.janela, measure: measure, dimension: by,
+                          granularity: granularity, limit: limit, filters: filters)
+        panes << query.lookup_key.merge("result" => plain(query.result(on: on)))
       end
 
       private

data/app/views/janela/frames/_card.html.erb

@@ -0,0 +1,7 @@
+<%= link_to frame_path(frame), class: "janela-card" do %>
+  <span class="janela-card-name"><%= frame.name %></span>
+  <span class="janela-card-meta">
+    <%= t("janela.frames.frame.panes", count: frame.panes.size) %>,
+    <%= t("janela.frames.frame.changed", time: time_ago_in_words(frame.updated_at)) %>
+  </span>
+<% end %>

data/app/views/janela/frames/_form.html.erb

@@ -0,0 +1,23 @@
+<%= form_with model: frame, url: frame.persisted? ? frame_path(frame) : frames_path, class: "janela-form" do |form| %>
+  <%= render "janela/shared/errors", record: frame %>
+
+  <div class="janela-field">
+    <%= form.label :name %>
+    <%= form.text_field :name, required: true %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :columns %>
+    <%= form.select :columns, Janela::Frame::COLUMNS.to_a %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :gap %>
+    <%= form.select :gap, Janela::Frame::GAPS.to_a %>
+  </div>
+
+  <div class="janela-actions">
+    <%= form.submit t("janela.actions.save"), class: "janela-button" %>
+    <%= link_to t("janela.actions.cancel"), frame.persisted? ? frame_path(frame) : frames_path %>
+  </div>
+<% end %>

data/app/views/janela/frames/_frame.html.erb

@@ -0,0 +1,5 @@
+<%= tag.div class: janela_frame_classes(frame),
+            data: { controller: "janela--frame", action: "keydown.esc->janela--frame#clear",
+                    janela__frame_filters_value: filters.to_json } do %>
+  <%= render partial: "janela/frames/pane", collection: frame.panes, as: :pane, locals: { filters: filters, charts: charts } %>
+<% end %>

data/app/views/janela/frames/_pane.html.erb

@@ -0,0 +1,12 @@
+<%# Rendered inline on the first response, so the page is a correct dashboard
+    before any JavaScript runs (ADR 014). Deliberately no src: a turbo frame
+    with both a src and content fetches the src and throws the content away.
+    The frame controller reads data-janela-src and sets src when filters
+    change, which is what makes cross-filtering work from here. %>
+<%# A table needs no JavaScript, so it is what a surface with no chart runtime
+    shows in place of an empty canvas (ADR 018). %>
+<% query = pane.query(filters: filters, renderer: pane.chart? && !charts ? "table" : pane.renderer) %>
+<%= turbo_frame_tag pane.turbo_frame_id, class: "janela-span-#{pane.span}",
+      data: { janela__frame_target: "pane", janela_src: janela_routes.frame_pane_path(pane.frame_id, pane) } do %>
+  <%= render "janela/queries/query", query: query, result: query.result(on: janela_scope(query.model)) %>
+<% end %>

data/app/views/janela/frames/edit.html.erb

@@ -0,0 +1,25 @@
+<% content_for :title, @frame.name %>
+<h1 class="janela-heading"><%= @frame.name %></h1>
+<p class="janela-crumb">
+  <%= link_to Janela::Frame.model_name.human(count: 2), frames_path %>
+  <%= link_to t("janela.actions.view"), frame_path(@frame) %>
+</p>
+
+<%= render "form", frame: @frame %>
+
+<h2 class="janela-subheading"><%= Janela::Pane.model_name.human(count: 2) %></h2>
+
+<% if @frame.panes.any? %>
+  <ul class="janela-list">
+    <%= render partial: "janela/panes/row", collection: @frame.panes, as: :pane, locals: { frame: @frame } %>
+  </ul>
+<% else %>
+  <p class="janela-empty"><%= t(".blank", name: Janela::Pane.model_name.human(count: 2).downcase) %></p>
+<% end %>
+
+<p class="janela-actions">
+  <%= link_to t("janela.actions.add_pane", name: Janela::Pane.model_name.human), new_frame_pane_path(@frame), class: "janela-button" %>
+</p>
+
+<%= button_to t("janela.actions.delete_frame", name: Janela::Frame.model_name.human.downcase), frame_path(@frame),
+      method: :delete, class: "janela-button janela-danger" %>

data/app/views/janela/frames/index.html.erb

@@ -0,0 +1,15 @@
+<% content_for :title, Janela::Frame.model_name.human(count: 2) %>
+<h1 class="janela-heading"><%= Janela::Frame.model_name.human(count: 2) %></h1>
+<p class="janela-actions">
+  <%= link_to t("janela.actions.new_frame", name: Janela::Frame.model_name.human), new_frame_path, class: "janela-button" %>
+</p>
+
+<% if @frames.any? %>
+  <div class="janela-frame janela-cols-3 janela-gap-4">
+    <% @frames.each do |frame| %>
+      <%= render "janela/frames/card", frame: frame %>
+    <% end %>
+  </div>
+<% else %>
+  <p class="janela-empty"><%= t(".blank", name: Janela::Frame.model_name.human(count: 2).downcase) %></p>
+<% end %>

data/app/views/janela/frames/new.html.erb

@@ -0,0 +1,5 @@
+<% content_for :title, t("janela.actions.new_frame", name: Janela::Frame.model_name.human) %>
+<h1 class="janela-heading"><%= t("janela.actions.new_frame", name: Janela::Frame.model_name.human) %></h1>
+<p class="janela-crumb"><%= link_to Janela::Frame.model_name.human(count: 2), frames_path %></p>
+
+<%= render "form", frame: @frame %>

data/app/views/janela/frames/show.html.erb

@@ -0,0 +1,9 @@
+<% content_for :title, @frame.name %>
+<h1 class="janela-heading"><%= @frame.name %></h1>
+<p class="janela-crumb">
+  <%= link_to Janela::Frame.model_name.human(count: 2), frames_path %>
+  <%= link_to t("janela.actions.edit"), edit_frame_path(@frame) %>
+</p>
+
+<%# charts: false because this page loads no chart runtime (ADR 018). %>
+<%= janela_frame @frame, charts: false %>

data/app/views/janela/panes/_form.html.erb

@@ -0,0 +1,58 @@
+<%
+  # Step two: every option comes from this model's janela block, so a choice
+  # that would be rejected is not offered in the first place.
+  measures = definition.measures.keys.map { |name| [ name.to_s.humanize, name ] }
+  dimensions = definition.dimensions.keys.map { |name| [ name.to_s.humanize, name ] }
+  time_dimensions = definition.dimensions.values.select(&:time?).map { |dimension| dimension.name.to_s.humanize }
+  chosen = definition.dimensions[pane.dimension.presence&.to_sym]
+  granularity_applies = pane.dimension.present? ? chosen&.time? : time_dimensions.any?
+%>
+<%= form_with model: pane, url: pane.persisted? ? frame_pane_path(frame, pane) : frame_panes_path(frame), class: "janela-form" do |form| %>
+  <%= render "janela/shared/errors", record: pane %>
+  <%= form.hidden_field :model %>
+
+  <p class="janela-muted"><%= Janela::Pane.human_attribute_name(:model) %>: <%= definition.model.model_name.human %></p>
+
+  <div class="janela-field">
+    <%= form.label :measure %>
+    <%= form.select :measure, measures %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :dimension %>
+    <%= form.select :dimension, dimensions, include_blank: t("janela.panes.no_dimension") %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :renderer %>
+    <%= form.select :renderer, Janela::Query::RENDERERS.map { |renderer| [ t("janela.renderers.#{renderer}"), renderer ] } %>
+  </div>
+
+  <% if granularity_applies %>
+    <div class="janela-field">
+      <%= form.label :granularity %>
+      <%= form.select :granularity, Janela::Dimension::GRANULARITIES.map { |value| [ value.humanize, value ] }, include_blank: t("janela.panes.declared_granularity") %>
+      <span class="janela-hint"><%= t("janela.panes.granularity_hint", dimensions: time_dimensions.to_sentence) %></span>
+    </div>
+  <% end %>
+
+  <div class="janela-field">
+    <%= form.label :limit %>
+    <%= form.select :limit, Janela::Pane::OFFERED_LIMITS, include_blank: t("janela.panes.no_limit") %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :span %>
+    <%= form.select :span, Janela::Pane::SPANS.to_a %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :title %>
+    <%= form.text_field :title, placeholder: t("janela.panes.title_placeholder") %>
+  </div>
+
+  <div class="janela-actions">
+    <%= form.submit t("janela.actions.save"), class: "janela-button" %>
+    <%= link_to t("janela.actions.cancel"), edit_frame_path(frame) %>
+  </div>
+<% end %>

data/app/views/janela/panes/_row.html.erb

@@ -0,0 +1,12 @@
+<li class="janela-list-row">
+  <span class="janela-list-name"><%= pane.label %></span>
+  <span class="janela-card-meta"><%= t("janela.panes.summary", renderer: pane.renderer, span: pane.span) %></span>
+  <span class="janela-actions">
+    <%= button_to t("janela.actions.move_up"), move_up_frame_pane_path(frame, pane), method: :patch,
+          class: "janela-button", disabled: pane == frame.panes.first %>
+    <%= button_to t("janela.actions.move_down"), move_down_frame_pane_path(frame, pane), method: :patch,
+          class: "janela-button", disabled: pane == frame.panes.last %>
+    <%= link_to t("janela.actions.edit"), edit_frame_pane_path(frame, pane) %>
+    <%= button_to t("janela.actions.delete"), frame_pane_path(frame, pane), method: :delete, class: "janela-button" %>
+  </span>
+</li>

data/app/views/janela/panes/edit.html.erb

@@ -0,0 +1,5 @@
+<% content_for :title, @pane.label %>
+<h1 class="janela-heading"><%= @pane.label %></h1>
+<p class="janela-crumb"><%= link_to @frame.name, edit_frame_path(@frame) %></p>
+
+<%= render "form", frame: @frame, pane: @pane, definition: @definition %>

data/app/views/janela/panes/new.html.erb

@@ -0,0 +1,22 @@
+<% content_for :title, t("janela.actions.add_pane", name: Janela::Pane.model_name.human) %>
+<h1 class="janela-heading"><%= t("janela.actions.add_pane", name: Janela::Pane.model_name.human) %></h1>
+<p class="janela-crumb"><%= link_to @frame.name, edit_frame_path(@frame) %></p>
+
+<% if @definition %>
+  <%= render "form", frame: @frame, pane: @pane, definition: @definition %>
+<% else %>
+  <%# Step one of two. The engine's pages run no JavaScript, so one select
+      cannot refill another: picking the model first is what lets step two
+      offer only measures and dimensions that model declares (ADR 018). %>
+  <%= form_with url: new_frame_pane_path(@frame), method: :get, class: "janela-form" do |form| %>
+    <div class="janela-field">
+      <%= form.label :model, Janela::Pane.human_attribute_name(:model) %>
+      <%= form.select :model, Janela.definitions.map { |definition| [ definition.model.model_name.human, definition.model.model_name.route_key ] } %>
+    </div>
+
+    <div class="janela-actions">
+      <%= form.submit t("janela.actions.continue"), class: "janela-button" %>
+      <%= link_to t("janela.actions.cancel"), edit_frame_path(@frame) %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/janela/panes/show.html.erb

@@ -1,47 +1,4 @@
-<% content_for :title, @pane.title %>
-<%= turbo_frame_tag @pane.frame_id do %>
-  <% if @pane.single_value? %>
-    <p class="janela-pane janela-value">
-      <span class="janela-value-label"><%= @pane.title %></span>
-      <strong class="janela-value-number"><%= number_with_delimiter(@result || 0) %></strong>
-    </p>
-  <% elsif @result.empty? %>
-    <p class="janela-pane janela-empty"><%= @pane.title %>: no data</p>
-  <% elsif @pane.chart? %>
-    <canvas class="janela-pane janela-chart"
-            data-controller="janela--chart"
-            data-action="janela--chart:toggle->janela--dashboard#toggle"
-            data-janela--chart-type-value="<%= @pane.renderer %>"
-            data-janela--chart-title-value="<%= @pane.title %>"
-            data-janela--chart-selected-value="<%= @pane.selected_value %>"
-            data-janela--chart-labels-value="<%= @result.keys.to_json %>"
-            data-janela--chart-values-value="<%= @result.values.map(&:to_f).to_json %>"
-            data-janela--chart-filters-value="<%= @pane.filters_for(@result.keys).to_json %>"
-            role="img" aria-label="<%= @pane.title %>"></canvas>
-  <% else %>
-    <table class="janela-pane">
-      <caption><%= @pane.title %></caption>
-      <tbody>
-        <% @result.each do |label, measured| %>
-          <% key, value = @pane.filter_params(label) %>
-          <tr>
-            <td>
-              <% if key %>
-                <button type="button"
-                        aria-pressed="<%= label.to_s == @pane.selected_value.to_s && @pane.selected_value.present? %>"
-                        data-action="janela--dashboard#toggle"
-                        data-janela--dashboard-key-param="<%= key %>"
-                        data-janela--dashboard-value-param="<%= value %>">
-                  <%= label %>
-                </button>
-              <% else %>
-                <span><%= label %></span>
-              <% end %>
-            </td>
-            <td><%= number_with_delimiter(measured) %></td>
-          </tr>
-        <% end %>
-      </tbody>
-    </table>
-  <% end %>
+<% content_for :title, @query.title %>
+<%= turbo_frame_tag @pane.turbo_frame_id do %>
+  <%= render "janela/queries/query", query: @query, result: @result %>
 <% end %>

data/app/views/janela/queries/_query.html.erb

@@ -0,0 +1,47 @@
+<%# One pane's content, without its turbo frame: the same markup whether the
+    pane came from a URL, a row, or a frame rendered inline. %>
+<% if query.single_value? %>
+  <p class="janela-pane janela-value">
+    <span class="janela-value-label"><%= query.title %></span>
+    <strong class="janela-value-number"><%= query.format(result || 0) %></strong>
+  </p>
+<% elsif result.empty? %>
+  <p class="janela-pane janela-empty"><%= query.title %>: no data</p>
+<% elsif query.chart? %>
+  <canvas class="janela-pane janela-chart"
+          data-controller="janela--chart"
+          data-action="janela--chart:toggle->janela--frame#toggle"
+          data-janela--chart-type-value="<%= query.renderer %>"
+          data-janela--chart-title-value="<%= query.title %>"
+          data-janela--chart-selected-value="<%= query.selected_values.to_json %>"
+          data-janela--chart-labels-value="<%= result.keys.to_json %>"
+          data-janela--chart-values-value="<%= result.values.map(&:to_f).to_json %>"
+          data-janela--chart-formatted-value="<%= result.values.map { |measured| query.format(measured) }.to_json %>"
+          data-janela--chart-filters-value="<%= query.filters_for(result.keys).to_json %>"
+          role="img" aria-label="<%= query.title %>"></canvas>
+<% else %>
+  <table class="janela-pane">
+    <caption><%= query.title %></caption>
+    <tbody>
+      <% result.each do |label, measured| %>
+        <% key, value = query.filter_params(label) %>
+        <tr>
+          <td>
+            <% if key %>
+              <button type="button"
+                      aria-pressed="<%= query.selected?(label) %>"
+                      data-action="janela--frame#toggle"
+                      data-janela--frame-key-param="<%= key %>"
+                      data-janela--frame-value-param="<%= value %>">
+                <%= label %>
+              </button>
+            <% else %>
+              <span><%= label %></span>
+            <% end %>
+          </td>
+          <td><%= query.format(measured) %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

data/app/views/janela/queries/show.html.erb

@@ -0,0 +1,4 @@
+<% content_for :title, @query.title %>
+<%= turbo_frame_tag @query.turbo_frame_id do %>
+  <%= render "janela/queries/query", query: @query, result: @result %>
+<% end %>

data/app/views/janela/shared/_errors.html.erb

@@ -0,0 +1,7 @@
+<% if record.errors.any? %>
+  <ul class="janela-errors">
+    <% record.errors.full_messages.each do |message| %>
+      <li><%= message %></li>
+    <% end %>
+  </ul>
+<% end %>

data/app/views/layouts/janela/application.html.erb

@@ -1,7 +1,11 @@
-<%# A pane opened directly, outside a Turbo Frame. Deliberately minimal: the
-    engine cannot know the host's asset names or bundler, and a host layout's
-    route helpers do not resolve inside an isolated engine (ADR 011). A host
-    can override this file, or point the controller at its own layout. %>
+<%# Janela's own pages and a pane opened directly, outside a Turbo Frame.
+    Deliberately minimal: the engine cannot know the host's asset names or
+    bundler, and a host layout's route helpers do not resolve inside an
+    isolated engine (ADR 011). It loads Janela's own stylesheet, which the gem
+    ships and can therefore name, plus a theme if one is set, and no JavaScript: Turbo and Stimulus come
+    from the host, so these pages are static dashboards rather than broken
+    ones. A host can override this file, or point the controller at its own
+    layout. %>
 <!DOCTYPE html>
 <html>
   <head>
@@ -10,9 +14,22 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "janela" %>
+    <%= stylesheet_link_tag Janela.theme if Janela.theme.present? %>
     <%= yield :head %>
   </head>
-  <body>
+  <body class="janela-page">
+    <%# Janela's own pages are reached from somewhere, and until ADR 022 the
+        engine could not name a host route to get back to. It can now, so the
+        layout stops being a dead end. Only when the host has a root, and
+        never a guess at what to call the place it goes. %>
+    <% if main_app.respond_to?(:root_path) %>
+      <p class="janela-exit"><%= link_to t("janela.actions.home"), main_app.root_path %></p>
+    <% end %>
+
+    <% flash.each do |_kind, message| %>
+      <p class="janela-flash"><%= message %></p>
+    <% end %>
     <%= yield %>
   </body>
 </html>

data/config/importmap.rb

@@ -1,5 +1,6 @@
-pin "janela/dashboard_controller", to: "janela/dashboard_controller.js"
+pin "janela/frame_controller", to: "janela/frame_controller.js"
 pin "janela/chart_controller", to: "janela/chart_controller.js"
+pin "janela/vitral_controller", to: "janela/vitral_controller.js"
 
 # Hosts that already pin their own Chart.js keep it.
 pin "chart.js", to: "janela/vendor/chart.js" unless packages.key?("chart.js")

data/config/locales/en.yml

@@ -0,0 +1,65 @@
+en:
+  activerecord:
+    models:
+      janela/frame:
+        one: Frame
+        other: Frames
+      janela/pane:
+        one: Pane
+        other: Panes
+    attributes:
+      janela/frame:
+        name: Name
+        columns: Columns
+        gap: Gap
+      janela/pane:
+        model: Model
+        measure: Measure
+        dimension: Dimension
+        renderer: Renderer
+        granularity: Granularity
+        limit: Rows
+        span: Width
+        title: Title
+  janela:
+    actions:
+      add_pane: "Add a %{name}"
+      cancel: Cancel
+      continue: Continue
+      delete: Remove
+      delete_frame: "Delete this %{name}"
+      edit: Edit
+      home: "Back to the site"
+      move_down: Down
+      move_up: Up
+      new_frame: "New %{name}"
+      save: Save
+      view: View
+    frames:
+      created: Created.
+      destroyed: Deleted.
+      updated: Saved.
+      index:
+        blank: "No %{name} yet."
+      edit:
+        blank: "No %{name} yet."
+      frame:
+        panes:
+          zero: no panes
+          one: 1 pane
+          other: "%{count} panes"
+        changed: "changed %{time} ago"
+    panes:
+      created: Added.
+      destroyed: Removed.
+      updated: Saved.
+      declared_granularity: As the model declares it
+      granularity_hint: "Applies to %{dimensions} only."
+      no_dimension: "No breakdown, one number"
+      no_limit: Every row
+      summary: "%{renderer}, %{span} wide"
+      title_placeholder: Janela writes one if you leave this blank
+    renderers:
+      bar: Bar chart
+      line: Line chart
+      table: Table

data/config/routes.rb

@@ -1,9 +1,22 @@
 Janela::Engine.routes.draw do
   segment = /[a-z0-9_]+/
 
-  get "snapshots/:snapshot_id/:model/:measure(/:dimension)", to: "snapshot_panes#show", as: :snapshot_pane,
+  # Frames sit at the mount root and are drawn before the pane grammar, with a
+  # numeric constraint: no model's route key is all digits, so /3 is a frame
+  # and /orders/revenue is a pane, with nothing to disambiguate (ADR 014).
+  resources :frames, path: "", constraints: { id: /\d+/ } do
+    # No index: a frame's own edit page is the list of its panes.
+    resources :panes, except: :index, constraints: { id: /\d+/, frame_id: /\d+/ } do
+      member do
+        patch :move_up
+        patch :move_down
+      end
+    end
+  end
+
+  get "snapshots/:snapshot_id/:model/:measure(/:dimension)", to: "snapshot_queries#show", as: :snapshot_pane,
     constraints: { snapshot_id: /\d+/, model: segment, measure: segment, dimension: segment }
 
-  get ":model/:measure(/:dimension)", to: "panes#show", as: :pane,
+  get ":model/:measure(/:dimension)", to: "queries#show", as: :pane,
     constraints: { model: segment, measure: segment, dimension: segment }
 end