websocket-text-relay 1.1.4 → 1.1.6

package/src/ui/js/util/drawing.js

@@ -1,4 +1,6 @@
-const { exportDeps } = window.__WTR__
+const { exportDeps, evalOnChange } = window.__WTR__
+
+evalOnChange(["js/components/statusRing.js", "js/components/sessionWedges.js"])
 
 const TWO_PI = 2 * Math.PI
 const MAX_ANGLE_DELTA = 0.99999
@@ -27,32 +29,23 @@ const drawSvgElement = ({ tag, attributes = {}, className, parent }) => {
   return element
 }
 
-const drawText = ({ x, y, text, dominantBaseline, textAnchor, className, parentNode: parent }) => {
+const drawText = ({ x, y, text, attributes = {}, dominantBaseline, textAnchor, className, parent }) => {
   const textElement = drawSvgElement({
     tag: "text",
-    attributes: { x, y, "dominant-baseline": dominantBaseline, "text-anchor": textAnchor },
+    attributes: { ...attributes, x, y },
     className,
     parent,
   })
   textElement.textContent = text
+  if (textAnchor) {
+    textElement.style["text-anchor"] = textAnchor
+  }
+  if (dominantBaseline) {
+    textElement.style["dominant-baseline"] = dominantBaseline
+  }
   return textElement
 }
 
-const drawLine = ({ x1, y1, x2, y2, className, parentNode: parent }) => {
-  return drawSvgElement({ tag: "line", attributes: { x1, y1, x2, y2 }, className, parent })
-}
-
-const drawCircle = ({ cx, cy, r, className, parentNode: parent }) => {
-  return drawSvgElement({ tag: "circle", attributes: { cx, cy, r }, className, parent })
-}
-
-const coordsToPathData = (coords) => "M " + coords.map((coord) => coord.join(",")).join(" L ")
-
-const drawLinearPath = ({ coords, className, parentNode: parent }) => {
-  const d = coordsToPathData(coords)
-  return drawSvgElement({ tag: "path", attributes: { d }, className, parent })
-}
-
 const polarToCartesian = (angle, radius) => {
   const angleRadians = (angle % 1) * TWO_PI
   const x = Math.cos(angleRadians) * radius
@@ -60,19 +53,7 @@ const polarToCartesian = (angle, radius) => {
   return [x, y]
 }
 
-const drawPolarLine = ({ startAngle, startRadius, endAngle, endRadius, className, parentNode: parent }) => {
-  const [x1, y1] = polarToCartesian(startAngle, startRadius)
-  const [x2, y2] = polarToCartesian(endAngle, endRadius)
-
-  return drawSvgElement({ tag: "line", attributes: { x1, y1, x2, y2 }, className, parent })
-}
-
-const drawPolarCircle = ({ angle, radius, r, className, parentNode: parent }) => {
-  const [cx, cy] = polarToCartesian(angle, radius)
-  return drawSvgElement({ tag: "circle", attributes: { cx, cy, r }, className, parent })
-}
-
-const drawWedge = ({ startAngle, angleDelta, innerRadius, radiusDelta, className, parentNode: parent }) => {
+const drawWedge = ({ startAngle, angleDelta, innerRadius, radiusDelta, className, parent }) => {
   if (angleDelta < 0) {
     angleDelta = 0
   }
@@ -89,57 +70,26 @@ const drawWedge = ({ startAngle, angleDelta, innerRadius, radiusDelta, className
   const [endX2, endY2] = polarToCartesian(endAngle, outerRadius)
 
   const d = `
-M ${startX1} ${startY1},
-A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${endX1} ${endY1},
-L ${endX2} ${endY2},
-A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${startX2} ${startY2},
+M ${startX1},${startY1}
+A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${endX1},${endY1}
+L ${endX2},${endY2}
+A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${startX2},${startY2}
 Z
 `
 
   return drawSvgElement({ tag: "path", attributes: { d }, className, parent })
 }
 
-const triangleHeight = 0.06
-const verticalPadding = 0.01
-const horizontalPadding = 0.04
+const drawPolarLine = ({ startAngle, startRadius, endAngle, endRadius, className, parent }) => {
+  const [x1, y1] = polarToCartesian(startAngle, startRadius)
+  const [x2, y2] = polarToCartesian(endAngle, endRadius)
 
-const drawToolTip = ({ x, y, text, direction = "below", parentNode: parent }) => {
-  const directionMultiplier = direction === "above" ? -1 : 1
-  const tooltipDisplayGroup = drawSvgElement({
-    tag: "g",
-    className: "tooltip_display_group",
-    parent,
-  })
-  const bgPlaceholder = drawSvgElement({ tag: "g", parent: tooltipDisplayGroup })
-  const textY = y + (triangleHeight + verticalPadding) * directionMultiplier
-  const textElement = drawText({
-    x,
-    y: textY,
-    text,
-    className: "tooltip_text",
-    parentNode: tooltipDisplayGroup,
-  })
-  const textBbox = textElement.getBBox()
-  const attributes = {
-    x: textBbox.x - horizontalPadding,
-    y: textBbox.y - verticalPadding,
-    width: textBbox.width + horizontalPadding * 2,
-    height: textBbox.height + verticalPadding * 2,
-    rx: 0.015,
-  }
-  drawSvgElement({ tag: "rect", attributes, className: "tooltip_outline", parent: bgPlaceholder })
+  return drawSvgElement({ tag: "line", attributes: { x1, y1, x2, y2 }, className, parent })
+}
+
+const drawPolarCircle = ({ angle, radius, r, className, parent }) => {
+  const [cx, cy] = polarToCartesian(angle, radius)
+  return drawSvgElement({ tag: "circle", attributes: { cx, cy, r }, className, parent })
 }
 
-exportDeps({
-  drawSvgElement,
-  drawLine,
-  drawCircle,
-  drawLinearPath,
-  drawPolarLine,
-  drawPolarCircle,
-  drawWedge,
-  drawText,
-  polarToCartesian,
-  coordsToPathData,
-  drawToolTip,
-})
+exportDeps({ drawSvgElement, drawText, polarToCartesian, drawWedge, drawPolarLine, drawPolarCircle })

package/src/websocket-interface/httpServer.js

@@ -53,7 +53,7 @@ const requestHandler = (allowedHosts) => (req, res) => {
       const fileStream = createReadStream(filePath)
       fileStream.pipe(res)
     })
-    .catch((e) => {
+    .catch(() => {
       res.writeHead(404)
       res.end("NOT FOUND!")
     })

package/src/ui/js/components/ActivityTimeseriesGraph.js

@@ -1,194 +0,0 @@
-const { exportDeps, drawSvgElement, drawCircle, drawLinearPath, coordsToPathData, drawText, drawToolTip } =
-  window.__WTR__
-
-const drawValueWithTooltip = ({ x, y, label, direction, parentNode }) => {
-  const tooltipWrapperGroup = drawSvgElement({
-    tag: "g",
-    className: "tooltip_wrapper_group",
-    parent: parentNode,
-  })
-  drawToolTip({ x: x, y: y - 0.0032, text: label, direction, parentNode: tooltipWrapperGroup })
-  return drawText({
-    x: x,
-    y: y,
-    dominantBaseline: "middle",
-    text: "0",
-    className: "timeseries_value",
-    parentNode: tooltipWrapperGroup,
-  })
-}
-
-const dataWindowSize = 16
-const dataWindowInterval = 1000
-const graphHeight = 0.25
-
-const innerCircleClipPathId = "inner_circle_clip"
-
-const createLinearScale = (domainMin, domainMax, rangeMin, rangeMax) => {
-  const domainSize = domainMax - domainMin
-  if (domainSize === 0) {
-    return () => rangeMin
-  }
-  const rangeSize = rangeMax - rangeMin
-  const ratio = rangeSize / domainSize
-
-  return (domainValue) => (domainValue - domainMin) * ratio + rangeMin
-}
-
-const createRandomDataWindow = () => {
-  const series = []
-  const endTime = new Date().setMilliseconds(0).valueOf()
-  const startTime = endTime - dataWindowInterval * dataWindowSize
-  let maxValue = 0
-
-  for (let time = startTime; time < endTime; time += dataWindowInterval) {
-    // const value = Math.floor(Math.random() * 101)
-    const value = 0
-    if (value > maxValue) {
-      maxValue = value
-    }
-    series.push({ time, value })
-  }
-
-  return series
-}
-
-const getSeriesWindowInfo = (series) => {
-  const startTime = series.at(1).time
-  const endTime = series.at(-1).time
-  let maxValue = 0
-  series.forEach(({ value }) => {
-    if (value > maxValue) {
-      maxValue = value
-    }
-  })
-
-  return { startTime, endTime, maxValue }
-}
-
-class ActivityTimeseriesGraph {
-  constructor({ innerRingRadius, parentNode }) {
-    this.innerRingRadius = innerRingRadius
-    this.parentNode = parentNode
-    this.parentNode.innerHTML = ""
-    this.dataWindow = window.activityDataWindow || createRandomDataWindow()
-    window.activityDataWindow = this.dataWindow
-    if (!window.currentActivityCount) {
-      window.currentActivityCount = 0
-    }
-    this.draw()
-  }
-
-  draw() {
-    const minX = -this.innerRingRadius
-    const maxX = this.innerRingRadius
-    const width = maxX - minX
-    const height = graphHeight
-    const minY = -height / 2
-    const maxY = minY + height
-
-    const clipPath = drawSvgElement({
-      tag: "clipPath",
-      attributes: { id: innerCircleClipPathId },
-      parent: this.parentNode,
-    })
-    drawCircle({ cx: 0, cy: 0, r: this.innerRingRadius - 0.005, parentNode: clipPath })
-    drawSvgElement({
-      tag: "rect",
-      attributes: {
-        "clip-path": `url(#${innerCircleClipPathId})`,
-        x: minX,
-        y: minY,
-        height,
-        width,
-      },
-      className: "timeseries_bg",
-      parent: this.parentNode,
-    })
-
-    const series = this.dataWindow
-    const { startTime, endTime, maxValue } = getSeriesWindowInfo(series)
-
-    const maxValueElement = drawValueWithTooltip({
-      x: minX + width / 2,
-      y: minY - 0.08,
-      label: "Max updates in a 1 second window",
-      direction: "above",
-      parentNode: this.parentNode,
-    })
-    const currentValueElement = drawValueWithTooltip({
-      x: minX + width / 2,
-      y: maxY + 0.095,
-      label: "Updates in last full second",
-      parentNode: this.parentNode,
-    })
-
-    let valueScale = createLinearScale(0, maxValue, maxY, minY) // in svg, y increases as it goes down, so we need to flip max and min in the range
-    let timeScale = createLinearScale(startTime, endTime, minX, maxX)
-
-    const pathCoords = series.map(({ time, value }) => {
-      return [timeScale(time), valueScale(value)]
-    })
-
-    const graphPath = drawLinearPath({
-      coords: pathCoords,
-      className: "timeseries_path",
-      parentNode: this.parentNode,
-    })
-
-    if (window.activityTimeout) {
-      clearTimeout(window.activityTimeout)
-    }
-    const onTickUpdate = () => {
-      scheduleNextTick()
-
-      const series = this.dataWindow
-      const prevEndTime = series.at(-1).time
-      const newTime = prevEndTime + dataWindowInterval
-      series.shift()
-      series.push({ time: newTime, value: window.currentActivityCount })
-      currentValueElement.textContent = window.currentActivityCount
-      window.currentActivityCount = 0
-
-      const pathCoords = series.map(({ time, value }) => {
-        return [timeScale(time), valueScale(value)]
-      })
-
-      const pathData = coordsToPathData(pathCoords)
-      graphPath.style.transition = ""
-      graphPath.setAttribute("d", pathData)
-
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          const { startTime, endTime, maxValue } = getSeriesWindowInfo(series)
-          maxValueElement.textContent = maxValue
-
-          valueScale = createLinearScale(0, maxValue, maxY, minY) // in svg, y increases as it goes down, so we need to flip max and min in the range
-          timeScale = createLinearScale(startTime, endTime, minX, maxX)
-
-          const pathCoords = series.map(({ time, value }) => {
-            return [timeScale(time), valueScale(value)]
-          })
-
-          const pathData = coordsToPathData(pathCoords)
-          graphPath.style.transition = "all 1s linear"
-          graphPath.setAttribute("d", pathData)
-        })
-      })
-    }
-
-    const scheduleNextTick = () => {
-      const nowMillis = new Date().getMilliseconds()
-      const millisUntilNextSecond = 1000 - nowMillis
-      window.activityTimeout = setTimeout(onTickUpdate, millisUntilNextSecond)
-    }
-
-    scheduleNextTick()
-  }
-
-  triggerActivity() {
-    window.currentActivityCount++
-  }
-}
-
-exportDeps({ ActivityTimeseriesGraph })

package/src/ui/js/components/HeaderSummary.js

@@ -1,22 +0,0 @@
-const { exportDeps, drawText } = window.__WTR__
-
-class HeaderSummary {
-  constructor({ parentNode }) {
-    this.parentNode = parentNode
-    this.draw()
-  }
-
-  draw() {
-    this.parentNode.innerHTML = ""
-    drawText({ x: -0.86, y: -0.73, text: "editors", parentNode: this.parentNode })
-    drawText({
-      x: 0.86,
-      y: -0.73,
-      text: "clients",
-      className: "right_header",
-      parentNode: this.parentNode,
-    })
-  }
-}
-
-exportDeps({ HeaderSummary })

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

@@ -1,43 +0,0 @@
-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: 0.85,
-      text: "WS Server PID",
-      className: "server_status_label",
-      parentNode: this.parentNode,
-    })
-    this.valueElement = drawText({ x: 0, y: 0.748, text: "138324", parentNode: this.parentNode })
-    this.offlineElement = drawText({
-      x: 0,
-      y: 0.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.textContent = pid
-      this.valueElement.classList.add(valueTextClass)
-      this.offlineElement.classList.remove(offlineTextClass)
-    }
-  }
-}
-
-exportDeps({ ServerStatus })