integrate checkbox filters

static/css/main.css

@@ -328,41 +328,6 @@ input[type="text"]:focus, select:focus {
     min-height: 500px;
 }
 
-.view-controls {
-    display: flex;
-    gap: 1.5rem;
-    align-items: center;
-}
-
-.filter-group {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.filter-group label {
-    font-size: 0.9rem;
-    color: #999;
-}
-
-.filter-group select,
-.filter-group input[type="range"] {
-    background-color: #1a1a1a;
-    border: 1px solid #555;
-    color: #c7c7c7;
-    padding: 0.25rem 0.5rem;
-}
-
-.filter-group select {
-    max-width: 150px;
-}
-
-#confidence-value {
-    min-width: 30px;
-    text-align: center;
-    color: #00ff41;
-}
-
 .graph-container {
     height: 800px;
     position: relative;
@@ -397,6 +362,79 @@ input[type="text"]:focus, select:focus {
     background: rgba(42, 42, 42, 1);
 }
 
+.graph-filter-panel {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    z-index: 10;
+    background: rgba(42, 42, 42, 0.9);
+    border: 1px solid #555;
+    color: #c7c7c7;
+    padding: 0.75rem;
+    font-family: 'Roboto Mono', monospace;
+    font-size: 0.8rem;
+    max-height: 40%;
+    overflow-y: auto;
+    display: flex;
+    gap: 1.5rem;
+}
+
+.filter-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.filter-column h4 {
+    color: #00ff41;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    border-bottom: 1px solid #444;
+    padding-bottom: 0.25rem;
+}
+
+.filter-column .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.filter-column label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.filter-column label:hover {
+    color: #00ff41;
+}
+
+.filter-column input[type="checkbox"] {
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    border: 1px solid #555;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    position: relative;
+}
+
+.filter-column input[type="checkbox"]:checked {
+    background-color: #00ff41;
+    border-color: #00ff41;
+}
+
+.filter-column input[type="checkbox"]:checked::after {
+    content: '✓';
+    position: absolute;
+    top: -3px;
+    left: 1px;
+    color: #1a1a1a;
+    font-size: 12px;
+}
+
+
 .graph-context-menu {
     position: absolute;
     z-index: 1000;