WIP: Add to current image page

python/lsst/ts/rubintv/background/currentpoller.py

@@ -415,11 +415,17 @@ async def get_current_metadata(self, location_name: str, camera: Camera) -> dict
         return self._metadata.get(loc_cam, {})
 
     async def get_current_channel_event(
-        self, location_name: str, camera_name: str, channel_name: str
+        self, location_name: str, camera: Camera, channel_name: str
     ) -> Event | None:
-        loc_cam = f"{location_name}/{camera_name}/{channel_name}"
+        loc_cam = f"{location_name}/{camera.name}/{channel_name}"
         # explicitly return None if none
         event = self._most_recent_events.get(loc_cam, None)
+        # inject latest metadata row
+        if event:
+            md = await self.get_current_metadata(location_name, camera)
+            last_row_key = max(md.keys(), key=lambda k: int(k))
+            last_row = md[last_row_key]
+            event.other_data = {"last_metadata_row": last_row}
         return event
 
     async def get_current_night_report(
@@ -487,7 +493,7 @@ async def get_latest_data(
 
             case Service.CHANNEL:
                 event = await self.get_current_channel_event(
-                    location.name, camera.name, channel_name
+                    location.name, camera, channel_name
                 )
                 yield MessageType.CHANNEL_EVENT, event.__dict__ if event else None
 

python/lsst/ts/rubintv/handlers/api.py

@@ -144,7 +144,7 @@ async def get_current_channel_event(
     if camera.online:
         current_poller: CurrentPoller = request.app.state.current_poller
         event = await current_poller.get_current_channel_event(
-            location_name, camera_name, channel_name
+            location_name, camera, channel_name
         )
         if not event:
             historical: HistoricalPoller = request.app.state.historical

python/lsst/ts/rubintv/templates/single_event.jinja

@@ -30,6 +30,7 @@
     </h2>
     <nav id="prev-next-nav">
     </nav>
+    <div id="time-since-clock"></div>
   </div>
     {% set img_url = url_for('event_image',
                     location_name=location.name,

src/js/components/Clock.js

@@ -38,15 +38,14 @@ function padZero(num) {
 export function TimeSinceLastImageClock(props) {
   const [isOnline, setIsOnline] = useState(true)
   const [time, setTime] = useState(new Date())
-  const { metadata, camera } = props
+  const { metadata, camera, event } = props
 
   useEffect(() => {
     const timerId = setInterval(() => {
       setTime(new Date())
     }, 1000)
 
     function handleWSStateChangeEvent(event) {
-      console.log(event.detail)
       const { online } = event.detail
       setIsOnline(online)
     }
@@ -58,10 +57,19 @@ export function TimeSinceLastImageClock(props) {
     }
   }, [])
 
-  const lastSeq = Object.entries(metadata)
-    .map(([seq]) => parseInt(seq))
-    .pop()
-  const row = metadata[lastSeq]
+  let row
+  if (metadata) {
+    const lastSeq = Object.entries(metadata)
+      .map(([seq]) => parseInt(seq))
+      .pop()
+    row = metadata[lastSeq]
+  }
+  if (event && event.other_data) {
+    row = event.other_data.metadata_row
+  }
+  if (!row) {
+    return
+  }
   const toSum = ["Date begin", "Exposure time"]
   let error, timeElapsed
   if (

src/js/pages/current.js

@@ -1,20 +1,27 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+import { TimeSinceLastImageClock } from "../components/Clock"
 import { _getById, _elWithAttrs } from "../modules/utils"
 import { WebsocketClient } from "../modules/ws-service-client"
 ;(function () {
   const initEvent = window.APP_DATA.initEvent || null
   if (!initEvent) {
     return
   }
-  const location = window.APP_DATA.locationName
-  const camera = initEvent.camera_name
+  const { locationName, camera = {}, imgURL } = window.APP_DATA
   const channel = initEvent.channel_name
-  let baseImgURL = window.APP_DATA.imgURL.split("/").slice(0, -1).join("/")
+  let baseImgURL = imgURL.split("/").slice(0, -1).join("/")
   if (!baseImgURL.endsWith("/")) {
     baseImgURL += "/"
   }
   // eslint-disable-next-line no-unused-vars
   const ws = new WebsocketClient()
-  ws.subscribe("service", "channel", location, camera, channel)
+  ws.subscribe("service", "channel", locationName, camera.name, channel)
+
+  const timeSinceRoot = createRoot(_getById("time-since-clock"))
+  timeSinceRoot.render(
+    <TimeSinceLastImageClock event={initEvent} camera={camera} />
+  )
 
   window.addEventListener("channel", (message) => {
     const newEvent = message.detail.data