ENH: Add Mounesh's services flow

gramener · Nov 19, 2024 · 4eeea41 · 4eeea41
1 parent f1c7d48
commit 4eeea41
Show file tree

Hide file tree

Showing 6 changed files with 834 additions and 207 deletions.
diff --git a/README.md b/README.md
@@ -7,11 +7,12 @@ Interactive visualization tool for analyzing incident patterns and service impac
 - Upload and analyze incident data and service impact relationships
 - Interactive Sankey diagram showing incident flow across multiple dimensions
 - Force-directed network graph displaying service dependencies
-- AI-powered incident analysis and recommendations
+- Duration-based filtering with visual feedback
 - Dark/light theme support
 - Responsive design
 - Filter data by Area, Shift, Team, and Service
-- Duration-based filtering with visual feedback
+- AI-powered incident analysis and recommendations
+- Service Chainflow visualization for understanding service relationships
 
 ## Usage
 
@@ -39,6 +40,19 @@ Required columns:
 - `Source`: Source service name
 - `Target`: Target service name
 
+### Service Chainflow CSV
+
+Required columns for nodes:
+- `Service`: Service name
+- `Stage`: Stage number (0-4)
+- `Position`: Vertical position within stage
+- `Value`: Node size value
+
+Required columns for links:
+- `Source`: Source service name
+- `Target`: Target service name
+- `Value`: Link weight value
+
 ## Setup
 
 ## Prerequisites
@@ -81,6 +95,7 @@ On this repository's [page settings](https://github.com/gramener/incidents/setti
 - Frontend: Vanilla JavaScript with lit-html for rendering
 - LLM Integration: [LLM Foundry API](https://llmfoundry.straive.com/code) for query processing, specifically the `/openai/v1/chat/completions` endpoint with `gpt-4o-mini` model
 - Styling: Bootstrap 5.3.3 with dark mode support
+- Data Processing: D3.js for data transformation and analysis
 
 ### Dependencies
 
@@ -93,6 +108,7 @@ All dependencies are loaded via CDN:
 - [@gramex/ui](https://www.npmjs.com/package/@gramex/ui) v0.3 - Utilities
 - [marked](https://www.npmjs.com/package/marked) v13 - Markdown parsing
 - [asyncllm](https://www.npmjs.com/package/asyncllm) v1 - AI integration
+- [PapaParse](https://www.papaparse.com/) v5.3 - CSV parsing
 
 ## License
 

diff --git a/index.html b/index.html
@@ -12,14 +12,17 @@
 </head>
 
 <body>
-
   <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href=".">Incident Analysis</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="btn-group ms-auto">
+          <a href="." class="btn btn-outline-primary active" aria-current="page">Incident Analysis</a>
+          <a href="services.html" class="btn btn-outline-primary">Service Chainflow</a>
+        </div>
         <div class="nav-item dropdown ms-auto" role="group" aria-label="Toggle dark mode" title="Toggle Dark Mode">
           <button class="dark-theme-toggle btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (auto)">
             <i class="bi bi-circle-half"></i> <span class="d-lg-none ms-2">Toggle theme</span>
@@ -37,6 +40,7 @@
   <div class="container-fluid">
     <h1 class="display-1 my-4 text-center">Incident Analysis</h1>
     <h2 class="display-6 text-center">What are the main drivers of incidents?</h2>
+
     <div class="mx-auto my-3 narrative">
       <p>This application is designed for incident analysis, allowing users to upload CSV files containing incident data and service impact data.</p>
       <p>It visualizes the relationships between different incidents and their impacts using Sankey diagrams and network graphs.</p>
@@ -72,12 +76,27 @@ <h2 class="display-6 text-center">What are the main drivers of incidents?</h2>
             </div>
           </div>
           <div class="col-md">
-            <label for="threshold" class="form-label">Filter by duration</label>
-            <input type="range" class="form-range" id="threshold" min="0" max="1" step="0.001">
+            <label for="threshold" class="form-label">Filter by incident duration (hours)</label>
+            <input type="range" class="form-range" id="threshold" min="0" max="10" step="0.1" value="3" list="tickmarks">
+            <datalist id="tickmarks">
+              <option value="0" label="0h"></option>
+              <option value="1" label="1h"></option>
+              <option value="2" label="2h"></option>
+              <option value="3" label="3h"></option>
+              <option value="4" label="4h"></option>
+              <option value="5" label="5h"></option>
+              <option value="6" label="6h"></option>
+              <option value="7" label="7h"></option>
+              <option value="8" label="8h"></option>
+              <option value="9" label="9h"></option>
+              <option value="10" label="10h"></option>
+            </datalist>
+            <div id="threshold-value">Threshold: <span id="threshold-display">3</span> hours</div>
           </div>
         </div>
       </div>
 
+
       <svg width="1000" height="400" id="sankey" fill="currentColor" class="d-block mx-auto"></svg>
 
       <svg width="1000" height="1000" id="network" fill="currentColor" class="d-block mx-auto">