websocket-text-relay 1.0.0

package/src/ui/js/components/ServerStatus.js

@@ -0,0 +1,31 @@
+const { exportDeps, drawText } = window.__WTR__
+
+const valueTextClass = "server_status_value"
+const offlineTextClass = "server_status_offline"
+
+class ServerStatus {
+  constructor ({parentNode}) {
+    this.parentNode = parentNode
+    this.draw()
+  }
+
+  draw () {
+    this.parentNode.innerHTML = ""
+    drawText({x: 0, y: .85, text: "WS Server PID", className: "server_status_label", parentNode: this.parentNode})
+    this.valueElement = drawText({x: 0, y: .748, text: "138324", parentNode: this.parentNode})
+    this.offlineElement = drawText({x: 0, y: .748, text: "OFFLINE", className:offlineTextClass, parentNode: this.parentNode})
+  }
+
+  update (pid) {
+    if (pid == null) {
+      this.valueElement.classList.remove(valueTextClass)
+      this.offlineElement.classList.add(offlineTextClass)
+    } else {
+      this.valueElement.innerHTML = pid
+      this.valueElement.classList.add(valueTextClass)
+      this.offlineElement.classList.remove(offlineTextClass)
+    }
+  }
+}
+
+exportDeps({ServerStatus})

package/src/ui/js/components/SessionLabels.js

@@ -0,0 +1,171 @@
+const { exportDeps, polarToCartesian, coordsToPathData, drawLinearPath, drawCircle, drawText, drawSvgElement, drawToolTip } = window.__WTR__
+
+// a value with a colored circle and tooltip
+const drawSummaryValue  = ({x, y, label, circleClass, parentNode}) => {
+  const tooltipWrapperGroup = drawSvgElement("g", undefined, "tooltip_wrapper_group", parentNode)
+  drawCircle({cx: x, cy: y - 0.0032, r: summaryCircleRadius, className: circleClass, parentNode: tooltipWrapperGroup})
+  drawToolTip({x: x, y: y - 0.0032, text: label, parentNode: tooltipWrapperGroup})
+  return drawText({x: x + summaryCircleRadius * 2, y: y, dominantBaseline: "middle", text: "0", className: "summary_text_value", parentNode: tooltipWrapperGroup})
+}
+
+// similar to summary value, but with an update function that automatically handles moving the circle on the left as the text size changes
+const drawRightAlignedSummaryValue  = ({x, y, label, circleClass, parentNode}) => {
+  const tooltipWrapperGroup = drawSvgElement("g", undefined, "tooltip_wrapper_group", parentNode)
+  drawToolTip({x: x, y: y - 0.0032, text: label, parentNode: tooltipWrapperGroup})
+  const textElement =  drawText({x: x + summaryCircleRadius * 2, y: y, dominantBaseline: "middle", text: "0", textAnchor: "end", className: "summary_text_value", parentNode: tooltipWrapperGroup})
+  const xDiff = textElement.getBBox().width
+  const labelCircle = drawCircle({cx: x - xDiff, cy: y - 0.0032, r: summaryCircleRadius, className: circleClass, parentNode: tooltipWrapperGroup})
+  const update = (value) => {
+    textElement.innerHTML = value
+    const xDiff = textElement.getBBox().width
+    labelCircle.setAttribute("cx", x - xDiff)
+  }
+  return {textElement, update}
+}
+
+const underlinePadding = 0.01
+const summaryCircleRadius = 0.0140
+const summaryLeftPadding = 0.03
+const summaryValueSpacing = 0.065
+const editorSummaryPadding = 0.025
+
+const addPadding = ({x, y, height, width}, horizontalPadding, verticalPadding) => {
+  if (verticalPadding == null) { verticalPadding = horizontalPadding }
+  x -= horizontalPadding
+  width += horizontalPadding * 2
+  y -= verticalPadding
+  height += verticalPadding * 2
+  return {x, y, height, width}
+}
+
+const labelLineDistance = 0.07
+
+class ClientLabel {
+  constructor ({wedgeCenterAngle, wedgeCenterRadius, parentNode}) {
+    this.parentNode = parentNode
+    this.wedgeCenterAngle = wedgeCenterAngle
+    this.wedgeCenterRadius = wedgeCenterRadius
+    this.wedgeCenter = polarToCartesian(this.wedgeCenterAngle, this.wedgeCenterRadius)
+    this.draw()
+  }
+
+  draw () {
+    const textStart = polarToCartesian(this.wedgeCenterAngle, this.wedgeCenterRadius + labelLineDistance)
+
+    this.topNameElement = drawText({x: textStart[0], y: textStart[1] - 0.06 - underlinePadding / 2, text: "", className: ["wedge_identifier", "small_text"], parentNode: this.parentNode})
+    this.nameTextElement = drawText({x: textStart[0], y: textStart[1] - 0.017 - underlinePadding / 2, text: ".", className: "wedge_identifier", parentNode: this.parentNode})
+
+    drawCircle({cx: this.wedgeCenter[0], cy: this.wedgeCenter[1], r: 0.01, className: "test_circle", parentNode: this.parentNode})
+
+    const textBbox = addPadding(this.nameTextElement.getBBox(), 0.00, underlinePadding)
+    const underlineCoords = [[this.wedgeCenter[0], this.wedgeCenter[1]], [textBbox.x, textBbox.y + textBbox.height], [textBbox.x + textBbox.width, textBbox.y + textBbox.height]]
+    this.underlinePath = drawLinearPath({coords: underlineCoords, className: "test_line", parentNode: this.parentNode})
+
+    const summaryMidY = textBbox.y + textBbox.height + underlinePadding + summaryCircleRadius / 2 + 0.02
+    const summaryStartX = textBbox.x + summaryLeftPadding
+    this.watchedCountElement = drawSummaryValue({x: summaryStartX, y: summaryMidY, label: "Watched Files", circleClass: "summary_watched_circle", parentNode: this.parentNode})
+    const watchedCountBbox = this.watchedCountElement.getBBox()
+
+    const xDiff = summaryValueSpacing + watchedCountBbox.width
+    this.activeCountTranslateWrapper = drawSvgElement("g", {transform: `translate(${xDiff}, 0)`}, undefined, this.parentNode)
+    this.activeCountElement = drawSummaryValue({x: summaryStartX, y: summaryMidY, label: "Active Files", circleClass: "summary_active_circle", parentNode: this.activeCountTranslateWrapper})
+  }
+
+  update (client) {
+    let {name} = client
+    if (!name || name.length === 0) {
+      name = "."
+    }
+
+    if (name.length > 14) {
+      const halfIndex = Math.floor(name.length / 2)
+      const nameFirstHalf = name.substring(0, halfIndex)
+      const nameSecondHalf = name.substring(halfIndex, name.length)
+      this.topNameElement.innerHTML = nameFirstHalf
+      this.nameTextElement.innerHTML = nameSecondHalf
+      this.nameTextElement.classList.add("small_text")
+    } else {
+      this.topNameElement.innerHTML = ""
+      this.nameTextElement.classList.remove("small_text")
+      this.nameTextElement.innerHTML = name
+    }
+
+    const textBbox = addPadding(this.nameTextElement.getBBox(), 0.00, underlinePadding)
+    const underlineCoords = [[this.wedgeCenter[0], this.wedgeCenter[1]], [textBbox.x, textBbox.y + textBbox.height], [textBbox.x + textBbox.width, textBbox.y + textBbox.height]]
+    const newUnderlinePathData = coordsToPathData(underlineCoords)
+    this.underlinePath.setAttribute("d", newUnderlinePathData)
+
+    this.watchedCountElement.innerHTML = client.watchCount
+    this.activeCountElement.innerHTML = client.activeWatchCount
+
+    const xDiff = summaryValueSpacing + this.watchedCountElement.getBBox().width
+    this.activeCountTranslateWrapper.setAttribute("transform", `translate(${xDiff}, 0)`)
+  }
+}
+
+class EditorLabel {
+  constructor ({wedgeCenterAngle, wedgeCenterRadius, parentNode}) {
+    this.parentNode = parentNode
+    this.wedgeCenterAngle = wedgeCenterAngle
+    this.wedgeCenterRadius = wedgeCenterRadius
+    this.wedgeCenter = polarToCartesian(this.wedgeCenterAngle, this.wedgeCenterRadius)
+    this.draw()
+  }
+
+  draw () {
+    const textStart = polarToCartesian(this.wedgeCenterAngle, this.wedgeCenterRadius + labelLineDistance)
+
+    this.topNameElement = drawText({x: textStart[0], y: textStart[1] - 0.06 - underlinePadding / 2, text: "", textAnchor: "end", className: ["wedge_identifier", "small_text"], parentNode: this.parentNode})
+    this.nameTextElement = drawText({x: textStart[0], y: textStart[1] - 0.017 - underlinePadding / 2, text: ".", textAnchor: "end", className: "wedge_identifier", parentNode: this.parentNode})
+
+    drawCircle({cx: this.wedgeCenter[0], cy: this.wedgeCenter[1], r: 0.01, className: "test_circle", parentNode: this.parentNode})
+
+    const textBbox = addPadding(this.nameTextElement.getBBox(), 0.00, underlinePadding)
+    const underlineCoords = [[this.wedgeCenter[0], this.wedgeCenter[1]], [textBbox.x, textBbox.y + textBbox.height], [textBbox.x + textBbox.width, textBbox.y + textBbox.height]]
+    this.underlinePath = drawLinearPath({coords: underlineCoords, className: "test_line", parentNode: this.parentNode})
+
+    const summaryStartX = textBbox.x + textBbox.width - summaryLeftPadding
+    const summaryMidY = textBbox.y + textBbox.height + underlinePadding * 3 + summaryCircleRadius / 2
+
+    this.activeCountSummaryValue = drawRightAlignedSummaryValue({x: summaryStartX, y: summaryMidY, label: "Active Files", circleClass: "summary_active_circle", parentNode: this.parentNode})
+    const xDiff = this.activeCountSummaryValue.textElement.getBBox().width + summaryCircleRadius + editorSummaryPadding * 2
+    this.openFilesTransformGroup = drawSvgElement('g', {transform: `translate(${-xDiff})`}, undefined, this.parentNode)
+    this.openCountSummaryValue = drawRightAlignedSummaryValue({x: summaryStartX, y: summaryMidY, label: "Open Files", circleClass: "summary_watched_circle", parentNode: this.openFilesTransformGroup})
+  }
+
+  update (editor) {
+    let {name} = editor
+    if (!name || name.length === 0) {
+      name = "."
+    }
+
+    if (editor.isServer) {
+      name = "* " + name
+    }
+
+    if (name.length > 14) {
+      const halfIndex = Math.floor(name.length / 2)
+      const nameFirstHalf = name.substring(0, halfIndex)
+      const nameSecondHalf = name.substring(halfIndex, name.length)
+      this.topNameElement.innerHTML = nameFirstHalf
+      this.nameTextElement.innerHTML = nameSecondHalf
+      this.nameTextElement.classList.add("small_text")
+    } else {
+      this.topNameElement.innerHTML = ""
+      this.nameTextElement.classList.remove("small_text")
+      this.nameTextElement.innerHTML = name
+    }
+
+    const textBbox = addPadding(this.nameTextElement.getBBox(), 0.00, underlinePadding)
+    const underlineCoords = [[this.wedgeCenter[0], this.wedgeCenter[1]], [textBbox.x + textBbox.width, textBbox.y + textBbox.height], [textBbox.x, textBbox.y + textBbox.height]]
+    const newUnderlinePathData = coordsToPathData(underlineCoords)
+    this.underlinePath.setAttribute("d", newUnderlinePathData)
+
+    this.activeCountSummaryValue.update(editor.activeOpenCount)
+    this.openCountSummaryValue.update(editor.openCount)
+    const xDiff = this.activeCountSummaryValue.textElement.getBBox().width + summaryCircleRadius + editorSummaryPadding * 2
+    this.openFilesTransformGroup.setAttribute("transform", `translate(${-xDiff})`)
+  }
+}
+
+exportDeps({ClientLabel, EditorLabel})

package/src/ui/js/components/SessionWedges.js

@@ -0,0 +1,107 @@
+const { exportDeps, drawSvgElement, drawWedge } = window.__WTR__
+
+const numWedges = 5
+const wedgeSpacing = 0.01
+const wedgeWidth = 0.08
+
+const flashAnimationKeyframes = [{fill: "#fff"}, {fill: "var(--wedge-active-color)"}]
+const flashAnimationProps = {duration: 250, easing: "ease-out", iterations: 1}
+
+const createSessionSummary = (sessions) => {
+  const summary = {
+    name: `${sessions.length - numWedges + 1} others...`,
+    watchCount: 0,
+    activeWatchCount: 0,
+    openCount: 0,
+    activeOpenCount: 0
+
+  }
+
+  for (let i = numWedges - 1; i < sessions.length; i++) {
+    const session = sessions[i]
+    summary.watchCount += session.watchCount
+    summary.activeWatchCount += session.activeWatchCount
+    summary.openCount += session.openCount
+    summary.activeOpenCount += session.activeOpenCount
+  }
+
+  return summary
+}
+
+class SessionWedges {
+  constructor ({outerRingRadius, outerArcSize, direction = 1, Label, parentNode}) {
+    this.outerRingRadius = outerRingRadius
+    this.outerArcSize = outerArcSize
+    this.parentNode = parentNode
+    this.direction = direction
+    this.Label = Label
+    this.draw()
+  }
+
+  draw () {
+    this.parentNode.innerHTML = ""
+    this.wedgeNodes = []
+    const totalStartAngle = 0.25 + this.direction * this.outerArcSize / 2
+    const totalAngleDelta = 0.5 - this.outerArcSize - wedgeSpacing
+    const wedgeAngleDelta = (totalAngleDelta / numWedges) - wedgeSpacing
+    const innerRadius = this.outerRingRadius - wedgeWidth / 2
+    for (let i = 0; i < numWedges; i++) {
+      const group = drawSvgElement("g", undefined, "single_wedge_group", this.parentNode)
+
+      let startAngle = totalStartAngle + this.direction * (i + 1) * wedgeSpacing + this.direction * i * wedgeAngleDelta
+      if (this.direction === -1) {
+        startAngle -= wedgeAngleDelta
+      }
+
+      const wedge = drawWedge({startAngle, angleDelta: wedgeAngleDelta, innerRadius, radiusDelta: wedgeWidth, className: "wedge_node", parentNode: group})
+
+      const wedgeCenterAngle = startAngle + wedgeAngleDelta / 2
+      const label = new this.Label({wedgeCenterAngle, wedgeCenterRadius: this.outerRingRadius, parentNode: group})
+
+      this.wedgeNodes.push({group, label, wedge})
+    }
+    this.drawCalled = true
+  }
+
+  update (sessions) {
+    this.sessionsData = sessions
+    for (let i = 0; i < numWedges; i++) {
+      const {group, label} = this.wedgeNodes[i]
+      group.classList.remove('active', 'online')
+      let session = sessions[i]
+      if (!session) {
+        continue
+      }
+
+      if (i === numWedges - 1 && sessions.length > numWedges) {
+        session = createSessionSummary(sessions)
+      }
+
+      if (session.activeWatchCount > 0 || session.activeOpenCount > 0) {
+        group.classList.add('active')
+      } else {
+        group.classList.add('online')
+      }
+
+      label.update(session)
+    }
+  }
+
+  triggerActivity (sessionIds) {
+    const sessions = this.sessionsData
+    if (!sessions) { return }
+    for (let i = 0; i < numWedges; i++) {
+      const {wedge} = this.wedgeNodes[i]
+      const session = sessions[i]
+      if (!session) {
+        continue
+      }
+
+      if ((typeof sessionIds === 'number' && session.id === sessionIds) || sessionIds.has && sessionIds.has(session.id)) {
+        wedge.animate(flashAnimationKeyframes, flashAnimationProps)
+      }
+    }
+  }
+}
+
+exportDeps({SessionWedges})

package/src/ui/js/components/StatusRing.js

@@ -0,0 +1,42 @@
+const { exportDeps, drawCircle, drawWedge } = window.__WTR__
+
+class StatusRing {
+  constructor ({innerRingRadius, outerRingRadius, outerArcSize, parentNode}) {
+    this.innerRingRadius = innerRingRadius
+    this.outerRingRadius = outerRingRadius
+    this.outerArcSize = outerArcSize
+    this.parentNode = parentNode
+    this.draw()
+  }
+
+  draw () {
+    this.parentNode.innerHTML = ""
+    this.parentNode.classList.remove(...this.parentNode.classList)
+    this.currentClassName = 'offline'
+    this.parentNode.classList.add(this.currentClassName)
+
+    drawCircle({ cx: 0, cy: 0, r: this.innerRingRadius, parentNode: this.parentNode })
+    drawWedge({startAngle: 0.25 - this.outerArcSize / 2, angleDelta: this.outerArcSize, innerRadius: this.outerRingRadius, radiusDelta: 0, parentNode: this.parentNode})
+    drawWedge({startAngle: 0.75 - this.outerArcSize / 2, angleDelta: this.outerArcSize, innerRadius: this.outerRingRadius, radiusDelta: 0, parentNode: this.parentNode})
+  }
+
+  update (data) {
+    const hasActiveClient = data.clients.some(client => client.activeWatchCount > 0)
+    let newClassName
+    if (hasActiveClient) {
+      newClassName = "active"
+    } else if (data.clients.length > 0) {
+      newClassName = "online"
+    } else {
+      newClassName = "offline"
+    }
+
+    if (newClassName != this.currentClassName) {
+      this.parentNode.classList.remove(this.currentClassName)
+      this.parentNode.classList.add(newClassName)
+      this.currentClassName = newClassName
+    }
+  }
+}
+
+exportDeps({StatusRing})

package/src/ui/js/components/grids.js

@@ -0,0 +1,29 @@
+const { exportDeps, drawLine, drawCircle, drawPolarLine } = window.__WTR__
+
+const gridCellWidth = 0.08
+const maxGrid = 1
+
+const drawGrid = (parentNode) => {
+  for (let i = 0; i < maxGrid; i += gridCellWidth) {
+    const className = i === 0 ? "grid_axis" : "grid_line"
+    drawLine({x1: -1, y1: i, x2: 1, y2: i, className, parentNode})
+    drawLine({x1: -1, y1: -i, x2: 1, y2: -i, className, parentNode})
+    drawLine({x1: i, y1: -1, x2: i, y2: 1, className, parentNode})
+    drawLine({x1: -i, y1: -1, x2: -i, y2: 1, className, parentNode})
+  }
+}
+
+const radiusDiff = 0.04
+const angleDiff = 0.025
+
+const drawPolarGrid = (parentNode) => {
+  for (let r = 0; r <= 1.0001; r += radiusDiff) {
+    drawCircle({cx: 0, cy: 0, r, className: "grid_line", parentNode})
+  }
+
+  for (let angle = 0; angle < 1; angle += angleDiff) {
+    drawPolarLine({startAngle: 0, startRadius: 0, endAngle: angle, endRadius: 1, className: "grid_line", parentNode})
+  }
+}
+
+exportDeps({drawGrid, drawPolarGrid})

package/src/ui/js/index.js

@@ -0,0 +1,117 @@
+import { WebsocketClient } from "./util/WebsocketClient.js"
+import "./util/DependencyManager.js"
+
+const { cleanupEventHandlers, statusDataEmitter } = window.__WTR__
+
+const PORT = 38378
+
+const FILE_PREFIX = "websocket-text-relay/src/ui/"
+const CSS_FILE = "css/main.css"
+const cssEndsWith = FILE_PREFIX + CSS_FILE
+
+const MAIN_JS_FILE = "js/main.js"
+const mainJsEndsWith = FILE_PREFIX + MAIN_JS_FILE
+
+const jsFiles = [
+  "js/util/constants.js",
+  "js/util/drawing.js",
+  "js/components/grids.js",
+  "js/components/HeaderSummary.js",
+  "js/components/StatusRing.js",
+  "js/components/SessionWedges.js",
+  "js/components/SessionLabels.js",
+  "js/components/ActivityTimeseriesGraph.js",
+  "js/components/ServerStatus.js",
+  MAIN_JS_FILE
+]
+
+const svgRoot = document.getElementById('svg_root')
+const cssElement = document.getElementById('main_style')
+
+const ws = new WebsocketClient({port: PORT})
+
+const handleCss = (contents) => {
+  cssElement.innerText = contents
+}
+
+let lastMainContents = null
+let initFinished = false
+const handleJs = (contents) => {
+  try {
+    eval(contents)
+  } catch (e) {
+    window._lastEvalError = e
+    console.log(e)
+  }
+}
+
+ws.emitter.on('message', (message) => {
+  console.log("got emitter message", message)
+  if (message.endsWith === cssEndsWith) {
+    handleCss(message.contents)
+    return
+  }
+  if (message.method === "watch-file" && message.endsWith.endsWith('.js')) {
+    if (!initFinished) { return }
+    cleanupEventHandlers()
+    handleJs(message.contents)
+    if (message.endsWith === mainJsEndsWith) {
+      lastMainContents = message.contents
+    } else if (lastMainContents != null) {
+      handleJs(lastMainContents)
+    }
+    return
+  }
+  if (message.method === "watch-wtr-status") {
+    statusDataEmitter.emit('data', message.data)
+    return
+  }
+  if (message.method === "watch-wtr-activity") {
+    statusDataEmitter.emit('activity', message.data)
+    return
+  }
+})
+
+ws.emitter.on('socket-open', () => statusDataEmitter.emit('socket-open'))
+ws.emitter.on('socket-close', () => statusDataEmitter.emit('socket-close'))
+
+const initFiles = async () => {
+  await fetch(CSS_FILE).then(r => r.text()).then(handleCss)
+  const jsFetches = jsFiles.map(async (fileName) => {
+    return fetch(fileName).then(r => r.text())
+  })
+  const jsResults = await Promise.all(jsFetches)
+  lastMainContents = jsResults.at(-1)
+  requestAnimationFrame(() => { // make sure css is  applied first
+    jsResults.forEach((contents) => {
+      handleJs(contents)
+    })
+    initFinished = true
+  })
+}
+
+const subscribeWatchers = () => {
+  ws.sendMessage({method: "watch-log-messages"})
+  ws.sendMessage({method: "watch-wtr-status"})
+  ws.sendMessage({method: "watch-wtr-activity"})
+  ws.sendMessage({ method: "init", name: "beta-status-ui" })
+  ws.sendMessage({ method: "watch-file", endsWith: cssEndsWith })
+  jsFiles.forEach((jsFile) => {
+    const jsEndsWith = FILE_PREFIX + jsFile
+    ws.sendMessage({ method: "watch-file", endsWith: jsEndsWith })
+  })
+
+}
+
+await initFiles()
+subscribeWatchers()
+
+const updateSvgDimensions = () => {
+  svgRoot.setAttribute("height", window.innerHeight - 4)
+  svgRoot.setAttribute("width", window.innerWidth)
+}
+
+updateSvgDimensions()
+window.addEventListener("resize", () => {
+  updateSvgDimensions()
+})

package/src/ui/js/main.js

@@ -0,0 +1,97 @@
+/* eslint no-unused-vars: 0 */
+const { drawGrid, drawPolarGrid, HeaderSummary, StatusRing, onEvent, statusDataEmitter, SessionWedges, ClientLabel,
+  ActivityTimeseriesGraph, EditorLabel, ServerStatus, constants } = window.__WTR__
+const { outerRingRadius, innerRingRadius, outerArcSize } = constants
+
+const gridGroup = document.getElementById("grid_group")
+gridGroup.innerHTML = ""
+// drawPolarGrid(gridGroup)
+// drawGrid(gridGroup)
+
+const headerSummaryNode = document.getElementById('header_summary_group')
+const headerSummary = new HeaderSummary({parentNode: headerSummaryNode})
+
+const statusRingNode = document.getElementById('status_ring_group')
+const statusRing = new StatusRing({innerRingRadius, outerRingRadius, outerArcSize, parentNode: statusRingNode})
+
+const clientWedgesNode = document.getElementById('client_wedges_group')
+const clientWedges = new SessionWedges({outerRingRadius, outerArcSize, direction: -1, Label: ClientLabel, parentNode: clientWedgesNode})
+
+const editorWedgesNode = document.getElementById('editor_wedges_group')
+const editorWedges = new SessionWedges({outerRingRadius, outerArcSize, Label: EditorLabel, parentNode: editorWedgesNode})
+
+const activityGraphNode = document.getElementById('activity_timeseries_graph')
+const activityGraph = new ActivityTimeseriesGraph({innerRingRadius, parentNode: activityGraphNode})
+
+const serverStatusNode = document.getElementById('server_status_group')
+const serverStatus = new ServerStatus({parentNode: serverStatusNode})
+
+const statusDataTranform = (rawData) => {
+
+  const editors = []
+  const clients = []
+  const allSessions = new Map()
+
+  rawData.sessions.forEach((session) => {
+    allSessions.set(session.id, session)
+    session.activeWatchCount = 0
+    session.activeOpenCount = 0
+    const isEditor = session.editorPid != null || session.lsPid != null
+    if (isEditor) {
+      editors.push(session)
+    } else {
+      clients.push(session)
+    }
+  })
+
+  for (const session of allSessions.values()) {
+    const openFileLinks = Object.values(session.openFileLinks)
+    session.activeOpenCount = openFileLinks.length
+    openFileLinks.forEach((links) => {
+      links.forEach(({clientId}) => {
+        const clientSession = allSessions.get(clientId)
+        if (!clientSession) { return }
+        clientSession.activeWatchCount++
+      })
+    })
+  }
+
+  return { editors, clients }
+}
+
+const getServerPid = (editors) => {
+  for (const editor of editors) {
+    if (editor.isServer) { return editor.lsPid }
+  }
+  return null
+}
+
+const handleStatusData = (rawData) => {
+  window.__WTR__.lastStatusData = rawData
+  const data = statusDataTranform(rawData)
+  console.log("status data updated", data)
+  headerSummary.update(data)
+  statusRing.update(data)
+  clientWedges.update(data.clients)
+  editorWedges.update(data.editors)
+  serverStatus.update(getServerPid(data.editors))
+}
+
+onEvent(statusDataEmitter, 'data', handleStatusData)
+
+if (window.__WTR__.lastStatusData) {
+  handleStatusData(window.__WTR__.lastStatusData)
+}
+
+const handleActivity = (data) => {
+  editorWedges.triggerActivity(data.relayer)
+  clientWedges.triggerActivity(new Set(data.watchers))
+  activityGraph.triggerActivity()
+}
+
+onEvent(statusDataEmitter, 'activity', handleActivity)
+
+onEvent(statusDataEmitter, 'socket-close', () => {
+  console.log("socket closed!")
+  serverStatus.update(null)
+})

package/src/ui/js/util/DependencyManager.js

@@ -0,0 +1,31 @@
+import { EventEmitter } from './EventEmitter.js'
+
+const dependencies = {}
+window.__WTR__ = dependencies
+
+const exportDeps = (exportObj) => Object.assign(dependencies, exportObj)
+
+const statusDataEmitter = new EventEmitter()
+
+const cleanupFuncs = []
+
+const onEvent = (emitter, event, func) => {
+  if (typeof emitter.on === 'function') {
+    emitter.on(event, func)
+    cleanupFuncs.push(() => emitter.removeListener(event, func))
+  } else if (typeof emitter.addEventListener === 'function') {
+    emitter.addEventListener(event, func)
+    cleanupFuncs.push(() => emitter.removeEventListener(event, func))
+  } else {
+    throw new Error("target is not an event emitter")
+  }
+}
+
+const cleanupEventHandlers = () => {
+  cleanupFuncs.forEach(f => f())
+  cleanupFuncs.length = 0
+}
+
+exportDeps({exportDeps, statusDataEmitter, onEvent, cleanupEventHandlers})
+
+export default dependencies

package/src/ui/js/util/EventEmitter.js

@@ -0,0 +1,40 @@
+export class EventEmitter {
+  constructor () {
+    this.events = new Map()
+  }
+
+  on (event, listener) {
+    let eventSubscribers = this.events.get(event)
+    if (!eventSubscribers) {
+      eventSubscribers = new Set()
+      this.events.set(event, eventSubscribers)
+    }
+    eventSubscribers.add(listener)
+    return () => this.removeListener(event, listener)
+  }
+
+  removeListener (event, listener) {
+    const eventSubscribers = this.events.get(event)
+    if (!eventSubscribers) { return }
+    if (!listener) {
+      this.events.delete(event)
+      return
+    }
+    eventSubscribers.delete(listener)
+  }
+
+  emit (event, ...args) {
+    const eventSubscribers = this.events.get(event)
+    if (!eventSubscribers) { return }
+    for (const listener of eventSubscribers) {
+      listener.apply(this, args)
+    }
+  }
+
+  once (event, listener) {
+    const remove = this.on(event, (...args) => {
+      remove()
+      listener.apply(this, args)
+    })
+  }
+}