websocket-text-relay 1.1.2 → 1.1.4

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

@@ -1,47 +1,93 @@
-const { exportDeps, polarToCartesian, coordsToPathData, drawLinearPath, drawCircle, drawText, drawSvgElement, drawToolTip } = window.__WTR__
+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({tag: "g", className: "tooltip_wrapper_group", parent: 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})
+const drawSummaryValue = ({ x, y, label, circleClass, parentNode }) => {
+  const tooltipWrapperGroup = drawSvgElement({
+    tag: "g",
+    className: "tooltip_wrapper_group",
+    parent: 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({tag: "g", className: "tooltip_wrapper_group", parent: 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 drawRightAlignedSummaryValue = ({ x, y, label, circleClass, parentNode }) => {
+  const tooltipWrapperGroup = drawSvgElement({
+    tag: "g",
+    className: "tooltip_wrapper_group",
+    parent: 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 labelCircle = drawCircle({
+    cx: x - xDiff,
+    cy: y - 0.0032,
+    r: summaryCircleRadius,
+    className: circleClass,
+    parentNode: tooltipWrapperGroup,
+  })
   const update = (value) => {
     textElement.textContent = value
     const xDiff = textElement.getBBox().width
     labelCircle.setAttribute("cx", x - xDiff)
   }
-  return {textElement, update}
+  return { textElement, update }
 }
 
 const underlinePadding = 0.01
-const summaryCircleRadius = 0.0140
+const summaryCircleRadius = 0.014
 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 }
+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}
+  return { x, y, height, width }
 }
 
 const labelLineDistance = 0.07
 
 class ClientLabel {
-  constructor ({wedgeCenterAngle, wedgeCenterRadius, parentNode}) {
+  constructor({ wedgeCenterAngle, wedgeCenterRadius, parentNode }) {
     this.parentNode = parentNode
     this.wedgeCenterAngle = wedgeCenterAngle
     this.wedgeCenterRadius = wedgeCenterRadius
@@ -49,30 +95,72 @@ class ClientLabel {
     this.draw()
   }
 
-  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})
+    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})
+    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 textBbox = addPadding(this.nameTextElement.getBBox(), 0.0, 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})
+    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({tag: "g", attributes: {transform: `translate(${xDiff}, 0)`}, parent: this.parentNode})
-    this.activeCountElement = drawSummaryValue({x: summaryStartX, y: summaryMidY, label: "Active Files", circleClass: "summary_active_circle", parentNode: this.activeCountTranslateWrapper})
+    this.activeCountTranslateWrapper = drawSvgElement({
+      tag: "g",
+      attributes: { transform: `translate(${xDiff}, 0)` },
+      parent: this.parentNode,
+    })
+    this.activeCountElement = drawSummaryValue({
+      x: summaryStartX,
+      y: summaryMidY,
+      label: "Active Files",
+      circleClass: "summary_active_circle",
+      parentNode: this.activeCountTranslateWrapper,
+    })
   }
 
-  update (client) {
-    let {name} = client
+  update(client) {
+    let { name } = client
     if (!name || name.length === 0) {
       name = "."
     }
@@ -90,8 +178,12 @@ class ClientLabel {
       this.nameTextElement.textContent = 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 textBbox = addPadding(this.nameTextElement.getBBox(), 0.0, 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)
 
@@ -104,7 +196,7 @@ class ClientLabel {
 }
 
 class EditorLabel {
-  constructor ({wedgeCenterAngle, wedgeCenterRadius, parentNode}) {
+  constructor({ wedgeCenterAngle, wedgeCenterRadius, parentNode }) {
     this.parentNode = parentNode
     this.wedgeCenterAngle = wedgeCenterAngle
     this.wedgeCenterRadius = wedgeCenterRadius
@@ -112,31 +204,80 @@ class EditorLabel {
     this.draw()
   }
 
-  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})
+    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})
+    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 textBbox = addPadding(this.nameTextElement.getBBox(), 0.0, 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({tag: 'g', attributes: {transform: `translate(${-xDiff})`}, parent: this.parentNode})
-    this.openCountSummaryValue = drawRightAlignedSummaryValue({x: summaryStartX, y: summaryMidY, label: "Open Files", circleClass: "summary_watched_circle", parentNode: this.openFilesTransformGroup})
+    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({
+      tag: "g",
+      attributes: { transform: `translate(${-xDiff})` },
+      parent: this.parentNode,
+    })
+    this.openCountSummaryValue = drawRightAlignedSummaryValue({
+      x: summaryStartX,
+      y: summaryMidY,
+      label: "Open Files",
+      circleClass: "summary_watched_circle",
+      parentNode: this.openFilesTransformGroup,
+    })
   }
 
-  update (editor) {
-    let {name} = editor
+  update(editor) {
+    let { name } = editor
     if (!name || name.length === 0) {
       name = "."
+    } else if (name === "Visual Studio Code") {
+      name = "VSCode"
     }
 
     if (editor.isServer) {
@@ -156,16 +297,23 @@ class EditorLabel {
       this.nameTextElement.textContent = 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 textBbox = addPadding(this.nameTextElement.getBBox(), 0.0, 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
+    const xDiff =
+      this.activeCountSummaryValue.textElement.getBBox().width +
+      summaryCircleRadius +
+      editorSummaryPadding * 2
     this.openFilesTransformGroup.setAttribute("transform", `translate(${-xDiff})`)
   }
 }
 
-exportDeps({ClientLabel, EditorLabel})
+exportDeps({ ClientLabel, EditorLabel })

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

@@ -4,8 +4,8 @@ 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 flashAnimationKeyframes = [{ fill: "#fff" }, { fill: "var(--wedge-active-color)" }]
+const flashAnimationProps = { duration: 250, easing: "ease-out", iterations: 1 }
 
 const createSessionSummary = (sessions) => {
   const summary = {
@@ -13,8 +13,7 @@ const createSessionSummary = (sessions) => {
     watchCount: 0,
     activeWatchCount: 0,
     openCount: 0,
-    activeOpenCount: 0
-
+    activeOpenCount: 0,
   }
 
   for (let i = numWedges - 1; i < sessions.length; i++) {
@@ -29,7 +28,7 @@ const createSessionSummary = (sessions) => {
 }
 
 class SessionWedges {
-  constructor ({outerRingRadius, outerArcSize, direction = 1, Label, parentNode}) {
+  constructor({ outerRingRadius, outerArcSize, direction = 1, Label, parentNode }) {
     this.outerRingRadius = outerRingRadius
     this.outerArcSize = outerArcSize
     this.parentNode = parentNode
@@ -38,36 +37,52 @@ class SessionWedges {
     this.draw()
   }
 
-  draw () {
+  draw() {
     this.parentNode.innerHTML = ""
     this.wedgeNodes = []
-    const totalStartAngle = 0.25 + this.direction * this.outerArcSize / 2
+    const totalStartAngle = 0.25 + (this.direction * this.outerArcSize) / 2
     const totalAngleDelta = 0.5 - this.outerArcSize - wedgeSpacing
-    const wedgeAngleDelta = (totalAngleDelta / numWedges) - wedgeSpacing
+    const wedgeAngleDelta = totalAngleDelta / numWedges - wedgeSpacing
     const innerRadius = this.outerRingRadius - wedgeWidth / 2
     for (let i = 0; i < numWedges; i++) {
-      const group = drawSvgElement({tag: "g", className: "single_wedge_group", parent: this.parentNode})
-
-      let startAngle = totalStartAngle + this.direction * (i + 1) * wedgeSpacing + this.direction * i * wedgeAngleDelta
+      const group = drawSvgElement({
+        tag: "g",
+        className: "single_wedge_group",
+        parent: 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 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})
+      const label = new this.Label({
+        wedgeCenterAngle,
+        wedgeCenterRadius: this.outerRingRadius,
+        parentNode: group,
+      })
 
-      this.wedgeNodes.push({group, label, wedge})
+      this.wedgeNodes.push({ group, label, wedge })
     }
     this.drawCalled = true
   }
 
-  update (sessions) {
+  update(sessions) {
     this.sessionsData = sessions
     for (let i = 0; i < numWedges; i++) {
-      const {group, label} = this.wedgeNodes[i]
-      group.classList.remove('active', 'online')
+      const { group, label } = this.wedgeNodes[i]
+      group.classList.remove("active", "online")
       let session = sessions[i]
       if (!session) {
         continue
@@ -78,30 +93,35 @@ class SessionWedges {
       }
 
       if (session.activeWatchCount > 0 || session.activeOpenCount > 0) {
-        group.classList.add('active')
+        group.classList.add("active")
       } else {
-        group.classList.add('online')
+        group.classList.add("online")
       }
 
       label.update(session)
     }
   }
 
-  triggerActivity (sessionIds) {
+  triggerActivity(sessionIds) {
     const sessions = this.sessionsData
-    if (!sessions) { return }
+    if (!sessions) {
+      return
+    }
     for (let i = 0; i < numWedges; i++) {
-      const {wedge} = this.wedgeNodes[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)) {
+      if (
+        (typeof sessionIds === "number" && session.id === sessionIds) ||
+        (sessionIds.has && sessionIds.has(session.id))
+      ) {
         wedge.animate(flashAnimationKeyframes, flashAnimationProps)
       }
     }
   }
 }
 
-exportDeps({SessionWedges})
+exportDeps({ SessionWedges })

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

@@ -1,7 +1,7 @@
 const { exportDeps, drawCircle, drawWedge } = window.__WTR__
 
 class StatusRing {
-  constructor ({innerRingRadius, outerRingRadius, outerArcSize, parentNode}) {
+  constructor({ innerRingRadius, outerRingRadius, outerArcSize, parentNode }) {
     this.innerRingRadius = innerRingRadius
     this.outerRingRadius = outerRingRadius
     this.outerArcSize = outerArcSize
@@ -9,19 +9,31 @@ class StatusRing {
     this.draw()
   }
 
-  draw () {
+  draw() {
     this.parentNode.innerHTML = ""
     this.parentNode.classList.remove(...this.parentNode.classList)
-    this.currentClassName = 'offline'
+    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})
+    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)
+  update(data) {
+    const hasActiveClient = data.clients.some((client) => client.activeWatchCount > 0)
     let newClassName
     if (hasActiveClient) {
       newClassName = "active"
@@ -39,4 +51,4 @@ class StatusRing {
   }
 }
 
-exportDeps({StatusRing})
+exportDeps({ StatusRing })

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

@@ -6,10 +6,10 @@ 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})
+    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 })
   }
 }
 
@@ -18,12 +18,19 @@ 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})
+    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})
+    drawPolarLine({
+      startAngle: 0,
+      startRadius: 0,
+      endAngle: angle,
+      endRadius: 1,
+      className: "grid_line",
+      parentNode,
+    })
   }
 }
 
-exportDeps({drawGrid, drawPolarGrid})
+exportDeps({ drawGrid, drawPolarGrid })

package/src/ui/js/index.js

@@ -20,15 +20,15 @@ const jsFiles = [
   "js/components/SessionLabels.js",
   "js/components/ActivityTimeseriesGraph.js",
   "js/components/ServerStatus.js",
-  MAIN_JS_FILE
+  MAIN_JS_FILE,
 ]
 
-const svgRoot = document.getElementById('svg_root')
-const cssElement = document.getElementById('main_style')
+const svgRoot = document.getElementById("svg_root")
+const cssElement = document.getElementById("main_style")
 
-const {hostname, port, protocol} = window.location
+const { hostname, port, protocol } = window.location
 const wsProtocol = protocol === "http:" ? "ws" : "wss"
-const ws = new WebsocketClient({port: port, host: hostname, protocol: wsProtocol})
+const ws = new WebsocketClient({ port: port, host: hostname, protocol: wsProtocol })
 
 const handleCss = (contents) => {
   cssElement.innerText = contents
@@ -45,14 +45,16 @@ const handleJs = (contents) => {
   }
 }
 
-ws.emitter.on('message', (message) => {
+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 }
+  if (message.method === "watch-file" && message.endsWith.endsWith(".js")) {
+    if (!initFinished) {
+      return
+    }
     cleanupEventHandlers()
     handleJs(message.contents)
     if (message.endsWith === mainJsEndsWith) {
@@ -63,26 +65,29 @@ ws.emitter.on('message', (message) => {
     return
   }
   if (message.method === "watch-wtr-status") {
-    statusDataEmitter.emit('data', message.data)
+    statusDataEmitter.emit("data", message.data)
     return
   }
   if (message.method === "watch-wtr-activity") {
-    statusDataEmitter.emit('activity', message.data)
+    statusDataEmitter.emit("activity", message.data)
     return
   }
 })
 
-ws.emitter.on('socket-open', () => statusDataEmitter.emit('socket-open'))
-ws.emitter.on('socket-close', () => statusDataEmitter.emit('socket-close'))
+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)
+  await fetch(CSS_FILE)
+    .then((r) => r.text())
+    .then(handleCss)
   const jsFetches = jsFiles.map(async (fileName) => {
-    return fetch(fileName).then(r => r.text())
+    return fetch(fileName).then((r) => r.text())
   })
   const jsResults = await Promise.all(jsFetches)
   lastMainContents = jsResults.at(-1)
-  requestAnimationFrame(() => { // make sure css is  applied first
+  requestAnimationFrame(() => {
+    // make sure css is  applied first
     jsResults.forEach((contents) => {
       handleJs(contents)
     })
@@ -91,16 +96,15 @@ const initFiles = async () => {
 }
 
 const subscribeWatchers = () => {
-  ws.sendMessage({method: "watch-log-messages"})
-  ws.sendMessage({method: "watch-wtr-status"})
-  ws.sendMessage({method: "watch-wtr-activity"})
+  ws.sendMessage({ method: "watch-log-messages" })
+  ws.sendMessage({ method: "watch-wtr-status" })
+  ws.sendMessage({ method: "watch-wtr-activity" })
   ws.sendMessage({ method: "init", name: "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()