From 08c7a8a5b59e0b961979633411a09855c802b9bb Mon Sep 17 00:00:00 2001
From: Mick <119439091+mickbrowns1@users.noreply.github.com>
Date: Tue, 19 May 2026 11:56:52 -0400
Subject: [PATCH] Add Filter Simulator help panel on Ingest Dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a collapsible "How does this work?" panel explaining:
- What the simulator does (live PowerQuery count → GB projection)
- When to use it (after spotting a noisy source in Top Sources)
- How to fill in Source name (copy from dataSource.name column)
- What Event type does (optional narrowing)
- How the GB estimate is calculated
- Warning that it is read-only — no filters are applied automatically

Also updates Source name placeholder to show a concrete example.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/index.html | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 667939c..62664d0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -273,15 +273,30 @@ function renderIngest() {
       <div id="ig-sources"><p class="text-gray-600 text-sm">Loading…</p></div>
     </div>
     <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
-      <h2 class="text-sm font-medium text-gray-300 mb-1">Filter Simulator</h2>
-      <p class="text-xs text-gray-500 mb-4">Estimate events and GB eliminated by dropping a source + event type combination.</p>
+      <div class="flex items-start justify-between gap-4 mb-3">
+        <div>
+          <h2 class="text-sm font-medium text-gray-300">Filter Simulator</h2>
+          <p class="text-xs text-gray-500 mt-0.5">Before writing an SDL exclusion filter, use this to see how many events and GB it would remove.</p>
+        </div>
+        <button onclick="toggleSimHelp()" class="shrink-0 text-xs text-purple-400 hover:text-purple-300 transition-colors">How does this work?</button>
+      </div>
+
+      <div id="sim-help" class="hidden mb-4 bg-gray-800/60 border border-gray-700/50 rounded-lg p-4 text-xs text-gray-400 space-y-2">
+        <p><span class="text-gray-200 font-medium">What it does:</span> Runs a live PowerQuery against your data lake to count how many events match a source and/or event type, then projects that number into estimated GB and monthly cost savings.</p>
+        <p><span class="text-gray-200 font-medium">When to use it:</span> You've spotted a noisy source in the Top Sources table above (e.g. a source sending millions of low-value events). Enter it here to quantify how much ingest you'd save by filtering it out before committing the change in the SentinelOne console.</p>
+        <p><span class="text-gray-200 font-medium">Source name:</span> Paste the exact value from the <em>dataSource.name</em> column in the Top Sources table — e.g. <code class="bg-gray-900 px-1 rounded">ActivityFeed</code>.</p>
+        <p><span class="text-gray-200 font-medium">Event type:</span> Optional. Narrow the filter to a specific event category (e.g. <code class="bg-gray-900 px-1 rounded">dns</code>, <code class="bg-gray-900 px-1 rounded">heartbeat</code>). Leave blank to simulate dropping the entire source.</p>
+        <p><span class="text-gray-200 font-medium">GB estimate:</span> Based on 0.5 GB per million events — adjust in code if your actual ratio differs.</p>
+        <p class="text-amber-400/80">⚠ This is a read-only simulation — no filters are created or applied automatically. Use the results to inform an exclusion filter you create manually in the SentinelOne console.</p>
+      </div>
+
       <div class="flex gap-3 flex-wrap mb-4">
-        <input id="ig-src" placeholder="Source name (optional)"
+        <input id="ig-src" placeholder="Source name — e.g. ActivityFeed"
           class="flex-1 min-w-48 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-purple-600">
         <input id="ig-evt" placeholder="Event type (optional)"
           class="flex-1 min-w-48 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-purple-600">
         <button onclick="igSimulate()" id="btn-sim"
-          class="px-4 py-2 text-sm bg-purple-700 hover:bg-purple-600 rounded-lg text-white">Simulate</button>
+          class="px-4 py-2 text-sm bg-purple-700 hover:bg-purple-600 rounded-lg text-white transition-colors">Simulate</button>
       </div>
       <div id="ig-sim-result"></div>
     </div>
@@ -341,6 +356,11 @@ async function igLoad() {
   }
 }
 
+function toggleSimHelp() {
+  const el = document.getElementById('sim-help')
+  el.classList.toggle('hidden')
+}
+
 async function igSimulate() {
   setBtn('btn-sim', true)
   try {