Keep live plots refresh cadence and layout steady

openpilot/starpilot/galaxy/tests/test_plots.mjs

@@ -93,6 +93,19 @@ await live.reply(3, payload(3))
 assert.equal(live.states.at(-1).status, 'idle')
 assert.equal(live.states.at(-1).history.length, 0)
 
+const delayed = fixture()
+delayed.feed.start()
+delayed.advance(500)
+await delayed.reply(0, payload(1))
+delayed.advance(250)
+assert.equal(delayed.requests.length, 2, 'HTTP latency must not be added to the polling interval')
+delayed.advance(500)
+await delayed.reply(1, payload(2))
+assert.equal(delayed.states.at(-1).status, 'current')
+assert.ok(!delayed.states.some(state => state.status === 'stale'), 'healthy delayed responses must not flicker stale')
+delayed.feed.stop()
+assert.match(PlotsPage.template, /class="gx-plots__status" role="status"/)
+
 const stale = fixture()
 stale.feed.start()
 await stale.reply(0, payload(1))

openpilot/starpilot/galaxy/web/css/galaxy.css

@@ -741,6 +741,8 @@ ul { list-style: none; margin: 0; padding: 0; }
 .gx-card-grid .gx-card { margin-bottom: 0; }
 
 .gx-plots__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
+.gx-plots__status { flex: 0 0 100%; min-height: 2.8em; display: flex; align-items: center; }
+.gx-plots__hint { min-height: 2.8em; }
 .gx-plots__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 1rem; }
 .gx-plots__panel { min-width: 0; --card-inset: clamp(.85rem, 2vw, 1.25rem); padding: var(--card-inset); }
 .gx-plots__panel svg { display: block; width: 100%; height: auto; min-height: 8rem; background: rgba(127,127,127,.06); border-radius: .6rem; }

openpilot/starpilot/galaxy/web/js/plots.js

@@ -164,7 +164,7 @@ export class PlotsFeed {
       if (generation === this.generation) {
         if (this.deadline !== null) this.cancel(this.deadline); this.deadline = null
         this.request = null
-        if (this.active && !this.paused) this.timer = this.later(() => { this.timer = null; this.load() }, POLL_MS)
+        if (this.active && !this.paused) this.timer = this.later(() => { this.timer = null; this.load() }, Math.max(0, POLL_MS - (this.now() - start)))
       }
     }
   }
@@ -228,7 +228,7 @@ export const PlotsPage = {
       <template v-else>
         <div class="gx-plots__toolbar"><GxIconButton :label="paused ? 'Resume live plots' : 'Pause live plots'" :icon="paused ? 'bi-play-fill' : 'bi-pause-fill'" @click="togglePause" />
           <button type="button" class="gx-btn gx-btn--tonal" :aria-pressed="advanced" @click="advanced=!advanced">{{ advanced ? 'Hide' : 'Show' }} controller terms</button>
-          <span role="status">{{ paused ? 'Paused' : data?.bootStabilizing ? 'Starting vehicle systems' : status === 'current' ? 'Live' : status === 'stale' ? 'Reconnecting · last received values' : status === 'unavailable' ? 'Unavailable' : 'Connecting' }}</span></div>
+          <span class="gx-plots__status" role="status">{{ paused ? 'Paused' : data?.bootStabilizing ? 'Starting vehicle systems' : status === 'current' ? 'Live' : status === 'stale' ? 'Reconnecting · last received values' : status === 'unavailable' ? 'Unavailable' : 'Connecting' }}</span></div>
         <p class="gx-note gx-plots__hint" role="status">{{ !paused && error ? error : 'Missing samples leave a gap in the graph.' }}</p>
         <div class="gx-plots__grid">
           <section class="gx-card gx-plots__panel"><div class="gx-section__header"><i class="bi bi-graph-up" aria-hidden="true"></i><span class="gx-section__title">Lateral Acceleration</span></div><p class="gx-note">Desired / actual · m/s² · {{ source(data?.values?.lateralSource) }}</p>

prebuilt.json

@@ -1 +1 @@
-{"protected_inventory_sha256": "e6d524747c44864330accade49930b568273458b2105da0e4e9d5c2b97de7fb1", "schema_version": 1}
+{"protected_inventory_sha256": "d07062ca2c894ec10ed8275a03960d435bcc4462fe1a622267353da99759723e", "schema_version": 1}