Various Frontend Performance Improvements

docker/Dockerfile

@@ -1,3 +1,4 @@
+# Build with:
 #     docker build -f docker/Dockerfile -t qtoggle/qtoggleserver .
 #
 # Run with:

qtoggleserver/core/ports.py

@@ -484,7 +484,8 @@ async def enable(self) -> None:
 
         self.debug("enabling")
         self._enabled = True
-        self.invalidate_attr("enabled")
+        # Invalidate all attributes, not just `enabled`: others may be derived from it, e.g. `online`
+        self.invalidate_attrs()
 
         # Reset port expression
         if self._expression:
@@ -499,6 +500,7 @@ async def enable(self) -> None:
         except Exception:
             self.error("failed to enable")
             self._enabled = False
+            self.invalidate_attrs()
 
             raise
 
@@ -514,13 +516,14 @@ async def disable(self) -> None:
 
         self.debug("disabling")
         self._enabled = False
-        self.invalidate_attr("enabled")
+        self.invalidate_attrs()
 
         try:
             await self.handle_disable()
         except Exception:
             self.error("failed to disable")
             self._enabled = True
+            self.invalidate_attrs()
 
             raise
 

qtoggleserver/frontend/js/cache.js

@@ -706,9 +706,24 @@ export function findPortSlaveDevice(portId) {
         return null
     }
 
-    return ObjectUtils.findValue(slaveDevices, function (deviceName) {
-        return portId.startsWith(`${deviceName}.`)
-    })
+    /* A slave port id is the device name, a dot, then the port id, so walking the dot-separated prefixes and looking
+     * each one up costs a couple of lookups however many devices there are. Testing startsWith() against every device
+     * instead was proportional to their number, and this is called from inside a per-event rescan of the whole event
+     * bulk: with 20 devices, the 40000 lookups a 200-event bulk needs took 123ms, against 2.4ms this way.
+     *
+     * A device name can never contain a dot (see the `name` pattern in api/attrdefs.js), so only the prefix before the
+     * first dot can ever match; the loop then just falls through for a local port id that contains dots. */
+    let dot = portId.indexOf('.')
+    while (dot >= 0) {
+        let device = slaveDevices[portId.substring(0, dot)]
+        if (device) {
+            return device
+        }
+
+        dot = portId.indexOf('.', dot + 1)
+    }
+
+    return null
 }
 
 /**

qtoggleserver/frontend/js/constants.js

@@ -9,3 +9,12 @@
  * @type {Number}
  */
 export const COMMON_DEBOUNCE_DELAY = 1000
+
+/**
+ * The longest a debounced UI update may be postponed, however long the stream of events driving it lasts. Without a
+ * bound, each event pushes the update back by the full delay, so a device that reports faster than once a second holds
+ * the list at its old contents for as long as it keeps talking -- which reads as a frozen UI rather than a slow one.
+ * @alias qtoggle.constants.COMMON_DEBOUNCE_MAX_WAIT
+ * @type {Number}
+ */
+export const COMMON_DEBOUNCE_MAX_WAIT = 3000

qtoggleserver/frontend/js/dashboard/widgets/port-picker-field.js

@@ -60,6 +60,7 @@ class PortPickerField extends ComboField {
         let choices = ports.map(function (port) {
             return {
                 label: this.makeLabel(port),
+                matchPhrase: this.makeMatchPhrase(port),
                 value: port.id,
                 port: port
             }
@@ -71,19 +72,47 @@ class PortPickerField extends ComboField {
         return choices
     }
 
-    filterFunc(choice, searchText) {
-        let port = choice.port
+    /**
+     * Build the text a search filter is matched against. The parts of the port id appear in the order in which they
+     * are displayed, each one as it is displayed and, when that is a display name, followed by the corresponding id
+     * part, so that a filter can span them and either name can be searched for.
+     * @param {Object} port
+     * @returns {String}
+     */
+    makeMatchPhrase(port) {
         let device = Cache.findPortSlaveDevice(port.id)
-        let phrase = port.id.split('.')
+        let mainDevice = Cache.getMainDevice()
 
-        if (port.display_name) {
-            phrase.push(port.display_name)
-        }
-        if (device && device.attrs['display_name']) {
-            phrase.push(device.attrs['display_name'])
+        let parts = port.id.split('.')
+        if (parts.length === 1 && Config.slavesEnabled) {
+            parts.splice(0, 0, mainDevice.display_name || mainDevice.name)
         }
 
-        return phrase.some(p => StringUtils.intelliSearch(p, searchText) != null)
+        let phraseParts = []
+        parts.forEach(function (part, i) {
+
+            let displayName = null
+            if (i === 0 && device && device.attrs['display_name']) {
+                displayName = device.attrs['display_name']
+            }
+            else if (i === parts.length - 1 && port.display_name) {
+                displayName = port.display_name
+            }
+
+            if (displayName) {
+                phraseParts.push(displayName)
+            }
+            if (displayName !== part) {
+                phraseParts.push(part)
+            }
+
+        })
+
+        return phraseParts.join(' ').toLowerCase()
+    }
+
+    filterFunc(choice, searchText) {
+        return StringUtils.intelliSearch(choice.matchPhrase, searchText) != null
     }
 
     makeLabelHTML() {

qtoggleserver/frontend/js/dashboard/widgets/widget.js

@@ -269,7 +269,7 @@ class Widget extends mix().with(ViewMixin) {
 
         function handleMove(elemX, elemY) {
             /* Make the new offsets relative to the panel body */
-            let panelBodyOffset = widget._getPanelBody().offset()
+            let panelBodyOffset = widget._getPanelBodyOffset()
             let newOffsetLeft = elemX - panelBodyOffset.left
             let newOffsetTop = elemY - panelBodyOffset.top
 
@@ -381,7 +381,7 @@ class Widget extends mix().with(ViewMixin) {
             let newOffsetTop = pageY
 
             /* Make the new offset relative to the panel body */
-            let panelBodyOffset = widget._getPanelBody().offset()
+            let panelBodyOffset = widget._getPanelBodyOffset()
             newOffsetTop -= panelBodyOffset.top
 
             /* Compute the new offset in em units */
@@ -430,7 +430,7 @@ class Widget extends mix().with(ViewMixin) {
             let newOffsetRight = pageX
 
             /* Make the new offset relative to the panel body */
-            let panelBodyOffset = widget._getPanelBody().offset()
+            let panelBodyOffset = widget._getPanelBodyOffset()
             newOffsetRight -= panelBodyOffset.left
 
             /* Compute the new offset in em units */
@@ -483,7 +483,7 @@ class Widget extends mix().with(ViewMixin) {
             let newOffsetBottom = pageY
 
             /* Make the new offset relative to the panel body */
-            let panelBodyOffset = widget._getPanelBody().offset()
+            let panelBodyOffset = widget._getPanelBodyOffset()
             newOffsetBottom -= panelBodyOffset.top
 
             /* Compute the new offset in em units */
@@ -536,7 +536,7 @@ class Widget extends mix().with(ViewMixin) {
             let newOffsetLeft = pageX
 
             /* Make the new offset relative to the panel body */
-            let panelBodyOffset = widget._getPanelBody().offset()
+            let panelBodyOffset = widget._getPanelBodyOffset()
             newOffsetLeft -= panelBodyOffset.left
 
             /* Compute the new offset in em units */
@@ -581,6 +581,13 @@ class Widget extends mix().with(ViewMixin) {
         return this._panel.getBody()
     }
 
+    /* Panel body offset, in CSS pixels, so that it can be compared with dragging coordinates and cell widths */
+    _getPanelBodyOffset() {
+        let offset = this._getPanelBody().offset()
+
+        return {left: CSS.unscalePx(offset.left), top: CSS.unscalePx(offset.top)}
+    }
+
     /**
      * Return the current cell width in pixels.
      * @returns {Number}
@@ -1008,8 +1015,8 @@ class Widget extends mix().with(ViewMixin) {
                 let elemPosition = this._dragElem.position()
 
                 this._px2em = CSS.px2em(1, this._bodyDiv)
-                this._clickDragElemX = elemPosition.left
-                this._clickDragElemY = elemPosition.top
+                this._clickDragElemX = CSS.unscalePx(elemPosition.left)
+                this._clickDragElemY = CSS.unscalePx(elemPosition.top)
 
                 this.onDragBegin()
 

qtoggleserver/frontend/js/devices/devices-table.js

@@ -97,7 +97,9 @@ class DevicesTable extends PageTable {
         })
 
         this.deviceForm = null
-        this._updateUIDebouncer = new Debouncer(() => this.updateUI(this), Constants.COMMON_DEBOUNCE_DELAY)
+        this._updateUIDebouncer = new Debouncer(
+            () => this.updateUI(this), Constants.COMMON_DEBOUNCE_DELAY, Constants.COMMON_DEBOUNCE_MAX_WAIT
+        )
     }
 
     init() {