websocket-text-relay 1.1.4 → 1.1.6

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

@@ -1,319 +0,0 @@
-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,
-  })
-}
-
-// 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 xDiff = textElement.getBBox().width
-  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 }
-}
-
-const underlinePadding = 0.01
-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
-  }
-  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.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,
-    })
-    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,
-    })
-  }
-
-  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.textContent = nameFirstHalf
-      this.nameTextElement.textContent = nameSecondHalf
-      this.nameTextElement.classList.add("small_text")
-    } else {
-      this.topNameElement.innerHTML = ""
-      this.nameTextElement.classList.remove("small_text")
-      this.nameTextElement.textContent = name
-    }
-
-    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)
-
-    this.watchedCountElement.textContent = client.watchCount
-    this.activeCountElement.textContent = 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.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,
-    })
-  }
-
-  update(editor) {
-    let { name } = editor
-    if (!name || name.length === 0) {
-      name = "."
-    } else if (name === "Visual Studio Code") {
-      name = "VSCode"
-    }
-
-    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.textContent = nameFirstHalf
-      this.nameTextElement.textContent = nameSecondHalf
-      this.nameTextElement.classList.add("small_text")
-    } else {
-      this.topNameElement.innerHTML = ""
-      this.nameTextElement.classList.remove("small_text")
-      this.nameTextElement.textContent = name
-    }
-
-    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
-    this.openFilesTransformGroup.setAttribute("transform", `translate(${-xDiff})`)
-  }
-}
-
-exportDeps({ ClientLabel, EditorLabel })

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

@@ -1,127 +0,0 @@
-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({
-        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 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

@@ -1,54 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,121 +0,0 @@
-import { WebsocketClient } from "./util/WebsocketClient.js"
-import "./util/DependencyManager.js"
-
-const { cleanupEventHandlers, statusDataEmitter } = window.__WTR__
-
-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 { hostname, port, protocol } = window.location
-const wsProtocol = protocol === "http:" ? "ws" : "wss"
-const ws = new WebsocketClient({ port: port, host: hostname, protocol: wsProtocol })
-
-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: "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()
-})