From 4ac08c00005ea0787acd9bc29f560c9647c1554d Mon Sep 17 00:00:00 2001
From: JP Stringham <jp@bloomdigital.to>
Date: Sat, 21 Feb 2026 13:34:08 -0500
Subject: [PATCH] Filtering and hovering

---
 default.css |   6 +-
 index.html  | 167 ++++++++++++++++++++++++++++++----------------------
 2 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/default.css b/default.css
index ce8f6d1..e3e4e46 100644
--- a/default.css
+++ b/default.css
@@ -15,13 +15,17 @@ h1 {
 
 .freq-entry {
     margin: 0 100px;
-    border-bottom: 1px solid #ffeecf;
 }
 
 .freq-entry span {
     display: none;
 }
 
+.freq-entry:hover span {
+    display: block;
+    background-color: #ffeecf;
+}
+
 .cat1,
 .cat2,
 .cat3 {
diff --git a/index.html b/index.html
index db393a8..ebf217d 100644
--- a/index.html
+++ b/index.html
@@ -23,100 +23,123 @@
 
     <script>
 
-        let content = document.getElementById("content");
-
-        data = data.slice(1, -1);
-        console.log(data);
-
-        let service_cats = {};
-
         let min_freq = 9999999;
         let max_freq = 0;
+        buildFreqDOM();
 
-        let current_scale = 50000;
+        resizeFreqDOM(70000, 20000000);
 
-        let i = 0;
-        let str = "";
-        for (let entry of data) {
-            i++;
+        function buildFreqDOM() {
+            let content = document.getElementById("content");
 
-            let services = [];
+            data = data.slice(1, -1);
+            console.log(data);
 
-            for (service_name in entry.primary) {
-                let service_slug = service_name.replaceAll(' ', '_');
-                if (service_cats[service_slug] == null) {
-                    service_cats[service_slug] = 0;
+            let service_cats = {};
+
+            let i = 0;
+            let str = "";
+            for (let entry of data) {
+                i++;
+
+                let services = [];
+
+                for (service_name in entry.primary) {
+                    let service_slug = service_name.replaceAll(' ', '_');
+                    if (service_cats[service_slug] == null) {
+                        service_cats[service_slug] = 0;
+                    }
+
+                    service_cats[service_slug]++;
+
+                    let service_span = document.createElement("span");
+                    service_span.className = service_slug;
+                    service_span.innerHTML = service_name;
+                    services.push(service_span);
                 }
 
-                service_cats[service_slug]++;
+                let hi_freq = entry.maxf;
+                let low_freq = entry.minf;
 
-                let service_span = document.createElement("span");
-                service_span.className = service_slug;
-                service_span.innerHTML = service_name;
-                services.push(service_span);
+                min_freq = Math.min(min_freq, low_freq);
+                max_freq = Math.max(max_freq, hi_freq);
+
+                let container = document.createElement('div');
+                container.className = "freq-entry";
+                container.dataset['minf'] = low_freq;
+                container.dataset['maxf'] = hi_freq;
+
+                let freq_range_span = document.createElement('span');
+                freq_range_span.innerHTML = `${low_freq} → ${hi_freq}`;
+                container.appendChild(freq_range_span);
+                for (let s of services) {
+                    container.appendChild(s);
+                }
+                content.appendChild(container);
             }
 
-            let hi_freq = entry.maxf;
-            let low_freq = entry.minf;
+            let max_min = document.createElement('div');
+            max_min.innerHTML = min_freq + "kHz to " + max_freq + "kHz";
+            content.prepend(max_min);
 
-            min_freq = Math.min(min_freq, low_freq);
-            max_freq = Math.max(max_freq, hi_freq);
-
-
-            let range = hi_freq - low_freq;
-
-            if (range < current_scale) {
-                continue;
+            let categories = document.createElement('div');
+            for (let service in service_cats) {
+                let span = document.createElement('span');
+                span.className = service;
+                span.innerHTML = service.replaceAll('_', ' ');
+                categories.appendChild(span);
             }
+            content.prepend(categories);
 
-            let ci = i * 6.28 / data.length;
-            let r = Math.sin(ci) * 64 + 127;
-            let g = Math.sin(ci + 2) * 64 + 127;
-            let b = Math.sin(ci + 4) * 64 + 127;
-            let color = `rgb(${r}, ${g}, ${b})`;
-            let container = document.createElement('div');
-            container.style.height = range / current_scale + 'px';
-            container.style.backgroundColor = color;
-            container.className = "freq-entry";
+            // find all elements tagged with service cats and replace them with cat{x}
+            // for styling
+            // console.log(service_cats);
+            let current_cat = 1;
+            for (let service in service_cats) {
+                // console.log(`Searching for elements with ${service}`);
+                let elems = [...document.getElementsByClassName(service)];
+                // console.log(elems);
+                for (let elem of elems) {
+                    // console.log(`Removing ${service} from ${elem}`)
+                    // console.log(elem);
+                    elem.classList.remove(service);
+                    elem.classList.add("cat" + current_cat);
+                }
 
-            let freq_range_span = document.createElement('span');
-            freq_range_span.innerHTML = `${low_freq} → ${hi_freq}`;
-            container.appendChild(freq_range_span);
-            for (let s of services) {
-                container.appendChild(s);
+                current_cat = (current_cat + 1) % 3 + 1;
             }
-            content.appendChild(container);
         }
 
-        let max_min = document.createElement('div');
-        max_min.innerHTML = min_freq + "kHz to " + max_freq + "kHz";
-        content.prepend(max_min);
+        function resizeFreqDOM(min_freq, max_freq) {
 
-        let categories = document.createElement('div');
-        for (let service in service_cats) {
-            let span = document.createElement('span');
-            span.className = service;
-            span.innerHTML = service.replaceAll('_', ' ');
-            categories.appendChild(span);
-        }
-        content.prepend(categories);
+            let height = 600;
 
-        // find all elements tagged with service cats and replace them with cat{x}
-        // for styling
-        console.log(service_cats);
-        let current_cat = 1;
-        for (let service in service_cats) {
-            console.log(`Searching for elements with ${service}`);
-            let elems = [...document.getElementsByClassName(service)];
-            console.log(elems);
-            for (let elem of elems) {
-                console.log(`Removing ${service} from ${elem}`)
-                console.log(elem);
-                elem.classList.remove(service);
-                elem.classList.add("cat" + current_cat);
+            [...document.getElementsByClassName("freq-entry")].forEach((e) => e.style.display = 'none');
+            let freq_entries = [...document.getElementsByClassName("freq-entry")].filter((e) => e.dataset.minf >= min_freq && e.dataset.maxf < max_freq);
+
+            let total_range = max_freq - min_freq;
+            console.log(`Total range ${total_range} therefore ${height / total_range}px per kHz`);
+            // console.log(freq_entries);
+
+            for (let i = 0; i < freq_entries.length; i++) {
+                let entry = freq_entries[i];
+                let range = entry.dataset.maxf - entry.dataset.minf;
+
+                console.log(range);
+
+                let ci = i * 6.28 / data.length;
+                let r = Math.sin(ci) * 64 + 127;
+                let g = Math.sin(ci + 2) * 64 + 127;
+                let b = Math.sin(ci + 4) * 64 + 127;
+                let color = `rgb(${r}, ${g}, ${b})`;
+
+                entry.style.height = height * range / total_range + 'px';
+                entry.style.backgroundColor = color;
+                entry.style.display = 'block';
             }
 
-            current_cat = (current_cat + 1) % 3 + 1;
+
+
         }
 
     </script>