refactor: enhance UI components and improve theme properties for better visual consistency

refactor: modernize WaferMapTab layout and redesign ReadoutPanel statistics display
2026-06-11 13:09:04 -07:00 · 2026-06-11 12:57:52 -07:00
8 changed files with 274 additions and 121 deletions
@@ -107,25 +107,29 @@ Item {
            x: toggle.leftPadding
            y: parent.height / 2 - height / 2
            radius: Theme.radiusXs
-            color: toggle.checked ? Theme.primaryAccent : Theme.fieldBackground
+            color: toggle.checked ? Theme.primaryAccent : "transparent"
            border.width: Theme.borderThin
            border.color: toggle.checked ? Theme.primaryAccent : Theme.fieldBorder

-            Rectangle {
+            Text {
                anchors.centerIn: parent
-                width: 9
-                height: 9
-                radius: Theme.radiusXs
+                text: "✓"
+                font.pixelSize: 14
+                font.bold: true
+                color: Theme.panelBackground
                visible: toggle.checked
-                color: Theme.fieldBackground
+                // Small nudge to center the checkmark perfectly
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
            }
        }

        contentItem: Text {
            text: toggle.text
-            color: Theme.checkboxText
+            color: Theme.headingColor
            verticalAlignment: Text.AlignVCenter
            leftPadding: toggle.indicator.width + toggle.spacing
+            font.pixelSize: 13
        }
    }

@@ -26,8 +26,8 @@ Item {

    ColumnLayout {
        anchors.fill: parent
-        anchors.margins: Theme.panelPadding
-        spacing: Theme.rightPaneGap
+        anchors.margins: 16
+        spacing: 16

        // ── Toolbar ───────────────────────────────────────────────────────
        RowLayout {
@@ -176,7 +176,7 @@ Item {
        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
-            spacing: Theme.rightPaneGap
+            spacing: 16

            // Source panel — bordered card
            Rectangle {
@@ -207,6 +207,18 @@ Item {
                    showLabels: readoutPanel.showLabels
                }

+                // Horizontal separation line with vertical padding
+                Item {
+                    Layout.fillWidth: true
+                    implicitHeight: 32
+                    Rectangle {
+                        anchors.centerIn: parent
+                        width: parent.width
+                        height: 1
+                        color: Theme.cardBorder
+                    }
+                }
+
                TransportBar { Layout.fillWidth: true }
            }

@@ -9,6 +9,39 @@ ColumnLayout {
    property alias showLabels: labelsToggle.checked
    property alias heatmapBlend: heatmapSlider.value

+    component PanelCheckBox: CheckBox {
+        id: toggle
+        indicator: Rectangle {
+            implicitWidth: 18
+            implicitHeight: 18
+            x: toggle.leftPadding
+            y: parent.height / 2 - height / 2
+            radius: Theme.radiusXs
+            color: toggle.checked ? Theme.primaryAccent : "transparent"
+            border.width: Theme.borderThin
+            border.color: toggle.checked ? Theme.primaryAccent : Theme.fieldBorder
+
+            Text {
+                anchors.centerIn: parent
+                text: "✓"
+                font.pixelSize: 13
+                font.bold: true
+                color: Theme.panelBackground
+                visible: toggle.checked
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+
+        contentItem: Text {
+            text: toggle.text
+            color: Theme.headingColor
+            verticalAlignment: Text.AlignVCenter
+            leftPadding: toggle.indicator.width + toggle.spacing
+            font.pixelSize: toggle.font.pixelSize || 11
+        }
+    }
+
    // ── READOUT ───────────────────────────────────────────────────────────
    Label {
        text: "READOUT"
@@ -16,118 +49,120 @@ ColumnLayout {
        font.pixelSize: 10
        font.letterSpacing: 1.8
        font.weight: Font.Medium
-        bottomPadding: 4
+        topPadding: 6
+        bottomPadding: 8
    }

-    GridLayout {
-        columns: 2
-        rowSpacing: 4
-        columnSpacing: 4
+    Rectangle {
        Layout.fillWidth: true
+        implicitHeight: statsLayout.implicitHeight + 20
+        color: Theme.subtleSectionBackground
+        radius: Theme.radiusSm
+        border.color: Theme.cardBorder
+        border.width: 1

-        // MIN TEMP
-        Rectangle {
-            Layout.fillWidth: true; height: 52
-            color: Theme.subtleSectionBackground; radius: Theme.radiusSm
-            border.color: Theme.cardBorder; border.width: 1
-            ColumnLayout {
-                anchors { fill: parent; margins: 7 }
-                spacing: 1
-                Label { text: "MIN TEMP"; color: Theme.bodyColor; font.pixelSize: 9; font.letterSpacing: 1 }
-                Label {
-                    text: s.min !== undefined ? s.min + "  #" + s.minIndex : "—"
-                    color: Theme.sensorLow
-                    font.pixelSize: 15; font.weight: Font.Bold
+        ColumnLayout {
+            id: statsLayout
+            anchors { fill: parent; margins: 10 }
+            spacing: 8
+
+            // Min Temp Row
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Min Temp"; color: Theme.bodyColor; font.pixelSize: 11 }
+                Item { Layout.fillWidth: true }
+                RowLayout {
+                    spacing: 4
+                    Label {
+                        text: s.min !== undefined ? s.min : "—"
+                        color: Theme.sensorLow
+                        font.pixelSize: 13; font.weight: Font.Bold
+                    }
+                    Label {
+                        text: s.minIndex !== undefined ? "#" + s.minIndex : ""
+                        color: Theme.bodyColor
+                        font.pixelSize: 10
+                    }
                }
            }
-        }

-        // MAX TEMP
-        Rectangle {
-            Layout.fillWidth: true; height: 52
-            color: Theme.subtleSectionBackground; radius: Theme.radiusSm
-            border.color: Theme.cardBorder; border.width: 1
-            ColumnLayout {
-                anchors { fill: parent; margins: 7 }
-                spacing: 1
-                Label { text: "MAX TEMP"; color: Theme.bodyColor; font.pixelSize: 9; font.letterSpacing: 1 }
-                Label {
-                    text: s.max !== undefined ? s.max + "  #" + s.maxIndex : "—"
-                    color: Theme.sensorHigh
-                    font.pixelSize: 15; font.weight: Font.Bold
+            // Max Temp Row
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Max Temp"; color: Theme.bodyColor; font.pixelSize: 11 }
+                Item { Layout.fillWidth: true }
+                RowLayout {
+                    spacing: 4
+                    Label {
+                        text: s.max !== undefined ? s.max : "—"
+                        color: Theme.sensorHigh
+                        font.pixelSize: 13; font.weight: Font.Bold
+                    }
+                    Label {
+                        text: s.maxIndex !== undefined ? "#" + s.maxIndex : ""
+                        color: Theme.bodyColor
+                        font.pixelSize: 10
+                    }
                }
            }
-        }

-        // DIFFERENTIAL
-        Rectangle {
-            Layout.fillWidth: true; height: 52
-            color: Theme.subtleSectionBackground; radius: Theme.radiusSm
-            border.color: Theme.cardBorder; border.width: 1
-            ColumnLayout {
-                anchors { fill: parent; margins: 7 }
-                spacing: 1
-                Label { text: "DIFFERENTIAL"; color: Theme.bodyColor; font.pixelSize: 9; font.letterSpacing: 1 }
+            Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }
+
+            // Differential Row
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Differential"; color: Theme.bodyColor; font.pixelSize: 11 }
+                Item { Layout.fillWidth: true }
                Label {
                    text: s.diff !== undefined ? s.diff : "—"
                    color: Theme.headingColor
-                    font.pixelSize: 15; font.weight: Font.Bold
+                    font.pixelSize: 13; font.weight: Font.Bold
                }
            }
-        }

-        // AVERAGE
-        Rectangle {
-            Layout.fillWidth: true; height: 52
-            color: Theme.subtleSectionBackground; radius: Theme.radiusSm
-            border.color: Theme.cardBorder; border.width: 1
-            ColumnLayout {
-                anchors { fill: parent; margins: 7 }
-                spacing: 1
-                Label { text: "AVERAGE"; color: Theme.bodyColor; font.pixelSize: 9; font.letterSpacing: 1 }
+            // Average Row
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Average"; color: Theme.bodyColor; font.pixelSize: 11 }
+                Item { Layout.fillWidth: true }
                Label {
                    text: s.avg !== undefined ? s.avg : "—"
                    color: Theme.headingColor
-                    font.pixelSize: 15; font.weight: Font.Bold
+                    font.pixelSize: 13; font.weight: Font.Bold
                }
            }
-        }
-    }

-    // SIGMA — full-width
-    Rectangle {
-        Layout.fillWidth: true; height: 44
-        color: Theme.subtleSectionBackground; radius: Theme.radiusSm
-        border.color: Theme.cardBorder; border.width: 1
-        RowLayout {
-            anchors { fill: parent; leftMargin: 7; rightMargin: 7; topMargin: 4; bottomMargin: 4 }
-            ColumnLayout {
-                spacing: 1
-                Label { text: "SIGMA (σ)"; color: Theme.bodyColor; font.pixelSize: 9; font.letterSpacing: 1 }
-                Label { text: "3σ";        color: Theme.bodyColor; font.pixelSize: 9; font.letterSpacing: 1 }
-            }
-            Item { Layout.fillWidth: true }
-            ColumnLayout {
-                spacing: 1
+            Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }
+
+            // Sigma Row
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Sigma (σ)"; color: Theme.bodyColor; font.pixelSize: 11 }
+                Item { Layout.fillWidth: true }
                Label {
                    text: s.sigma !== undefined ? s.sigma : "—"
                    color: Theme.headingColor
-                    font.pixelSize: 15; font.weight: Font.Bold
-                    Layout.alignment: Qt.AlignRight
+                    font.pixelSize: 13; font.weight: Font.Bold
                }
+            }
+
+            // 3-Sigma Row
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "3σ Value"; color: Theme.bodyColor; font.pixelSize: 11 }
+                Item { Layout.fillWidth: true }
                Label {
                    text: s.threeSigma !== undefined ? s.threeSigma : "—"
                    color: Theme.bodyColor
                    font.pixelSize: 12; font.weight: Font.Medium
-                    Layout.alignment: Qt.AlignRight
                }
            }
        }
    }

-    Item { height: 8 }
+    Item { height: 12 }
    Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }
-    Item { height: 8 }
+    Item { height: 12 }

    // ── DISPLAY ───────────────────────────────────────────────────────────
    Label {
@@ -136,10 +171,11 @@ ColumnLayout {
        font.pixelSize: 10
        font.letterSpacing: 1.8
        font.weight: Font.Medium
-        bottomPadding: 4
+        topPadding: 6
+        bottomPadding: 8
    }

-    CheckBox {
+    PanelCheckBox {
        id: labelsToggle
        text: "Labels"
        checked: true
@@ -164,9 +200,9 @@ ColumnLayout {
        }
    }

-    Item { height: 8 }
+    Item { height: 12 }
    Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }
-    Item { height: 8 }
+    Item { height: 12 }

    // ── THRESHOLDS ────────────────────────────────────────────────────────
    Label {
@@ -175,10 +211,16 @@ ColumnLayout {
        font.pixelSize: 10
        font.letterSpacing: 1.8
        font.weight: Font.Medium
-        bottomPadding: 4
+        topPadding: 6
+        bottomPadding: 8
    }

-    Label { text: "Set Point (°C)"; color: Theme.bodyColor; font.pixelSize: 11 }
+    Label {
+        text: "Set Point (°C)"
+        color: Theme.bodyColor
+        font.pixelSize: 11
+        bottomPadding: 3
+    }
    TextField {
        id: spField
        Layout.fillWidth: true
@@ -198,9 +240,14 @@ ColumnLayout {
        onEditingFinished: pushThresholds()
    }

-    Item { height: 4 }
+    Item { height: 10 }

-    Label { text: "Margin (±°C)"; color: Theme.bodyColor; font.pixelSize: 11 }
+    Label {
+        text: "Margin (±°C)"
+        color: Theme.bodyColor
+        font.pixelSize: 11
+        bottomPadding: 3
+    }
    TextField {
        id: mgField
        Layout.fillWidth: true
@@ -220,9 +267,9 @@ ColumnLayout {
        onEditingFinished: pushThresholds()
    }

-    Item { height: 4 }
+    Item { height: 10 }

-    CheckBox {
+    PanelCheckBox {
        id: autoCheck
        text: "Auto range  (mean ± 1σ)"
        checked: true
@@ -2,17 +2,76 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import ISC
+import ".."

 ColumnLayout {
    spacing: 6

-    // ── Section label ─────────────────────────────────────────────────────
-    Label {
-        text: "SOURCE"
-        color: Theme.bodyColor
-        font.pixelSize: 10
-        font.letterSpacing: 1.8
-        font.weight: Font.Medium
+    // ── Section label & Refresh ───────────────────────────────────────────
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: 4
+
+        Label {
+            text: "SOURCE"
+            color: Theme.bodyColor
+            font.pixelSize: 10
+            font.letterSpacing: 1.8
+            font.weight: Font.Medium
+            topPadding: 6
+            bottomPadding: 8
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+        }
+
+        Button {
+            id: editBtn
+            text: "✎"
+            implicitWidth: 26
+            implicitHeight: 26
+            hoverEnabled: true
+            font.pixelSize: 14
+            background: Rectangle {
+                color: editBtn.pressed ? Theme.buttonPressed
+                     : editBtn.hovered ? Theme.buttonNeutralHover
+                     : "transparent"
+                radius: Theme.radiusSm
+            }
+            contentItem: Text {
+                text: parent.text
+                color: Theme.bodyColor
+                font: parent.font
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+            onClicked: {
+                file_browser.refreshFiles()
+                csvEditorDialog.open()
+            }
+        }
+
+        Button {
+            id: refreshBtn
+            text: "⟳"
+            implicitWidth: 26
+            implicitHeight: 26
+            hoverEnabled: true
+            font.pixelSize: 14
+            background: Rectangle {
+                color: refreshBtn.pressed ? Theme.buttonPressed
+                     : refreshBtn.hovered ? Theme.buttonNeutralHover
+                     : "transparent"
+                radius: Theme.radiusSm
+            }
+            contentItem: Text {
+                text: parent.text
+                color: Theme.bodyColor
+                font: parent.font
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+            onClicked: file_browser.refreshFiles()
+        }
    }

    // ── Directory button ──────────────────────────────────────────────────
@@ -82,7 +141,7 @@ ColumnLayout {
        delegate: ItemDelegate {
            id: fileItem
            width: ListView.view.width
-            padding: 0
+            padding: 8
            highlighted: false
            focusPolicy: Qt.NoFocus

@@ -131,11 +190,13 @@ ColumnLayout {

            contentItem: RowLayout {
                spacing: 8
-                anchors.margins: 8

                // Wafer-type avatar (circle)
                Rectangle {
-                    width: 28; height: 28
+                    implicitWidth: 28; implicitHeight: 28
+                    Layout.preferredWidth: 28
+                    Layout.preferredHeight: 28
+                    Layout.alignment: Qt.AlignVCenter
                    radius: 14
                    color: {
                        var t = modelData.waferType
@@ -158,9 +219,9 @@ ColumnLayout {
                    spacing: 1
                    Layout.fillWidth: true

-                    // Primary: serial number
+                    // Primary: wafer type + serial number
                    Label {
-                        text: modelData.serialNumber || modelData.baseName
+                        text: modelData.serialNumber ? (modelData.waferType + modelData.serialNumber) : modelData.baseName
                        color: Theme.headingColor
                        font.pixelSize: 13
                        font.weight: Font.Bold
@@ -226,4 +287,9 @@ ColumnLayout {
        color: Theme.bodyColor
        font.pixelSize: 10
    }
+
+    SelectFileDialog {
+        id: csvEditorDialog
+        tableModel: file_browser.files
+    }
 }
@@ -26,6 +26,26 @@ RowLayout {
        }
    }

+    // Frame counter badge on the left
+    Rectangle {
+        id: frameCounter
+        implicitWidth: frameCounterText.implicitWidth + 16
+        implicitHeight: 32
+        color: Theme.fieldBackground
+        border.color: Theme.cardBorder
+        border.width: Theme.borderThin
+        radius: Theme.radiusSm
+
+        Text {
+            id: frameCounterText
+            anchors.centerIn: parent
+            text: "Frame " + (streamController.frameIndex + 1) + " / " + streamController.frameTotal
+            color: Theme.headingColor
+            font.pixelSize: 11
+            font.weight: Font.Medium
+        }
+    }
+
    // Left fill — centers the button cluster
    Item { Layout.fillWidth: true }

@@ -80,12 +100,4 @@ RowLayout {
            streamController.setSpeed(speeds[idx])
        }
    }
-
-    Item { width: 8 }
-
-    Label {
-        text: "frame " + (streamController.frameIndex + 1) + " / " + streamController.frameTotal
-        color: Theme.bodyColor
-        font.pixelSize: 11
-    }
 }
@@ -81,7 +81,7 @@ QtObject {
    // ── 8. Tabs (footer tab bar) ─────────────────────────────────────────────
    readonly property color tabBarBackground: tone200
    readonly property color tabBackground: "transparent"
-    readonly property color tabActiveBackground: "transparent"
+    readonly property color tabActiveBackground: isDarkMode ? "#333333" : "#FFFFFF"
    readonly property color tabHoverBackground: tone300
    readonly property color tabBorder: "transparent"
    readonly property color tabText: toneMute
@@ -132,7 +132,7 @@ QtObject {
    readonly property int tabBarHeight: 34
    readonly property int tabBarPadding: 6
    readonly property int tabSpacing: 2
-    readonly property int tabRadius: 2
+    readonly property int tabRadius: 8
    readonly property int tabFontSize: 12
    readonly property int tabButtonMinWidth: 80
    // Settings page layout
@@ -123,6 +123,13 @@ class FileBrowser(QObject):
                wafer_type = metadata.get_wafer_type().upper() or (csv_path.stem[0].upper() if csv_path.stem else "")
                date_str = metadata.string_date_format()
                serial = metadata.wafer[1:] if len(metadata.wafer) > 1 else ""
+                if not serial:
+                    stem = csv_path.stem
+                    serial = stem[1:] if len(stem) > 1 else ""
+                if "-" in serial:
+                    serial = serial.split("-")[0]
+                if "_" in serial:
+                    serial = serial.split("_")[0]
                time_str = date_str[11:] if len(date_str) > 10 else ""
                self._files.append(
                    {
@@ -142,13 +149,18 @@ class FileBrowser(QObject):
                )
            except Exception:
                stem = csv_path.stem
+                serial_fallback = stem[1:] if len(stem) > 1 else ""
+                if "-" in serial_fallback:
+                    serial_fallback = serial_fallback.split("-")[0]
+                if "_" in serial_fallback:
+                    serial_fallback = serial_fallback.split("_")[0]
                self._files.append(
                    {
                        "selected": selected_state.get(str(csv_path), False),
                        "baseName": stem,
                        "wafer": stem,
                        "waferType": stem[0].upper() if stem else "",
-                        "serialNumber": stem[1:] if len(stem) > 1 else "",
+                        "serialNumber": serial_fallback,
                        "date": "",
                        "timeStr": "",
                        "chamber": "",
@@ -229,8 +229,8 @@ class WaferMapItem(QQuickPaintedItem):
        return groups

    def _scale(self, ds: int, r_mm: float) -> float:
-        """Pixels per mm. The wafer radius maps to ds//2 - 4 px."""
-        return (ds / 2 - 4) / r_mm
+        """Pixels per mm. The wafer radius maps to ds//2 - 24 px."""
+        return (ds / 2 - 24) / r_mm

    def _to_px(self, x_mm: float, y_mm: float, cx: int, cy: int, scale: float) -> tuple[int, int]:
        """Center-origin mm → pixel (top-left origin). Y is flipped."""
Author	SHA1	Message	Date
jack	1cd54e81fc	refactor: enhance UI components and improve theme properties for better visual consistency	2026-06-11 13:09:04 -07:00
jack	12bd778f13	refactor: modernize WaferMapTab layout and redesign ReadoutPanel statistics display	2026-06-11 12:57:52 -07:00