Make workflow run workflow in source repo context to prevent secrets exposure. Remove file upload since it no longer has access to secrets

fix broken test locators

.github/workflows/tests.yml

@@ -1,5 +1,5 @@
 on:
-  pull_request_target: # Use pull_request_target
+  pull_request:
     branches: [master, beta, release]
 
 jobs:
@@ -22,17 +22,3 @@ jobs:
         run: yarn ui-test
       - name: Post-processing
         run: ./scripts/prepareVideo.sh
-      - uses: hkusu/s3-upload-action@v2
-        id: upload # specify some ID for use in subsequent steps
-        with:
-          aws-access-key-id: ${{ vars.AWS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: 'eu-central-1'
-          aws-bucket: ${{ vars.AWS_BUCKET }}
-          file-path: './ui-test.gif'
-          content-type: image/gif
-          output-file-url: 'true'
-      - name: Show URL
-        run: echo '${{ steps.upload.outputs.file-url }}'
-        id: artifact-upload-step
-      - run: echo '![test](${{ steps.upload.outputs.file-url }})' >> $GITHUB_STEP_SUMMARY

app/package.json

@@ -47,7 +47,6 @@
     "react-split-pane": "^0.1.85",
     "react-transition-group": "^4",
     "react-vis": "^1.11.6",
-    "react-window": "^1.8.10",
     "redux": "^4.0.1",
     "redux-batched-actions": "0.5",
     "redux-thunk": "^2.3.0",
@@ -66,8 +65,6 @@
     "@types/react-dom": "^16.0.11",
     "@types/react-redux": "^7.0.9",
     "@types/react-resize-detector": "^4.0.1",
-    "@types/react-virtualized": "^9.21.30",
-    "@types/react-window": "^1.8.8",
     "@types/sha1": "^1.1.1",
     "@types/socket.io-client": "^1.4.32",
     "@types/uuid": "^7.0.2",
@@ -83,7 +80,7 @@
     "node-loader": "^0.6.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1",
-    "ts-loader": "^9.2.6",
+    "ts-loader": "^9.5.1",
     "typescript": "^4.5.5",
     "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.5.0",

app/src/actions/ConnectionManager.ts

@@ -9,12 +9,11 @@ import {
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
 import { showError } from './Global'
-import { promises as fsPromise } from 'fs'
 import * as path from 'path'
 import { ActionTypes, Action } from '../reducers/ConnectionManager'
 import { Subscription } from '../../../backend/src/DataSource/MqttSource'
 import { connectionsMigrator } from './migrations/Connection'
-import { rendererRpc } from '../../../events'
+import { rendererRpc, readFromFile } from '../../../events'
 import { makeOpenDialogRpc } from '../../../events/OpenDialogRequest'
 
 export interface ConnectionDictionary {
@@ -81,7 +80,7 @@ async function openCertificate(): Promise<CertificateParameters> {
     throw rejectReasons.noCertificateSelected
   }
 
-  const data = await fsPromise.readFile(selectedFile)
+  const data = await rendererRpc.call(readFromFile, { filePath: selectedFile })
   if (data.length > 16_384 || data.length < 64) {
     throw rejectReasons.certificateSizeDoesNotMatch
   }

app/src/actions/Publish.ts

@@ -2,7 +2,10 @@ import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { Dispatch } from 'redux'
-import { MqttMessage, makePublishEvent, rendererEvents } from '../../../events'
+import { MqttMessage, makePublishEvent, rendererEvents, rendererRpc, readFromFile } from '../../../events'
+import { makeOpenDialogRpc } from '../../../events/OpenDialogRequest'
+import { showError } from './Global'
+import { Base64 } from 'js-base64'
 
 export const setTopic = (topic?: string): Action => {
   return {
@@ -11,6 +14,49 @@ export const setTopic = (topic?: string): Action => {
   }
 }
 
+export const openFile = (encoding: 'utf8' = 'utf8') => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  try {
+    const file = await getFileContent(encoding)
+    if (file) {
+      dispatch(
+        setPayload(file.data))
+    }
+  } catch (error) {
+    dispatch(showError(error))
+  }
+}
+
+type FileParameters = {
+  name: string,
+  data: string
+}
+async function getFileContent(encoding: string): Promise<FileParameters | undefined> {
+  const rejectReasons = {
+    noFileSelected: 'No file selected',
+    errorReadingFile: 'Error reading file'
+  }
+
+  const { canceled, filePaths } = await rendererRpc.call(makeOpenDialogRpc(), {
+    properties: ['openFile'],
+    securityScopedBookmarks: true,
+  })
+
+  if (canceled) {
+    return
+  }
+
+  const selectedFile = filePaths[0]
+  if (!selectedFile) {
+    throw rejectReasons.noFileSelected
+  }
+  try {
+    const data = await rendererRpc.call(readFromFile, { filePath: selectedFile, encoding })
+    return { name: selectedFile, data: data.toString(encoding) }
+  } catch (error) {
+    throw rejectReasons.errorReadingFile
+  }
+}
+
 export const setPayload = (payload?: string): Action => {
   return {
     payload,

app/src/components/Sidebar/Publish/Publish.tsx

@@ -1,5 +1,5 @@
 import Editor from './Editor'
-import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
+import { AttachFileOutlined, FormatAlignLeft } from '@material-ui/icons'
 import Message from './Model/Message'
 import Navigation from '@material-ui/icons/Navigation'
 import PublishHistory from './PublishHistory'
@@ -116,6 +116,10 @@ const EditorMode = memo(function EditorMode(props: {
     props.actions.setEditorMode(value)
   }, [])
 
+  const openFile = useCallback(() => {
+    props.actions.openFile()
+  }, [])
+
   const formatJson = useCallback(() => {
     if (props.payload) {
       try {
@@ -132,6 +136,7 @@ const EditorMode = memo(function EditorMode(props: {
       <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
         <EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} />
         <FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} />
+        <OpenFileButton editorMode={props.editorMode} openFile={openFile} />
         <div style={{ float: 'right' }}>
           <PublishButton publish={props.publish} focusEditor={props.focusEditor} />
         </div>
@@ -163,6 +168,20 @@ const FormatJsonButton = React.memo(function FormatJsonButton(props: {
   )
 })
 
+const OpenFileButton = React.memo(function OpenFileButton(props: { editorMode: string; openFile: () => void }) {
+  return (
+    <Tooltip title="Open file">
+      <Fab
+        style={{ width: '36px', height: '36px', margin: '0 8px' }}
+        onClick={props.openFile}
+        id="sidebar-publish-open-file"
+      >
+        <AttachFileOutlined style={{ fontSize: '20px' }} />
+      </Fab>
+    </Tooltip>
+  )
+})
+
 const PublishButton = memo(function PublishButton(props: { publish: () => void; focusEditor: () => void }) {
   const handleClickPublish = useCallback(
     (e: React.MouseEvent) => {

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -1,6 +1,7 @@
 import * as q from '../../../../../backend/src/Model'
 import ActionButtons from './ActionButtons'
 import Copy from '../../helper/Copy'
+import Save from '../../helper/Save'
 import DateFormatter from '../../helper/DateFormatter'
 import MessageHistory from './MessageHistory'
 import Panel from '../Panel'
@@ -59,6 +60,12 @@ function ValuePanel(props: Props) {
     return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
   }, [node, decodeMessage])
 
+  const getData = () => {
+    if (node?.message && node.message.payload) {
+      return node.message.payload.base64Message
+    }
+  }
+
   function messageMetaInfo() {
     if (!props.node || !props.node.message) {
       return null
@@ -93,10 +100,13 @@ function ValuePanel(props: Props) {
   const [value] =
     node && node.message && node.message.payload ? node.message.payload?.format(node.type) : [null, undefined]
   const copyValue = value ? <Copy getValue={getDecodedValue} /> : null
+  const saveValue = value ? <Save getData={getData} /> : null
 
   return (
     <Panel>
-      <span>Value {copyValue}</span>
+      <span>
+        Value {copyValue} {saveValue}
+      </span>
       <span style={{ width: '100%' }}>
         {renderViewOptions()}
         <div style={{ marginBottom: '-8px', marginTop: '8px' }}>

app/src/components/Tree/Infinitree.tsx

@@ -1,117 +0,0 @@
-import * as q from '../../../../backend/src/Model'
-import React, { MutableRefObject, RefObject, useCallback, useMemo, useRef } from 'react'
-import { FixedSizeList as List, ListOnItemsRenderedProps, ListOnScrollProps } from 'react-window'
-import { AutoSizer } from 'react-virtualized'
-import TreeNode from './TreeNode'
-import { TopicViewModel } from '../../model/TopicViewModel'
-
-class TreeList {
-  tree: q.TreeNode<TopicViewModel>
-
-  constructor(tree: q.TreeNode<TopicViewModel>) {
-    this.tree = tree
-  }
-
-  getVisibleChildAt(index: number): [q.TreeNode<TopicViewModel>, number] | undefined {
-    return this.tree.viewModel?.visibleChildAt(index, 1)
-  }
-
-  get length(): number {
-    return this.tree.viewModel?.visibleChildren() ?? 0
-  }
-}
-
-const InfinitreeComponent: React.FC<{
-  tree: q.TreeNode<TopicViewModel>
-  actions: any
-  selectTopicAction: any
-  settings: any
-  listRef: RefObject<List>
-  lastUpdate: number
-  name: string
-  fixedOnTreeNodeRef: MutableRefObject<q.TreeNode<TopicViewModel> | null>
-}> = ({ tree, actions, settings, listRef, fixedOnTreeNodeRef, name }) => {
-  const list = useMemo(() => new TreeList(tree), [tree])
-  const lastIndex = useRef<number | undefined>(0)
-  const lastScroll = useRef<number>(Date.now())
-  const getKey = useCallback(
-    (index: number) => {
-      let [treeNode] = list.getVisibleChildAt(index) ?? []
-
-      return treeNode?.hash() ?? index.toString()
-    },
-    [list]
-  )
-
-  const afterRender = useCallback(
-    ({ visibleStartIndex }: ListOnItemsRenderedProps) => {
-      if (!visibleStartIndex) {
-        return
-      }
-
-      let [treeNode] = list.getVisibleChildAt(visibleStartIndex) ?? []
-
-      if (treeNode) {
-        fixedOnTreeNodeRef.current = treeNode
-      }
-    },
-    [list]
-  )
-
-  const indexOfItem = fixedOnTreeNodeRef.current?.viewModel?.getIndex()
-
-  if (indexOfItem && lastIndex.current !== indexOfItem && Date.now() - lastScroll.current > 300) {
-    // Kind of dangerous to mutate scroll state directly, useEffect causes glitches
-    indexOfItem && listRef.current?.scrollToItem(indexOfItem, 'start')
-  }
-  lastIndex.current = indexOfItem
-
-  const disableScroll = useCallback((args: ListOnScrollProps) => {
-    if (!args.scrollUpdateWasRequested) {
-      lastScroll.current = Date.now()
-    }
-  }, [])
-
-  return (
-    <AutoSizer>
-      {({ width, height }) => (
-        <List
-          ref={listRef}
-          width={width}
-          height={height}
-          itemSize={20}
-          itemCount={list.length}
-          itemKey={getKey}
-          onItemsRendered={afterRender}
-          onScroll={disableScroll}
-          overscanCount={3}
-        >
-          {({ index, style }) => {
-            let [treeNode, depth = 0] = list.getVisibleChildAt(index) ?? []
-            if (!treeNode) {
-              return null
-            }
-
-            return (
-              <div style={{ ...style, paddingLeft: 12 * (depth - 1) }}>
-                <TreeNode
-                  treeNode={treeNode}
-                  isRoot={index === 0}
-                  doNotRenderSubnodes={true}
-                  name={index === 0 ? name : undefined}
-                  collapsed={false}
-                  settings={settings}
-                  lastUpdate={treeNode.lastUpdate}
-                  actions={actions}
-                  selectTopicAction={actions.selectTopic}
-                />
-              </div>
-            )
-          }}
-        </List>
-      )}
-    </AutoSizer>
-  )
-}
-
-export const Infinitree = InfinitreeComponent

app/src/components/Tree/TreeNode/effects/useViewModel.tsx

@@ -4,9 +4,9 @@ import { TopicViewModel } from '../../../../model/TopicViewModel'
 
 export function useViewModel(treeNode: q.TreeNode<TopicViewModel> | undefined) {
   useEffect(() => {
-    // if (treeNode && !treeNode?.viewModel) {
-    //   treeNode.viewModel = new TopicViewModel(treeNode)
-    // }
+    if (treeNode && !treeNode?.viewModel) {
+      treeNode.viewModel = new TopicViewModel(treeNode)
+    }
     treeNode?.viewModel?.retain()
 
     return function cleanup() {

app/src/components/Tree/TreeNode/index.tsx

@@ -18,7 +18,6 @@ export interface Props {
   treeNode: q.TreeNode<TopicViewModel>
   name?: string | undefined
   collapsed?: boolean | undefined
-  doNotRenderSubnodes?: boolean
   classes: any
   lastUpdate: number
   actions: typeof treeActions
@@ -28,8 +27,8 @@ export interface Props {
 }
 
 function TreeNodeComponent(props: Props) {
-  const { actions, classes, settings, theme, treeNode, lastUpdate, name, doNotRenderSubnodes } = props
-  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(!treeNode.viewModel?.isExpanded())
+  const { actions, classes, settings, theme, treeNode, lastUpdate, name } = props
+  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(undefined)
   const [selected, selectionLastUpdate, setSelected] = useSelectionState(false)
   const nodeRef = useRef<HTMLDivElement>()
   const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props)
@@ -95,7 +94,7 @@ function TreeNodeComponent(props: Props) {
 
   return useMemo(() => {
     function renderNodes() {
-      if (isCollapsed || doNotRenderSubnodes) {
+      if (isCollapsed) {
         return null
       }
 
@@ -135,7 +134,7 @@ function TreeNodeComponent(props: Props) {
         {renderNodes()}
       </div>
     )
-  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme, mouseOver, settings, doNotRenderSubnodes])
+  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme, mouseOver, settings])
 }
 
 export default withStyles(styles, { withTheme: true })(React.memo(TreeNodeComponent))

app/src/components/Tree/index.tsx

@@ -1,6 +1,6 @@
 import * as q from '../../../../backend/src/Model'
-import React, { useCallback, useMemo, useRef } from 'react'
-import { Infinitree } from './Infinitree'
+import React from 'react'
+import TreeNode from './TreeNode'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -8,8 +8,6 @@ import { KeyCodes } from '../../utils/KeyCodes'
 import { SettingsState } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { treeActions } from '../../actions'
-import { FixedSizeList as List } from 'react-window'
-import { useSubscription } from '../hooks/useSubscription'
 const MovingAverage = require('moving-average')
 
 const averagingTimeInterval = 10 * 1000
@@ -26,64 +24,84 @@ interface Props {
   settings: SettingsState
 }
 
-function useArrowKeyEventHandler(actions: typeof treeActions) {
-  return useCallback(
-    (event: React.KeyboardEvent) => {
-      switch (event.keyCode) {
-        case KeyCodes.arrow_down:
-          actions.moveSelectionUpOrDownwards('next')
-          event.preventDefault()
-          break
-        case KeyCodes.arrow_up:
-          actions.moveSelectionUpOrDownwards('previous')
-          event.preventDefault()
-          break
-        case KeyCodes.arrow_left:
-          actions.moveOutward()
-          event.preventDefault()
-          break
-        case KeyCodes.arrow_right:
-          actions.moveInward()
-          event.preventDefault()
-          break
-      }
-    },
-    [actions]
-  )
+interface State {
+  lastUpdate: number
 }
 
-const TreeComponent: React.FC<Props> = props => {
-  const keyEventHandler = useArrowKeyEventHandler(props.actions)
-  const performanceCallback = useCallback((ms: number) => {
+function useArrowKeyEventHandler(actions: typeof treeActions) {
+  return (event: React.KeyboardEvent) => {
+    switch (event.keyCode) {
+      case KeyCodes.arrow_down:
+        actions.moveSelectionUpOrDownwards('next')
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_up:
+        actions.moveSelectionUpOrDownwards('previous')
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_left:
+        actions.moveOutward()
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_right:
+        actions.moveInward()
+        event.preventDefault()
+        break
+    }
+  }
+}
+
+class TreeComponent extends React.PureComponent<Props, State> {
+  private updateTimer?: any
+  private perf: number = 0
+  private renderTime = 0
+
+  constructor(props: any) {
+    super(props)
+    this.state = { lastUpdate: 0 }
+  }
+
+  private keyEventHandler = useArrowKeyEventHandler(this.props.actions)
+  private performanceCallback = (ms: number) => {
     average.push(Date.now(), ms)
-  }, [])
+  }
 
-  const updateTimer = useRef<NodeJS.Timeout | number>()
-  const perf = useRef<number>(performance.now())
-  const renderTime = useRef<number>(0)
-  const listRef = useRef<List>(null)
-  const [lastUpdate, triggerUpdate] = React.useState(0)
+  public componentWillReceiveProps(nextProps: Props) {
+    if (this.props.tree !== nextProps.tree) {
+      if (this.props.tree) {
+        this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
+      }
+      if (nextProps.tree) {
+        nextProps.tree.didUpdate.subscribe(this.throttledTreeUpdate)
+      }
+      this.setState(this.state)
+    }
+  }
 
-  const throttledTreeUpdate = useCallback(() => {
-    if (updateTimer.current) {
+  public componentWillUnmount() {
+    this.props.tree && this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
+  }
+
+  public throttledTreeUpdate = () => {
+    if (this.updateTimer) {
       return
     }
 
     const expectedRenderTime = average.forecast()
-    const updateInterval = Math.max(expectedRenderTime * 7, 500)
-    const timeUntilNextUpdate = updateInterval - (performance.now() - renderTime.current)
+    const updateInterval = Math.max(expectedRenderTime * 7, 300)
+    const timeUntilNextUpdate = updateInterval - (performance.now() - this.renderTime)
 
-    updateTimer.current = setTimeout(
+    this.updateTimer = setTimeout(
       () => {
         window.requestIdleCallback(
           () => {
-            updateTimer.current && clearTimeout(updateTimer.current)
-            updateTimer.current = undefined
-            renderTime.current = performance.now()
+            this.updateTimer && clearTimeout(this.updateTimer)
+            this.updateTimer = undefined
+            this.renderTime = performance.now()
 
             window.requestIdleCallback(
               () => {
-                triggerUpdate(renderTime.current)
+                this.setState({ lastUpdate: this.renderTime })
               },
               { timeout: 100 }
             )
@@ -93,52 +111,49 @@ const TreeComponent: React.FC<Props> = props => {
       },
       Math.max(0, timeUntilNextUpdate)
     )
-  }, [])
+  }
 
-  perf.current = performance.now()
-  window.requestIdleCallback(() => {
-    performanceCallback(performance.now() - perf.current)
-  })
-  const fixedOnTreeNodeRef = useRef<q.TreeNode<TopicViewModel> | null>(null)
+  public componentWillUpdate() {
+    this.perf = performance.now()
+  }
 
-  useSubscription(props.tree?.didUpdate, throttledTreeUpdate)
+  public componentDidUpdate() {
+    this.performanceCallback(performance.now() - this.perf)
+  }
 
-  const style: React.CSSProperties = useMemo(
-    () => ({
+  public render() {
+    const { tree } = this.props
+    if (!tree) {
+      return null
+    }
+
+    const style: React.CSSProperties = {
       lineHeight: '1.1',
       cursor: 'default',
-      // overflowY: 'scroll',
-      // overflowX: 'hidden',
+      overflowY: 'scroll',
+      overflowX: 'hidden',
       height: '100%',
       width: '100%',
       outline: '24px black !important',
       paddingBottom: '16px', // avoid conflict with chart panel Resizer
-    }),
-    []
-  )
+    }
 
-  const { tree } = props
-  if (!tree) {
-    return null
+    return (
+      <div style={style} tabIndex={0} onKeyDown={this.keyEventHandler}>
+        <TreeNode
+          key={tree.hash()}
+          isRoot={true}
+          treeNode={tree}
+          name={this.props.host}
+          collapsed={false}
+          settings={this.props.settings}
+          lastUpdate={tree.lastUpdate}
+          actions={this.props.actions}
+          selectTopicAction={this.props.actions.selectTopic}
+        />
+      </div>
+    )
   }
-
-  const rendered = (
-    <div style={style} tabIndex={0} onKeyDown={keyEventHandler}>
-      <Infinitree
-        lastUpdate={lastUpdate}
-        listRef={listRef}
-        key={tree.hash()}
-        fixedOnTreeNodeRef={fixedOnTreeNodeRef}
-        tree={tree}
-        name={props.host ?? ''}
-        actions={props.actions}
-        selectTopicAction={props.actions.selectTopic}
-        settings={props.settings}
-      />
-    </div>
-  )
-
-  return rendered
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/helper/Save.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import { connect } from 'react-redux'
+import Check from '@material-ui/icons/Check'
+import CustomIconButton from './CustomIconButton'
+
+import { SaveAlt } from '@material-ui/icons'
+import { bindActionCreators } from 'redux'
+import { rendererRpc, writeToFile } from '../../../../events'
+import { makeSaveDialogRpc } from '../../../../events/OpenDialogRequest'
+
+import { globalActions } from '../../actions'
+
+export async function saveToFile(data: string): Promise<string | undefined> {
+  const rejectReasons = {
+    errorWritingFile: 'Error writing file',
+  }
+
+  const { canceled, filePath } = await rendererRpc.call(makeSaveDialogRpc(), {
+    securityScopedBookmarks: true,
+  })
+
+  if (!canceled && filePath !== undefined) {
+    try {
+      const filename = await rendererRpc.call(writeToFile, { filePath, data })
+      return filePath
+    } catch (error) {
+      throw rejectReasons.errorWritingFile
+    }
+  }
+}
+
+interface Props {
+  getData: () => string | undefined
+  actions: {
+    global: typeof globalActions
+  }
+}
+
+interface State {
+  didSave: boolean
+}
+
+class Save extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { didSave: false }
+  }
+
+  private handleClick = async (event: React.MouseEvent) => {
+    event.stopPropagation()
+    const data = this.props.getData()
+    if (data != undefined) {
+      const filename = await saveToFile(data)
+      this.props.actions.global.showNotification(`Saved to ${filename}`)
+      this.setState({ didSave: true })
+      setTimeout(() => {
+        this.setState({ didSave: false })
+      }, 1500)
+    }
+  }
+
+  public render() {
+    const icon = !this.state.didSave ? (
+      <SaveAlt fontSize="inherit" />
+    ) : (
+      <Check fontSize="inherit" style={{ cursor: 'default' }} />
+    )
+
+    return (
+      <CustomIconButton onClick={this.handleClick} tooltip="Save to file">
+        <div style={{ marginTop: '2px' }}>{icon}</div>
+      </CustomIconButton>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      global: bindActionCreators(globalActions, dispatch),
+    },
+  }
+}
+
+export default connect(undefined, mapDispatchToProps)(Save)

app/src/model/TopicViewModel.ts

@@ -1,9 +1,9 @@
 import * as q from '../../../backend/src/Model'
-import { Destroyable, MemoryLifecycle } from '../../../backend/src/Model/Destroyable'
+import { Destroyable } from '../../../backend/src/Model/Destroyable'
 import { MessageDecoder, decoders } from '../decoders'
 import { EventDispatcher } from '../../../events'
 
-function findDecoder<T extends Destroyable & MemoryLifecycle>(node: q.TreeNode<T>): TopicDecoder | undefined {
+function findDecoder<T extends Destroyable>(node: q.TreeNode<T>): TopicDecoder | undefined {
   const decoder = decoders.find(
     decoder =>
       decoder.canDecodeTopic?.(node.path()) || (node.message?.payload && decoder.canDecodeData?.(node.message?.payload))
@@ -19,7 +19,7 @@ function findDecoder<T extends Destroyable & MemoryLifecycle>(node: q.TreeNode<T
 
 type TopicDecoder = { decoder: MessageDecoder; format: string | undefined }
 
-export class TopicViewModel implements Destroyable, MemoryLifecycle {
+export class TopicViewModel implements Destroyable {
   private selected: boolean
   private expanded: boolean
   private owner: q.TreeNode<TopicViewModel> | undefined
@@ -46,89 +46,10 @@ export class TopicViewModel implements Destroyable, MemoryLifecycle {
     this.onDecoderChange.dispatch(override)
   }
 
-  private clearCache = () => {
-    if (this._cachedChildTopicCount) {
-      this._cachedChildTopicCount = undefined
-      // when child changes, parents are affected as well
-      this.owner?.sourceEdge?.source?.viewModel?.clearCache()
-    }
-  }
-
   public constructor(treeNode: q.TreeNode<TopicViewModel>) {
     this.owner = treeNode
     this.selected = false
-    this.expanded = true
-    treeNode.onMerge.subscribe(this.clearCache)
-  }
-
-  private _cachedChildTopicCount: number | undefined = undefined
-
-  /**
-   * This function only returns valid values if parents are expanded
-   * @returns
-   */
-  public getIndex(): number {
-    if (!this.owner) {
-      throw new Error('integrity error')
-    }
-
-    const source = this.owner.sourceEdge?.source
-
-    const parentIndex = source?.viewModel?.getIndex()
-    // If we have a parent, we have its index + 1 (at least)
-    const parentIndexWithDepth = parentIndex !== undefined ? parentIndex + 1 : 0
-    let position = 0
-    const edgeToMatch = this.owner.sourceEdge
-    for (const edge of source?.edgeArray ?? []) {
-      if (edge === edgeToMatch) {
-        break
-      }
-      position += edge.target.viewModel?.visibleChildren() ?? 1
-    }
-
-    return parentIndexWithDepth + position
-  }
-
-  public visibleChildAt(
-    index: number,
-    depth: number = 0,
-    parentOffset: number = 0
-  ): [q.TreeNode<TopicViewModel>, number] | undefined {
-    if (!this.owner) {
-      throw new Error('integrity error')
-    }
-    const node = this.owner
-
-    if (parentOffset === index) {
-      return [node, depth]
-    }
-
-    let position = parentOffset + 1
-    for (const edge of node.edgeArray) {
-      let viewModel = edge.target.viewModel
-      const nextPosition = position + (viewModel?.visibleChildren() ?? 0)
-      if (nextPosition > index) {
-        return viewModel?.visibleChildAt(index, depth + 1, position)
-      }
-      position = nextPosition
-    }
-  }
-
-  public visibleChildren(): number {
-    if (!this.owner) {
-      throw new Error('integrity error')
-    }
-
-    if (this._cachedChildTopicCount === undefined) {
-      if (!this.expanded) {
-        return 1
-      }
-
-      this._cachedChildTopicCount =
-        1 + this.owner.edgeArray.map(e => e.target.viewModel?.visibleChildren() ?? 1).reduce((a, b) => a + b, 0)
-    }
-
-    return this._cachedChildTopicCount as number
+    this.expanded = false
   }
 
   public retain() {
@@ -143,8 +64,7 @@ export class TopicViewModel implements Destroyable, MemoryLifecycle {
   }
 
   public destroy() {
-    // console.log('destroy', this.owner?.path(), this.referenceCounter)
-    this.owner?.onMerge.unsubscribe(this.clearCache)
+    console.log('destroy', this.referenceCounter)
     if (this.owner) {
       this.owner.viewModel = undefined
       this.owner = undefined
@@ -170,8 +90,6 @@ export class TopicViewModel implements Destroyable, MemoryLifecycle {
   public setExpanded(expanded: boolean, fireEvent: boolean) {
     const didChange = this.expanded !== expanded
     this.expanded = expanded
-    this.clearCache()
-
     if (didChange && fireEvent) {
       this.expandedChange.dispatch()
     }

app/webpack.config.js

@@ -41,6 +41,7 @@ module.exports = {
   devServer: {
     // contentBase: './dist', // content not from webpack
     hot: true,
+    liveReload: true,
   },
   target: 'electron-renderer',
   mode: 'production',
@@ -89,7 +90,6 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({ template: './index.html', file: './build/index.html', inject: false }),
     // new BundleAnalyzerPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
     // new webpack.IgnorePlugin({
     //   resourceRegExp: /\.\/build\/Debug\/addon/,
     //   contextRegExp: /heapdump$/
@@ -107,4 +107,7 @@ module.exports = {
   cache: {
     type: 'filesystem',
   },
+  optimization: {
+    runtimeChunk: 'single',
+  },
 }

app/yarn.lock

@@ -2,13 +2,6 @@
 # yarn lockfile v1
 
 
-"@babel/runtime@^7.0.0":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
-  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
@@ -607,21 +600,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized@^9.21.30":
-  version "9.21.30"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.30.tgz#ba39821bcb2487512a8a2cdd9fbdb5e6fc87fedb"
-  integrity sha512-4l2TFLQ8BCjNDQlvH85tU6gctuZoEdgYzENQyZHpgTHU7hoLzYgPSOALMAeA58LOWua8AzC6wBivPj1lfl6JgQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/react" "*"
-
-"@types/react-window@^1.8.8":
-  version "1.8.8"
-  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.8.tgz#c20645414d142364fbe735818e1c1e0a145696e3"
-  integrity sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*":
   version "18.2.64"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.64.tgz#3700fbb6b2fa60a6868ec1323ae4cbd446a2197d"
@@ -3153,11 +3131,6 @@ memfs@^4.6.0:
     sonic-forest "^1.0.0"
     tslib "^2.0.0"
 
-"memoize-one@>=3.1.1 <6":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -3846,14 +3819,6 @@ react-vis@^1.11.6:
     prop-types "^15.5.8"
     react-motion "^0.5.2"
 
-react-window@^1.8.10:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.10.tgz#9e6b08548316814b443f7002b1cf8fd3a1bdde03"
-  integrity sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    memoize-one ">=3.1.1 <6"
-
 react@^16.11:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -4503,7 +4468,7 @@ tree-dump@^1.0.0:
   resolved "https://registry.yarnpkg.com/tree-dump/-/tree-dump-1.0.1.tgz#b448758da7495580e6b7830d6b7834fca4c45b96"
   integrity sha512-WCkcRBVPSlHHq1dc/px9iOfqklvzCbdRwvlNfxGZsrHqf6aZttfPrd7DJTt6oR10dwUfpFFQeVTkPbBIZxX/YA==
 
-ts-loader@^9.2.6:
+ts-loader@^9.5.1:
   version "9.5.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.5.1.tgz#63d5912a86312f1fbe32cef0859fb8b2193d9b89"
   integrity sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==

backend/src/Model/Destroyable.ts

@@ -1,8 +1,3 @@
 export interface Destroyable {
   destroy(): void
 }
-
-export interface MemoryLifecycle {
-  retain(): void
-  release(): void
-}

backend/src/Model/Edge.ts

@@ -1,8 +1,8 @@
-import { Destroyable, MemoryLifecycle } from './Destroyable'
+import { Destroyable } from './Destroyable'
 import { Hashable, TreeNode } from './'
 const sha1 = require('sha1')
 
-export class Edge<ViewModel extends Destroyable & MemoryLifecycle> implements Hashable {
+export class Edge<ViewModel extends Destroyable> implements Hashable {
   public name: string
 
   public target!: TreeNode<ViewModel>

backend/src/Model/Tree.ts

@@ -1,10 +1,10 @@
 import { ChangeBuffer } from './ChangeBuffer'
-import { Destroyable, MemoryLifecycle } from './Destroyable'
+import { Destroyable } from './Destroyable'
 import { EventDispatcher, makeConnectionMessageEvent, MqttMessage, EventBusInterface } from '../../../events'
 import { TreeNode } from './'
 import { TreeNodeFactory } from './TreeNodeFactory'
 
-export class Tree<ViewModel extends Destroyable & MemoryLifecycle> extends TreeNode<ViewModel> {
+export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
   public connectionId?: string
   public updateSource?: EventBusInterface
   public nodeFilter?: (node: TreeNode<ViewModel>) => boolean

backend/src/Model/TreeNode.ts

@@ -1,11 +1,10 @@
-import { Destroyable, MemoryLifecycle } from './Destroyable'
+import { Destroyable } from './Destroyable'
 import { Edge, Message, RingBuffer, MessageHistory } from './'
 import { EventDispatcher } from '../../../events'
-import { TopicViewModel } from '../../../app/src/model/TopicViewModel'
 
 export type TopicDataType = 'string' | 'json' | 'hex'
 
-export class TreeNode<ViewModel extends Destroyable & MemoryLifecycle> {
+export class TreeNode<ViewModel extends Destroyable> {
   public sourceEdge?: Edge<ViewModel>
   public message?: Message
   public messageHistory: MessageHistory = new RingBuffer<Message>(20000, 100)
@@ -49,8 +48,6 @@ export class TreeNode<ViewModel extends Destroyable & MemoryLifecycle> {
     this.onMessage.subscribe(() => {
       this.lastUpdate = Date.now()
     })
-    this.viewModel = new TopicViewModel(this as any) as any
-    this.viewModel?.retain()
   }
 
   private previous(): TreeNode<ViewModel> | undefined {
@@ -120,7 +117,7 @@ export class TreeNode<ViewModel extends Destroyable & MemoryLifecycle> {
     for (const edge of this.edgeArray) {
       edge.target.destroy()
     }
-    this.viewModel?.release()
+    this.viewModel && this.viewModel.destroy()
     this.viewModel = undefined
     this.edgeArray = []
     this.edges = {}
@@ -150,7 +147,7 @@ export class TreeNode<ViewModel extends Destroyable & MemoryLifecycle> {
   }
 
   public hash(): string {
-    return `N${this.sourceEdge?.hash() ?? ''}`
+    return `N${this.sourceEdge ? this.sourceEdge.hash() : ''}`
   }
 
   public firstNode(): TreeNode<ViewModel> {

backend/src/Model/TreeNodeFactory.ts

@@ -1,11 +1,11 @@
-import { Destroyable, MemoryLifecycle } from './Destroyable'
+import { Destroyable } from './Destroyable'
 import { Edge, Tree, TreeNode } from './'
 import { MqttMessage } from '../../../events'
 import { Base64Message } from './Base64Message'
 
 export abstract class TreeNodeFactory {
   private static messageCounter = 0
-  public static insertNodeAtPosition<ViewModel extends Destroyable & MemoryLifecycle>(
+  public static insertNodeAtPosition<ViewModel extends Destroyable>(
     edgeNames: Array<string>,
     node: TreeNode<ViewModel>
   ) {
@@ -21,7 +21,7 @@ export abstract class TreeNodeFactory {
     node.sourceEdge!.target = node
   }
 
-  public static fromMessage<ViewModel extends Destroyable & MemoryLifecycle>(
+  public static fromMessage<ViewModel extends Destroyable>(
     mqttMessage: MqttMessage,
     receiveDate: Date = new Date()
   ): TreeNode<ViewModel> {

backend/src/Model/spec/TreeNode.ViewModel.spec.ts

@@ -1,67 +0,0 @@
-import 'mocha'
-
-import { expect } from 'chai'
-import { makeTreeNode } from './makeTreeNode'
-
-describe('TreeNode', () => {
-  const leaf1 = makeTreeNode('foo/bar', 'foo')
-  const leaf2 = makeTreeNode('foo/bar/baz', 'bar')
-  const leaf3 = makeTreeNode('foo/biz/baz', 'bar')
-  const leaf4 = makeTreeNode('bar/biz', 'bar')
-  const root = leaf1.firstNode()
-
-  root.updateWithNode(leaf2.firstNode())
-  root.updateWithNode(leaf3.firstNode())
-  root.updateWithNode(leaf4.firstNode())
-
-  describe('expanding the root should count the children', () => {
-    it('nothing expanded', () => {
-      expect(root?.viewModel?.visibleChildren()).to.eq(1)
-    })
-
-    it('root expanded', () => {
-      root.viewModel?.setExpanded(true)
-      expect(root?.viewModel?.visibleChildren()).to.eq(3)
-    })
-
-    it('root and "foo" expanded', () => {
-      root.viewModel?.setExpanded(true)
-      root.findNode('foo')!.viewModel!.setExpanded(true)
-      expect(root?.viewModel?.visibleChildren()).to.eq(5)
-    })
-  })
-
-  describe('visibleChildAt', () => {
-    it('nothing expanded', () => {
-      expect(root?.viewModel?.visibleChildAt(0)?.[0].path()).to.eq('')
-    })
-
-    it('root expanded', () => {
-      root.viewModel?.setExpanded(true)
-      expect(root?.viewModel?.visibleChildAt(1)?.[0].path()).to.eq('foo')
-    })
-
-    it('root and "foo" expanded', () => {
-      root.viewModel?.setExpanded(true)
-      root.findNode('foo')!.viewModel!.setExpanded(true)
-      expect(root?.viewModel?.visibleChildAt(4)?.[0].path()).to.eq('bar')
-    })
-  })
-
-  describe('getIndex', () => {
-    it('nothing expanded', () => {
-      expect(root?.viewModel?.getIndex()).to.eq(0)
-    })
-
-    it('root expanded', () => {
-      root.viewModel?.setExpanded(true)
-      expect(root?.viewModel?.visibleChildAt(1)?.[0].viewModel?.getIndex()).to.eq(1)
-    })
-
-    it('root and "foo" expanded', () => {
-      root.viewModel?.setExpanded(true)
-      root.findNode('foo')!.viewModel!.setExpanded(true)
-      expect(root?.viewModel?.visibleChildAt(4)?.[0].viewModel?.getIndex()).to.eq(4)
-    })
-  })
-})

eslint.config.js

@@ -1,15 +0,0 @@
-const eslint = require('@eslint/js')
-const hooksPlugin = require('eslint-plugin-react-hooks')
-
-module.export = [
-  // eslint.configs.recommended,
-  {
-    // files: ['app/src/**/*'],
-    plugins: {
-      'react-hooks': hooksPlugin,
-    },
-    ignores: ['build/**/*', 'dist/**/*', 'node_modules/**/*', 'app/build/**/*'],
-    ignorePatterns: ['build/**/*', 'dist/**/*', 'node_modules/**/*', 'app/build/**/*'],
-    rules: hooksPlugin.configs.recommended.rules,
-  },
-]

events/Events.ts

@@ -54,3 +54,11 @@ export function makeConnectionMessageEvent(connectionId: string): Event<MqttMess
 export const getAppVersion: RpcEvent<void, string> = {
   topic: 'getAppVersion',
 }
+
+export const writeToFile: RpcEvent<{ filePath: string, data: string, encoding?: string }, void> = {
+  topic: 'writeFile',
+}
+
+export const readFromFile: RpcEvent<{ filePath: string, encoding?: string }, Buffer> = {
+  topic: 'readFromFile',
+}

events/OpenDialogRequest.ts

@@ -1,4 +1,4 @@
-import { OpenDialogOptions, OpenDialogReturnValue } from 'electron'
+import { OpenDialogOptions, OpenDialogReturnValue, SaveDialogOptions, SaveDialogReturnValue } from 'electron'
 import { RpcEvent } from './EventSystem/Rpc'
 
 export function makeOpenDialogRpc(): RpcEvent<OpenDialogOptions, OpenDialogReturnValue> {
@@ -6,3 +6,9 @@ export function makeOpenDialogRpc(): RpcEvent<OpenDialogOptions, OpenDialogRetur
     topic: 'openDialog',
   }
 }
+
+export function makeSaveDialogRpc(): RpcEvent<SaveDialogOptions, SaveDialogReturnValue> {
+  return {
+    topic: 'saveDialog',
+  }
+}

src/electron.ts

@@ -4,14 +4,15 @@ import ConfigStorage from '../backend/src/ConfigStorage'
 import { app, BrowserWindow, Menu, dialog } from 'electron'
 import { autoUpdater } from 'electron-updater'
 import { ConnectionManager } from '../backend/src/index'
+import { promises as fsPromise } from 'fs'
 // import { electronTelemetryFactory } from 'electron-telemetry'
 import { menuTemplate } from './MenuTemplate'
 import buildOptions from './buildOptions'
 import { waitForDevServer, isDev, runningUiTestOnCi, loadDevTools } from './development'
 import { shouldAutoUpdate, handleAutoUpdate } from './autoUpdater'
 import { registerCrashReporter } from './registerCrashReporter'
-import { makeOpenDialogRpc } from '../events/OpenDialogRequest'
-import { backendRpc, getAppVersion } from '../events'
+import { makeOpenDialogRpc, makeSaveDialogRpc } from '../events/OpenDialogRequest'
+import { backendRpc, getAppVersion, writeToFile, readFromFile } from '../events'
 
 registerCrashReporter()
 
@@ -25,7 +26,20 @@ app.whenReady().then(() => {
   backendRpc.on(makeOpenDialogRpc(), async request => {
     return dialog.showOpenDialog(BrowserWindow.getFocusedWindow() ?? BrowserWindow.getAllWindows()[0], request)
   })
+
+  backendRpc.on(makeSaveDialogRpc(), async request => {
+    return dialog.showSaveDialog(BrowserWindow.getFocusedWindow() ?? BrowserWindow.getAllWindows()[0], request)
+  })
+
   backendRpc.on(getAppVersion, async () => app.getVersion())
+
+  backendRpc.on(writeToFile, async ({ filePath, data, encoding }) => {
+    await fsPromise.writeFile(filePath, Buffer.from(data, 'base64'), { encoding })
+  })
+
+  backendRpc.on(readFromFile, async ({ filePath, encoding }) => {
+    return fsPromise.readFile(filePath, { encoding })
+  })
 })
 
 autoUpdater.logger = log

src/spec/SceneBuilder.ts

@@ -19,6 +19,7 @@ export type SceneNames =
   | 'settings'
   | 'customize_subscriptions'
   | 'keyboard_shortcuts'
+  | 'sparkplugb-decoding'
   | 'end'
 
 export class SceneBuilder {

src/spec/demoVideo.ts

@@ -21,6 +21,7 @@ import { showMenu } from './scenarios/showMenu'
 import { showNumericPlot } from './scenarios/showNumericPlot'
 import { showOffDiffCapability } from './scenarios/showOffDiffCapability'
 import { showZoomLevel } from './scenarios/showZoomLevel'
+import { showSparkPlugDecoding } from './scenarios/showSparkplugDecoding'
 
 /**
  *  A convenience method that handles gracefully cleaning up the test run.
@@ -120,6 +121,11 @@ async function doStuff() {
     await sleep(1000)
   })
 
+  await scenes.record('sparkplugb-decoding', async () => {
+    await showText('SparkplugB Decoding', 2000, page, 'top')
+    await showSparkPlugDecoding(page)
+  })
+
   // disable this scenario for now until expandTopic is sorted out
   // await scenes.record('delete_retained_topics', async () => {
   //   await hideText(page)

src/spec/scenarios/copyValueToClipboard.ts

@@ -2,6 +2,6 @@ import { Page } from 'playwright'
 import { clickOn } from '../util'
 
 export async function copyValueToClipboard(browser: Page) {
-  const copyButton = await browser.locator('//span[contains(text(), "Value")]//button')
+  const copyButton = await browser.getByRole('button', { name: 'Value' }).getByRole('button').first()
   await clickOn(copyButton, 1)
 }

src/spec/scenarios/publishTopic.ts

@@ -14,7 +14,7 @@ export async function publishTopic(browser: Page) {
   const topicInput = await browser.locator('//input[contains(@value,"kitchen/lamp/state")][1]')
   await clickOn(topicInput)
   await deleteTextWithBackspaces(topicInput, 120, 5)
-  await writeText('set', topicInput, 300)
+  await writeText('set', topicInput)
 
   const payloadInput = await browser.locator('//*[contains(@class, "ace_text-input")]')
   await writeTextPayload(payloadInput, 'off')
@@ -34,5 +34,6 @@ export async function publishTopic(browser: Page) {
 }
 
 async function writeTextPayload(payloadInput: Locator, text: string) {
-  await payloadInput.fill(text)
+  await clickOn(payloadInput)
+  await writeText(text, payloadInput)
 }

src/spec/scenarios/searchTree.ts

@@ -4,7 +4,7 @@ import { clickOn, deleteTextWithBackspaces, showText, sleep, writeText } from '.
 export async function searchTree(text: string, browser: Page) {
   const searchField = await browser.locator('//input[contains(@placeholder, "Search")]')
   await clickOn(searchField, 1)
-  await writeText(text, searchField, 100)
+  await writeText(text, searchField)
   await sleep(1500)
 }
 

src/spec/scenarios/showNumericPlot.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright'
-import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep, writeText } from '../util'
+import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep } from '../util'
 
 export async function showNumericPlot(browser: Page) {
   await expandTopic('kitchen/coffee_maker', browser)
@@ -45,12 +45,12 @@ export async function showNumericPlot(browser: Page) {
 async function valuePreviewGuttersShowChartIcon(name: string, browser: Page) {
   for (let retries = 0; retries < 2; retries += 1) {
     try {
-      return await browser.locator(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`)
+      return await browser.locator(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`).first()
     } catch {
       // ignore
     }
   }
-  return browser.locator(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`)
+  return browser.locator(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`).first()
 }
 
 async function chartSettings(name: string, browser: Page) {

src/spec/scenarios/showSparkplugDecoding.ts

@@ -0,0 +1,9 @@
+import { Page } from 'playwright'
+import { expandTopic, sleep } from '../util'
+
+export async function showSparkPlugDecoding(browser: Page) {
+    // spell-checker: disable-next-line
+    await expandTopic('spBv1.0/Sparkplug Devices/DDATA/JavaScript Edge Node/Emulated Device', browser)
+    await browser.screenshot({ path: 'screen_sparkplugb_decoding.png' })
+    await sleep(1000)
+}

src/spec/util/index.ts

@@ -19,15 +19,14 @@ export function sleep(ms: number, required = false) {
   })
 }
 
-export async function writeText(text: string, element: Locator, delay = 0) {
-  return element.fill(text)
+export async function writeText(text: string, element: Locator, delay = 30) {
+  element.pressSequentially(text, { delay })
 }
 
-export async function deleteTextWithBackspaces(element: Locator, delay = 0, count = 0) {
-  // @ts-ignore
-  const length = count > 0 ? count : (await element.textContent()).length
+export async function deleteTextWithBackspaces(element: Locator, delay = 30, count = 0) {
+  const length = count > 0 ? count : (await element.inputValue()).length
   for (let i = 0; i < length; i += 1) {
-    await element.press('Backspace')
+    await element.press('Backspace', { delay: 30 })
     await sleep(delay)
   }
 }

yarn.lock

@@ -659,38 +659,6 @@
     minimatch "^3.0.4"
     plist "^3.0.4"
 
-"@eslint-community/eslint-utils@^4.2.0":
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
-  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
-  dependencies:
-    eslint-visitor-keys "^3.3.0"
-
-"@eslint-community/regexpp@^4.6.1":
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
-  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
-
-"@eslint/eslintrc@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.1.0.tgz#dbd3482bfd91efa663cbe7aa1f506839868207b6"
-  integrity sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.3.2"
-    espree "^10.0.1"
-    globals "^14.0.0"
-    ignore "^5.2.0"
-    import-fresh "^3.2.1"
-    js-yaml "^4.1.0"
-    minimatch "^3.1.2"
-    strip-json-comments "^3.1.1"
-
-"@eslint/js@9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.3.0.tgz#2e8f65c9c55227abc4845b1513c69c32c679d8fe"
-  integrity sha512-niBqk8iwv96+yuTwjM6bWg8ovzAPF9qkICsGtcoa5/dmqcEMfdwNAX7+/OHcJHc7wj7XqPxH98oAHytFYlw6Sw==
-
 "@fastify/busboy@^2.0.0":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d"
@@ -715,30 +683,6 @@
     reflect-metadata "^0.1.12"
     tslib "^1.8.1"
 
-"@humanwhocodes/config-array@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
-  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
-  dependencies:
-    "@humanwhocodes/object-schema" "^2.0.3"
-    debug "^4.3.1"
-    minimatch "^3.0.5"
-
-"@humanwhocodes/module-importer@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
-  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
-
-"@humanwhocodes/object-schema@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
-  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
-
-"@humanwhocodes/retry@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.0.tgz#6d86b8cb322660f03d3f0aa94b99bdd8e172d570"
-  integrity sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==
-
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"
@@ -842,7 +786,7 @@
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.3":
   version "1.2.8"
   resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -1570,17 +1514,12 @@ about-window@^1.12.1:
   resolved "https://registry.npmjs.org/about-window/-/about-window-1.15.2.tgz"
   integrity sha512-31mDAnLUfKm4uShfMzeEoS6a3nEto2tUt4zZn7qyAKedaTV4p0dGiW1n+YG8vtRh78mZiewghWJmoxDY+lHyYg==
 
-acorn-jsx@^5.3.2:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
-  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
-
 acorn-walk@^8.1.1:
   version "8.3.2"
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz"
   integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==
 
-acorn@^8.11.3, acorn@^8.4.1:
+acorn@^8.4.1:
   version "8.11.3"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@@ -1620,7 +1559,7 @@ ajv-keywords@^3.4.1:
   resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.10.0, ajv@^6.12.0, ajv@^6.12.4:
+ajv@^6.10.0, ajv@^6.12.0:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2536,7 +2475,7 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -2735,11 +2674,6 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-is@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
-  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
-
 default-require-extensions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.1.tgz"
@@ -3135,112 +3069,16 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
-eslint-plugin-react-hooks@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
-  integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
-
-eslint-scope@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.0.1.tgz#a9601e4b81a0b9171657c343fb13111688963cfc"
-  integrity sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^5.2.0"
-
-eslint-visitor-keys@^3.3.0:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
-  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
-
-eslint-visitor-keys@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz#e3adc021aa038a2a8e0b2f8b0ce8f66b9483b1fb"
-  integrity sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==
-
-eslint@^9.3.0:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.3.0.tgz#36a96db84592618d6ed9074d677e92f4e58c08b9"
-  integrity sha512-5Iv4CsZW030lpUqHBapdPo3MJetAPtejVW8B84GIcIIv8+ohFaddXsrn1Gn8uD9ijDb+kcYKFUVmC8qG8B2ORQ==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^3.1.0"
-    "@eslint/js" "9.3.0"
-    "@humanwhocodes/config-array" "^0.13.0"
-    "@humanwhocodes/module-importer" "^1.0.1"
-    "@humanwhocodes/retry" "^0.3.0"
-    "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.12.4"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.3.2"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^8.0.1"
-    eslint-visitor-keys "^4.0.0"
-    espree "^10.0.1"
-    esquery "^1.4.2"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^8.0.0"
-    find-up "^5.0.0"
-    glob-parent "^6.0.2"
-    ignore "^5.2.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    is-path-inside "^3.0.3"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.1.2"
-    natural-compare "^1.4.0"
-    optionator "^0.9.3"
-    strip-ansi "^6.0.1"
-    text-table "^0.2.0"
-
-espree@^10.0.1:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-10.0.1.tgz#600e60404157412751ba4a6f3a2ee1a42433139f"
-  integrity sha512-MWkrWZbJsL2UwnjxTX3gG8FneachS/Mwg7tdGXce011sJd5b0JG54vat5KHnfSBODZ3Wvzd2WnjxyzsRoVv+ww==
-  dependencies:
-    acorn "^8.11.3"
-    acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^4.0.0"
-
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
-  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
-  dependencies:
-    estraverse "^5.1.0"
-
-esrecurse@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
-  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
-  dependencies:
-    estraverse "^5.2.0"
-
-estraverse@^5.1.0, estraverse@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
-  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
-
 esutils@^1.1.6:
   version "1.1.6"
   resolved "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz"
   integrity sha512-RG1ZkUT7iFJG9LSHr7KDuuMSlujfeTtMNIcInURxKAxhMtwQhI3NrQhz26gZQYlsYZQKzsnwtpKrFKj9K9Qu1A==
 
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
-  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-
 event-stream@=3.3.4:
   version "3.3.4"
   resolved "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz"
@@ -3323,7 +3161,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
   integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
 
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -3349,11 +3187,6 @@ fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
-fast-levenshtein@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
-
 fastest-levenshtein@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
@@ -3422,7 +3255,7 @@ find-up-simple@^1.0.0:
   resolved "https://registry.npmjs.org/find-up-simple/-/find-up-simple-1.0.0.tgz"
   integrity sha512-q7Us7kcjj2VMePAa02hDAF6d+MzsdsAWEwYyOpwUtlerRBkOEPBCRZrAV4XfcSN8fHAgaD0hP7miwoay6DCprw==
 
-find-up@5.0.0, find-up@^5.0.0:
+find-up@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
   integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
@@ -3724,13 +3557,6 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
-  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
-  dependencies:
-    is-glob "^4.0.3"
-
 glob@8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz"
@@ -3800,11 +3626,6 @@ globals@^11.1.0:
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^14.0.0:
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
-  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
-
 globalthis@^1.0.1, globalthis@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz"
@@ -4076,12 +3897,12 @@ ignore-walk@^6.0.4:
   dependencies:
     minimatch "^9.0.0"
 
-ignore@^5.2.0, ignore@^5.2.4:
+ignore@^5.2.4:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
-import-fresh@^3.2.1, import-fresh@^3.3.0:
+import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -4283,7 +4104,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -4317,11 +4138,6 @@ is-obj@^2.0.0:
   resolved "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
-is-path-inside@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
-  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
-
 is-plain-obj@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz"
@@ -4622,11 +4438,6 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
-json-stable-stringify-without-jsonify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
-
 json-stringify-nice@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/json-stringify-nice/-/json-stringify-nice-1.1.4.tgz#2c937962b80181d3f317dd39aa323e14f5a60a67"
@@ -4698,14 +4509,6 @@ leven@^2.1.0:
   resolved "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz"
   integrity sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==
 
-levn@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
-  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
-  dependencies:
-    prelude-ls "^1.2.1"
-    type-check "~0.4.0"
-
 libnpmaccess@^8.0.1:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/libnpmaccess/-/libnpmaccess-8.0.5.tgz#ef14fecab8385669e91d6be27971ae448064211f"
@@ -4900,11 +4703,6 @@ lodash.isstring@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
   integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
 
-lodash.merge@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
-  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
-
 lodash.uniqby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
@@ -5126,7 +4924,7 @@ minimatch@5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -5328,11 +5126,6 @@ mz@^2.4.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-natural-compare@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
-  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
-
 negotiator@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
@@ -5706,18 +5499,6 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
-optionator@^0.9.3:
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
-  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
-  dependencies:
-    deep-is "^0.1.3"
-    fast-levenshtein "^2.0.6"
-    levn "^0.4.1"
-    prelude-ls "^1.2.1"
-    type-check "^0.4.0"
-    word-wrap "^1.2.5"
-
 p-cancelable@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz"
@@ -6127,11 +5908,6 @@ postcss-selector-parser@^6.0.10:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-prelude-ls@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
-  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
-
 prettier@^3.2.5:
   version "3.2.5"
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz"
@@ -6993,7 +6769,16 @@ stream-shift@^1.0.2:
   resolved "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz"
   integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7063,7 +6848,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7077,6 +6862,13 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -7116,7 +6908,7 @@ strip-final-newline@^4.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-4.0.0.tgz#35a369ec2ac43df356e3edd5dcebb6429aa1fa5c"
   integrity sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
+strip-json-comments@3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -7234,7 +7026,7 @@ text-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-2.4.0.tgz#a1cfcc50cf34da41bfd047cc744f804d1680ea34"
   integrity sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==
 
-text-table@^0.2.0, text-table@~0.2.0:
+text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
@@ -7452,13 +7244,6 @@ tunnel@^0.0.6:
   resolved "https://registry.yarnpkg.com/tunnel/-/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
   integrity sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==
 
-type-check@^0.4.0, type-check@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
-  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
-  dependencies:
-    prelude-ls "^1.2.1"
-
 type-detect@^4.0.0, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz"
@@ -7765,11 +7550,6 @@ which@^4.0.0:
   dependencies:
     isexe "^3.1.1"
 
-word-wrap@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
-  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
-
 wordwrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -7780,7 +7560,7 @@ workerpool@6.2.1:
   resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -7798,6 +7578,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"