websocket-text-relay 1.1.4 → 1.1.6

package/src/ui/js/components/sessionWedges.js

@@ -0,0 +1,96 @@
+const {
+  drawSvgElement,
+  drawWedge,
+  drawSessionLabel,
+  wtrStatusEmitter,
+  wtrActivityEmitter,
+  onEvent,
+  constants,
+} = __WTR__
+const { outerRingRadius, outerArcSize, maxSessionWedges } = constants
+
+const editorsParentGroup = document.getElementById("editor_wedges_group")
+editorsParentGroup.innerHTML = ""
+
+const clientsParentGroup = document.getElementById("client_wedges_group")
+clientsParentGroup.innerHTML = ""
+
+const wedgeSpacing = 0.01
+const wedgeWidth = 0.08
+
+const startAngleOffset = outerArcSize / 2
+const totalAngleDelta = 0.5 - outerArcSize - wedgeSpacing
+const wedgeAngleDelta = totalAngleDelta / maxSessionWedges - wedgeSpacing
+const innerWedgeRadius = outerRingRadius - wedgeWidth / 2
+
+/** @type {Map<SessionId, HTMLElement>} */
+let wedgeMap = new Map()
+
+/**
+ * @param sessions {EditorStatus[] | ClientStatus[] }
+ * @param parent {HTMLElement}
+ * @param direction {1 | -1}
+ */
+const drawWedges = (sessions, parent, direction = 1) => {
+  for (let i = 0; i < sessions.length; i++) {
+    if (i >= maxSessionWedges) {
+      break
+    }
+    const session = sessions[i]
+
+    let startAngle = 0.25 + direction * (startAngleOffset + (i + 1) * wedgeSpacing + i * wedgeAngleDelta)
+    if (direction === -1) {
+      startAngle -= wedgeAngleDelta
+    }
+
+    const isActive = session.activeWatchCount || session.activeOpenCount
+
+    const classNames = ["wedge_node"]
+    if (isActive) {
+      classNames.push("active")
+    }
+
+    const wedgeLabelGroup = drawSvgElement({ tag: "g", parent })
+
+    const wedge = drawWedge({
+      startAngle,
+      angleDelta: wedgeAngleDelta,
+      innerRadius: innerWedgeRadius,
+      radiusDelta: wedgeWidth,
+      className: classNames,
+      parent: wedgeLabelGroup,
+    })
+    wedgeMap.set(session.id, wedge)
+
+    drawSessionLabel({
+      wedgeCenterAngle: startAngle + wedgeAngleDelta / 2,
+      wedgeCenterRadius: outerRingRadius,
+      direction,
+      session,
+      parent: wedgeLabelGroup,
+    })
+  }
+}
+
+onEvent(wtrStatusEmitter, "data", (/** @type {WtrStatus} */ { editors, clients }) => {
+  wedgeMap = new Map()
+  editorsParentGroup.innerHTML = ""
+  clientsParentGroup.innerHTML = ""
+  drawWedges(editors, editorsParentGroup, 1)
+  drawWedges(clients, clientsParentGroup, -1)
+})
+
+const flashAnimationKeyframes = [{ fill: "#fff" }, { fill: "var(--wedge-active-color)" }]
+const flashAnimationProps = { duration: 250, easing: "ease-out", iterations: 1 }
+
+/**
+ * @param sessionId {SessionId}
+ */
+const triggerActivityAnimation = (sessionId) => {
+  wedgeMap.get(sessionId)?.animate(flashAnimationKeyframes, flashAnimationProps)
+}
+
+onEvent(wtrActivityEmitter, "data", (/** @type {WtrActivityMessage} */ { relayer, watchers }) => {
+  triggerActivityAnimation(relayer)
+  watchers.forEach(triggerActivityAnimation)
+})

package/src/ui/js/components/statusRing.js

@@ -0,0 +1,51 @@
+const { drawSvgElement, drawWedge, constants, wtrStatusEmitter, onEvent } = __WTR__
+const { innerRingRadius, outerRingRadius, outerArcSize } = constants
+
+const parentGroup = document.getElementById("status_ring_group")
+parentGroup.innerHTML = ""
+
+let currentClass = "offline"
+
+const wrapper = drawSvgElement({
+  tag: "g",
+  className: ["status_ring_wrapper", currentClass],
+  parent: parentGroup,
+})
+
+drawSvgElement({
+  tag: "circle",
+  attributes: { r: innerRingRadius },
+  parent: wrapper,
+})
+
+drawWedge({
+  startAngle: 0.25 - outerArcSize / 2,
+  angleDelta: outerArcSize,
+  innerRadius: outerRingRadius,
+  radiusDelta: 0,
+  parent: wrapper,
+})
+
+drawWedge({
+  startAngle: 0.75 - outerArcSize / 2,
+  angleDelta: outerArcSize,
+  innerRadius: outerRingRadius,
+  radiusDelta: 0,
+  parent: wrapper,
+})
+
+onEvent(wtrStatusEmitter, "data", (/** @type {WtrStatus} */ data) => {
+  let nextClass
+  if (data.isOnline) {
+    const hasActiveClient = data.clients.some((client) => client.activeWatchCount > 0)
+    nextClass = hasActiveClient ? "active" : "online"
+  } else {
+    nextClass = "offline"
+  }
+
+  if (nextClass !== currentClass) {
+    wrapper.classList.remove(currentClass)
+    wrapper.classList.add(nextClass)
+    currentClass = nextClass
+  }
+})

package/src/ui/js/data/wtrActivity.js

@@ -0,0 +1,85 @@
+import { exportDeps } from "../setup/dependencyManager.js"
+import { EventEmitter } from "../setup/EventEmitter.js"
+import "../util/constants.js"
+
+const { dataWindowSize } = __WTR__.constants
+const dataWindowInterval = 1000
+
+let currentMaxValue = 0
+const dataWindow = initDataWindow()
+let currentDataWindowMessage = { ...processDataWindow(dataWindow), prevMaxValue: 0, currentValue: 0 }
+
+const wtrActivityEmitter = new EventEmitter()
+
+const wtrActivityDataWindowEmitter = new EventEmitter()
+wtrActivityDataWindowEmitter.on = (event, handler) => {
+  if (event === "data") {
+    handler(currentDataWindowMessage)
+  }
+  EventEmitter.prototype.on.call(wtrActivityDataWindowEmitter, event, handler)
+}
+wtrActivityDataWindowEmitter.addEventListener = wtrActivityDataWindowEmitter.on
+
+/**
+ * @param {WtrActivityMessage} activityMessage
+ * @returns {void}
+ */
+export const emitActivity = (activityMessage) => {
+  wtrActivityEmitter.emit("data", activityMessage)
+}
+
+let currentActivityCount = 0
+
+const onTick = async () => {
+  scheduleNextTick()
+  const prevEndTime = dataWindow.at(-1).time
+  const newTime = prevEndTime + dataWindowInterval
+  dataWindow.shift()
+  dataWindow.push({ time: newTime, value: currentActivityCount })
+  const { path, maxValue } = processDataWindow(dataWindow)
+  currentDataWindowMessage = {
+    path,
+    maxValue,
+    prevMaxValue: currentMaxValue,
+    currentValue: currentActivityCount,
+  }
+  currentMaxValue = maxValue
+  currentActivityCount = 0
+  wtrActivityDataWindowEmitter.emit("data", currentDataWindowMessage)
+}
+
+function initDataWindow() {
+  const now = new Date()
+  now.setMilliseconds(0)
+  const endTime = now.valueOf()
+  return Array.from({ length: dataWindowSize }, (_, i) => ({
+    time: endTime - (dataWindowSize - 1 - i) * dataWindowInterval,
+    value: 0,
+  }))
+}
+
+function processDataWindow(dataWindow) {
+  let maxValue = 0
+  const coords = dataWindow.map(({ value }, i) => {
+    if (value > maxValue) {
+      maxValue = value
+    }
+    return `${i},${value}`
+  })
+  const path = "M " + coords.join(" L ")
+  return { path, maxValue }
+}
+
+const scheduleNextTick = () => {
+  const nowMillis = new Date().getMilliseconds()
+  const millisUntilNextSecond = 1000 - nowMillis
+  setTimeout(onTick, millisUntilNextSecond)
+}
+
+scheduleNextTick()
+
+wtrActivityEmitter.on("data", () => {
+  currentActivityCount++
+})
+
+exportDeps({ wtrActivityEmitter, wtrActivityDataWindowEmitter })

package/src/ui/js/data/wtrActivity.types.js

@@ -0,0 +1,3 @@
+/**
+ * @typedef {{action: "relay", relayer: SessionId, watchers: SessionId[]}} WtrActivityMessage
+ */

package/src/ui/js/data/wtrStatus.js

@@ -0,0 +1,134 @@
+import { exportDeps } from "../setup/dependencyManager.js"
+import { EventEmitter } from "../setup/EventEmitter.js"
+import "../util/constants.js"
+
+// how long to wait after disconnect before clearing client side data
+const CLEAR_TIMEOUT_LENGTH_MS = 3000
+const { maxSessionWedges } = __WTR__.constants
+
+/** @type {WtrStatus} */
+const currentStatus = {
+  isOnline: false,
+  editors: [],
+  clients: [],
+}
+
+const wtrStatusEmitter = new EventEmitter()
+wtrStatusEmitter.on = function (event, handler) {
+  EventEmitter.prototype.on.call(wtrStatusEmitter, event, handler)
+  // automatically push the data to the event handler when it initially subscribes
+  if (event === "data") {
+    handler(currentStatus)
+  }
+}
+wtrStatusEmitter.addEventListener = wtrStatusEmitter.on
+
+let clearDataTimeout
+export const setIsOnline = (isOnline) => {
+  if (isOnline === currentStatus.isOnline) {
+    return
+  }
+  currentStatus.isOnline = isOnline
+
+  if (!isOnline) {
+    currentStatus.editors = currentStatus.editors.filter((s) => !s.isServer)
+    clearDataTimeout = setTimeout(() => {
+      setSessions([])
+    }, CLEAR_TIMEOUT_LENGTH_MS)
+  } else {
+    clearTimeout(clearDataTimeout)
+  }
+
+  wtrStatusEmitter.emit("data", currentStatus)
+}
+
+/**
+ * @param {SessionStatus[]} sessions
+ * @returns {void}
+ */
+export const setSessions = (sessions) => {
+  const { editors, clients } = sessionDataTranform(sessions)
+  currentStatus.editors = editors
+  currentStatus.clients = clients
+  wtrStatusEmitter.emit("data", currentStatus)
+}
+
+/**
+ * @param {EditorStatus[] | ClientStatus[]} sessions
+ * @returns {EditorStatus[] | ClientStatus[]}
+ */
+const summarizeSessions = (sessions) => {
+  if (sessions.length <= maxSessionWedges) {
+    return sessions
+  }
+  const numOthers = sessions.length - maxSessionWedges + 1
+  const truncatedList = []
+  /** @type {EditorStatus & ClientStatus} */
+  const otherSessions = {
+    name: `${numOthers} others...`,
+    openCount: 0,
+    activeOpenCount: 0,
+    watchCount: 0,
+    activeWatchCount: 0,
+    isServer: false,
+    lsPid: null,
+    editorPid: null,
+  }
+  for (let i = 0; i < maxSessionWedges - 1; i++) {
+    truncatedList.push(sessions[i])
+  }
+  truncatedList.push(otherSessions)
+
+  for (let i = maxSessionWedges - 1; i < sessions.length; i++) {
+    const session = sessions[i]
+    otherSessions.openCount += session.openCount
+    otherSessions.activeOpenCount += session.activeOpenCount
+    otherSessions.watchCount += session.watchCount
+    otherSessions.activeWatchCount += session.activeWatchCount
+    otherSessions.lsPid = otherSessions.lsPid || session.lsPid
+    otherSessions.editorPid = otherSessions.editorPid || session.editorPid
+    otherSessions.isServer = otherSessions.isServer || session.isServer
+  }
+
+  return truncatedList
+}
+
+/**
+ * @param {SessionStatus[]} sessions
+ * @returns {editors: EditorStatus[], clients: ClientStatus[]}
+ */
+const sessionDataTranform = (sessions) => {
+  const editors = []
+  const clients = []
+  const allSessions = new Map()
+
+  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: summarizeSessions(editors), clients: summarizeSessions(clients) }
+}
+
+exportDeps({ wtrStatusEmitter })

package/src/ui/js/data/wtrStatus.types.js

@@ -0,0 +1,61 @@
+/**
+ * A file path suffix used to match against open file locations.
+ * @typedef {string} EndsWith
+ */
+
+/**
+ * @typedef {number} SessionId
+ */
+
+/**
+ * @typedef {{ clientId: SessionId, endsWith: EndsWith }} FileLink
+ */
+
+/**
+ * Map of absolute file paths → arrays of metadata links.
+ * @typedef {Record<string, FileLink[]>} OpenFileLinks
+ */
+
+/**
+ * @typedef {Object} SessionStatus
+ * Represents one session, which may be an editor or a client.
+ *
+ * @property {string} name
+ * @property {number} id
+ * @property {number} [editorPid]   Optional — only present for editor sessions
+ * @property {number} [lsPid]       Optional — language server PID only present for editor sessions
+ * @property {boolean} isServer
+ * @property {number} watchCount
+ * @property {number} openCount
+ * @property {OpenFileLinks} openFileLinks
+ * @property {number} activeWatchCount
+ * @property {number} activeOpenCount
+ */
+
+/**
+ * Editor sessions have all SessionStatus fields,
+ * but editorPid and lsPid become required,
+ * and activeWatchCount and activeOpenCount are defined
+ *
+ * @typedef {SessionStatus & {
+ *   editorPid: number,
+ *   lsPid: number,
+ *   activeWatchCount: number,
+ *   activeOpenCount: number
+ * }} EditorStatus
+ */
+
+/**
+ * Client sessions have all SessionStatus fields,
+ * but editorPid and lsPid are omitted,
+ * and activeWatchCount and activeOpenCount are defined
+ *
+ * @typedef {Omit<SessionStatus, "editorPid" | "lsPid"> & {
+ *   activeWatchCount: number,
+ *   activeOpenCount: number
+ * }} ClientStatus
+ */
+
+/**
+ * @typedef {{ isOnline: boolean, editors: EditorStatus[], clients: ClientStatus[] }} WtrStatus
+ */

package/src/ui/js/{util → setup}/EventEmitter.js

@@ -18,7 +18,7 @@ export class EventEmitter {
     if (!eventSubscribers) {
       return
     }
-    if (!listener) {
+    if (typeof listener !== "function") {
       this.events.delete(event)
       return
     }
@@ -42,3 +42,7 @@ export class EventEmitter {
     })
   }
 }
+
+// make compatible with functions that handle DOM event targets
+EventEmitter.prototype.addEventListener = EventEmitter.prototype.on
+EventEmitter.prototype.removeEventListener = EventEmitter.prototype.removeListener

package/src/ui/js/{util → setup}/WebsocketClient.js

@@ -8,7 +8,6 @@ export class WebsocketClient {
     this.host = host
     this.protocol = protocol
     this.emitter = new EventEmitter()
-    this.sessionMessages = []
     this.socket = null
     this.socketOpen = false
 
@@ -36,7 +35,6 @@ export class WebsocketClient {
     console.log("websocket client connected")
     this.socketOpen = true
     this.emitter.emit("socket-open")
-    this.sessionMessages.forEach((msgStr) => this.socket.send(msgStr))
   }
 
   onSocketClose() {
@@ -72,11 +70,10 @@ export class WebsocketClient {
   }
 
   sendMessage(message) {
-    const messageStr = JSON.stringify(message)
-    this.sessionMessages.push(messageStr)
     if (!this.socketOpen) {
       return
     }
+    const messageStr = JSON.stringify(message)
     this.socket.send(messageStr)
   }
 }

package/src/ui/js/setup/dependencyManager.js

@@ -0,0 +1,9 @@
+const dependencies = {}
+// we export dependencies used in live js files to the __WTR__ object on the global scope
+window.__WTR__ = dependencies
+
+// export function to be used in other setup files
+export const exportDeps = (exportObj) => Object.assign(dependencies, exportObj)
+
+// export function to be used in live util files
+exportDeps({ exportDeps })

package/src/ui/js/setup/evalOnChange.js

@@ -0,0 +1,18 @@
+import { exportDeps } from "./dependencyManager.js" // make sure the global __WTR__ object is initilized with the exportDeps function
+
+let currentEvalOnChangeFiles = []
+
+// functions used by setup
+export const getEvalOnChangeFiles = () => currentEvalOnChangeFiles
+
+export const clearEvalOnChangeFiles = () => {
+  currentEvalOnChangeFiles = []
+}
+
+// function used by live js files
+// define which functions need to be run every time that file changes
+const evalOnChange = (files) => {
+  currentEvalOnChangeFiles = files
+}
+
+exportDeps({ evalOnChange })

package/src/ui/js/setup/eventSubscriber.js

@@ -0,0 +1,21 @@
+const allCleanupFunctions = new Map()
+
+export const eventSubscriber = (key) => {
+  const previousCleanupFunctions = allCleanupFunctions.get(key)
+  previousCleanupFunctions?.forEach((f) => f())
+
+  const cleanupFunctions = []
+  allCleanupFunctions.set(key, cleanupFunctions)
+
+  return function onEvent(emitter, event, handler) {
+    if (typeof emitter.on === "function") {
+      cleanupFunctions.push(() => emitter.removeListener(event, handler))
+      emitter.on(event, handler)
+    } else if (typeof emitter.addEventListener === "function") {
+      cleanupFunctions.push(() => emitter.removeEventListener(event, handler))
+      emitter.addEventListener(event, handler)
+    } else {
+      throw new Error("target is not an event emitter")
+    }
+  }
+}

package/src/ui/js/setup.js

@@ -0,0 +1,141 @@
+import { WebsocketClient } from "./setup/WebsocketClient.js"
+import { getEvalOnChangeFiles, clearEvalOnChangeFiles } from "./setup/evalOnChange.js" // initialize dependencies on the global __WTR__ object
+import { setIsOnline, setSessions } from "./data/wtrStatus.js"
+import { eventSubscriber } from "./setup/eventSubscriber.js" // make sure the eventSubscriber function is available on the __WTR__ object
+import { emitActivity } from "./data/wtrActivity.js"
+
+const FILE_PREFIX = "websocket-text-relay/src/ui/"
+const WS_PORT = 38378
+const { hostname, protocol } = window.location
+const wsProtocol = protocol === "http:" ? "ws" : "wss"
+const CSS_FILE = "css/main.css"
+const cssEndsWith = FILE_PREFIX + CSS_FILE
+
+const createJsEndsWith = (jsFile) => FILE_PREFIX + jsFile
+
+const jsFiles = [
+  "js/util/constants.js",
+  "js/util/drawing.js",
+  "js/components/headers.js",
+  "js/components/footerStatus.js",
+  "js/components/statusRing.js",
+  "js/components/drawSessionLabel.js",
+  "js/components/sessionWedges.js",
+  "js/components/activityTimeSeries.js",
+  "js/components/activityLabels.js",
+]
+
+const ws = new WebsocketClient({ port: WS_PORT, host: hostname, protocol: wsProtocol })
+
+const cssElement = document.getElementById("main_style")
+
+const handleCss = (contents) => {
+  cssElement.innerText = contents
+}
+
+const handleJs = (contents, jsEndsWith) => {
+  // register and clean up event handlers on a per file basis
+  window.__WTR__.onEvent = eventSubscriber(jsEndsWith)
+  try {
+    eval(contents)
+  } catch (e) {
+    window._lastEvalError = e
+    console.log(e)
+  }
+}
+
+const fetchAllFiles = async (fileNames) => {
+  const fetches = fileNames.map(async (fileName) => {
+    return fetch(fileName).then((r) => r.text())
+  })
+  return Promise.all(fetches)
+}
+
+const initFiles = async () => {
+  await fetch(CSS_FILE)
+    .then((r) => r.text())
+    .then(handleCss)
+
+  const jsResults = await fetchAllFiles(jsFiles)
+  await new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      // wait for one frame to make sure css is applied first
+      jsResults.forEach((contents, i) => {
+        handleJs(contents, createJsEndsWith(jsFiles[i]))
+      })
+      resolve()
+    })
+  })
+}
+await initFiles()
+
+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: "WTR Status" })
+  ws.sendMessage({ method: "watch-file", endsWith: cssEndsWith })
+  jsFiles.forEach((jsFile) => {
+    const jsEndsWith = FILE_PREFIX + jsFile
+    ws.sendMessage({ method: "watch-file", endsWith: jsEndsWith })
+  })
+}
+
+if (ws.socketOpen) {
+  setIsOnline(true)
+  subscribeWatchers()
+}
+ws.emitter.on("socket-open", () => {
+  setIsOnline(true)
+  subscribeWatchers()
+})
+
+ws.emitter.on("socket-close", () => {
+  setIsOnline(false)
+})
+
+let evalInProgress = false
+let bufferedMessage = null
+const handleJsMessage = async (message) => {
+  if (evalInProgress) {
+    bufferedMessage = message
+    return
+  }
+  evalInProgress = true
+  clearEvalOnChangeFiles()
+  handleJs(message.contents, message.endsWith)
+  const postEvalFiles = getEvalOnChangeFiles()
+  const jsResults = await fetchAllFiles(postEvalFiles)
+  jsResults.forEach((contents, i) => {
+    handleJs(contents, createJsEndsWith(postEvalFiles, i))
+  })
+  evalInProgress = false
+  if (bufferedMessage) {
+    const outstandingMessage = bufferedMessage
+    bufferedMessage = null
+    handleJsMessage(outstandingMessage)
+  }
+  return
+}
+
+ws.emitter.on("message", async (message) => {
+  if (message.method === "watch-file" && message.endsWith === cssEndsWith) {
+    handleCss(message.contents)
+    return
+  }
+
+  if (message.method === "watch-file" && message.endsWith.endsWith(".js")) {
+    await handleJsMessage(message)
+    return
+  }
+
+  if (message.method === "watch-wtr-status") {
+    setSessions(message.data?.sessions ?? [])
+    return
+  }
+
+  if (message.method === "watch-wtr-activity") {
+    emitActivity(message.data)
+    return
+  }
+})

package/src/ui/js/util/constants.js

@@ -1,9 +1,13 @@
-const { exportDeps } = window.__WTR__
+const { exportDeps, evalOnChange } = window.__WTR__
+
+evalOnChange(["js/components/statusRing.js", "js/components/sessionWedges.js"])
 
 const constants = {
   innerRingRadius: 0.33,
   outerRingRadius: 0.6,
   outerArcSize: 0.175,
+  dataWindowSize: 16,
+  maxSessionWedges: 5,
 }
 
 exportDeps({ constants })