Skip to content

TSV-51 feat(gui): implement animated thread state transition diagram compone… #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vernolll merged 1 commit into from
Nov 2, 2026
Merged

TSV-51 feat(gui): implement animated thread state transition diagram compone… #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,8 @@ thread-scheduler-visualizer/
│ │ └── ThreadListModel.cpp # Thread list model implementation
│ ├── qml/
│ │ ├── BenchmarkWindow.qml # Benchmarking window & QML layout
│ │ └── main.qml # Main application window & QML UI layout
│ │ ├── main.qml # Main application window & QML UI layout
│ │ └── ThreadStateDiagram.qml # Thread state diagram & QML animation
│ ├── main.cpp # Entry point / Cross-platform icon loader
│ └── qml.qrc # Qt resource bundle for QML assets
├── tests/
Expand Down
1 change: 1 addition & 0 deletions src/qml.qrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
<qresource prefix="/">
<file>qml/main.qml</file>
<file>qml/BenchmarkWindow.qml</file>
<file>qml/ThreadStateDiagram.qml</file>
</qresource>
</RCC>
172 changes: 172 additions & 0 deletions src/qml/ThreadStateDiagram.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Rectangle {
id: stateDiagramRoot
color: "#1e1e1e"
border.color: "#333333"
radius: 5

property var threadModel: null

ColumnLayout {
anchors.fill: parent
anchors.margins: 10
spacing: 8

Text {
text: "Thread State Transition Diagram"
color: "#ffffff"
font.pixelSize: 14
font.bold: true
}

GridLayout {
Layout.fillWidth: true
Layout.fillHeight: true
columns: 3
rows: 2
rowSpacing: 10
columnSpacing: 10

// 1. NEW State Box
StateBox {
stateName: "NEW"
stateColor: "#616161"
threadModel: stateDiagramRoot.threadModel
filterState: "NEW"
Layout.fillWidth: true
Layout.fillHeight: true
}

// 2. READY State Box
StateBox {
stateName: "READY"
stateColor: "#0277bd"
threadModel: stateDiagramRoot.threadModel
filterState: "READY"
Layout.fillWidth: true
Layout.fillHeight: true
}

// 3. RUNNING State Box
StateBox {
stateName: "RUNNING"
stateColor: "#2e7d32"
threadModel: stateDiagramRoot.threadModel
filterState: "RUNNING"
Layout.fillWidth: true
Layout.fillHeight: true
}

// 4. WAITING State Box
StateBox {
stateName: "WAITING"
stateColor: "#ef6c00"
threadModel: stateDiagramRoot.threadModel
filterState: "WAITING"
Layout.fillWidth: true
Layout.fillHeight: true
}

// 5. TERMINATED State Box
StateBox {
stateName: "TERMINATED"
stateColor: "#424242"
threadModel: stateDiagramRoot.threadModel
filterState: "TERMINATED"
Layout.fillWidth: true
Layout.fillHeight: true
}

// Ïóñòàÿ ÿ÷åéêà äëÿ ñåòêè 3x2
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}

// Âíóòðåííèé êîìïîíåíò äëÿ êîíòåéíåðà êîíêðåòíîãî ñîñòîÿíèÿ
component StateBox: GroupBox {
property string stateName: ""
property color stateColor: "#fff"
property var threadModel: null
property string filterState: ""

title: stateName

background: Rectangle {
color: "#252526"
border.color: stateColor
border.width: 1
radius: 4
}

label: Label {
text: stateName
color: stateColor
font.bold: true
font.pixelSize: 11
leftPadding: 4
}

ScrollView {
anchors.fill: parent
contentWidth: availableWidth
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

Flow {
width: parent.width
spacing: 6

Repeater {
model: threadModel

delegate: Rectangle {
readonly property bool isTargetState: model.state === filterState

width: isTargetState ? 80 : 0
height: isTargetState ? 40 : 0
visible: width > 0

color: model.color || "#333"
radius: 4
border.color: "#ffffff"
border.width: 1

Behavior on width { NumberAnimation { duration: 250; easing.type: Easing.OutBack } }
Behavior on height { NumberAnimation { duration: 250; easing.type: Easing.OutBack } }

scale: hoverHandler.hovered ? 1.05 : 1.0
Behavior on scale { NumberAnimation { duration: 150 } }

HoverHandler { id: hoverHandler }

ToolTip.visible: hoverHandler.hovered
ToolTip.text: "Thread T" + model.threadId + "\nState: " + model.state + "\nRemaining: " + model.remainingTime

Column {
anchors.centerIn: parent
spacing: 2
Text {
text: "T" + model.threadId
color: "#ffffff"
font.bold: true
font.pixelSize: 11
anchors.horizontalCenter: parent.horizontalCenter
}
Text {
text: model.remainingTime + "/" + model.burstTime
color: "#dddddd"
font.pixelSize: 9
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}
}
}
}
Loading
Loading