Skip to content

Commit

Permalink
Merge pull request #1 from gramener/mounesh_dev_v2
Browse files Browse the repository at this point in the history 
Add files via upload
  • Loading branch information
@Mounesh301
Mounesh301 authored Nov 25, 2024
2 parents 42b7f60 + adee8d7 commit b4da870
Show file tree
Hide file tree
Showing 3 changed files with 778 additions and 288 deletions.
118 changes: 82 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,34 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incident Analysis</title>
<link rel="icon" href="https://raw.githubusercontent.com/gramener/assets/main/straive-favicon.svg">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Navigation Bar -->
<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">
<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="#" 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)">
<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>
</button>
<ul class="dropdown-menu dropdown-menu-end">
Expand All @@ -37,22 +46,26 @@
</div>
</nav>

<!-- Main Container -->
<div class="container-fluid">
<!-- Header Section -->
<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>


<!-- Narrative Section -->
<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>
<p>You can use sample data from <a href="https://drive.google.com/drive/folders/1qJXojKTsVfXAPVLApNV17tvY1Keexc0C">this folder</a> if you have access.</p>
</div>

<!-- Upload Form -->
<form id="upload" class="container mt-5">
<div class="row">
<div class="col-md mb-3">
<label for="incidents" class="form-label">Upload <strong>Incidents</strong> .CSV</label>
<input class="form-control" type="file" id="incidents" name="incidents" accept=".csv" />
<p class="form-text"><em>Columns</em>: Service, Shift, Area, Team, Count, Hours</p>
<p class="form-text"><em>Columns</em>: Service, Shift, Region, Team, Count, Hours, Date</p>
</div>
<div class="col-md mb-3">
<label for="relations" class="form-label">Upload <strong>Service Impact</strong> .CSV</label>
Expand All @@ -62,43 +75,58 @@ <h2 class="display-6 text-center">What are the main drivers of incidents?</h2>
</div>
</form>

<div class="container">
<div id="filters" class="row mb-5"></div>
<!-- Filters Section -->
<div id="filters" class="row mb-5">
<!-- Filter Dropdowns will be dynamically generated here -->
</div>

<!-- Result Section (Initially Hidden) -->
<div id="result" class="d-none">
<div class="container">
<div class="row g-2">
<div class="row g-2 mb-4">
<!-- Toggle Links Checkbox -->
<div class="col-md flex-grow-0">
<label class="form-check-label text-nowrap" for="show-links">Show links</label>
<div class="form-check form-switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="show-links">
</div>
</div>

<!-- Threshold Slider -->
<div class="col-md">
<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>

<!-- Reset Filters Button -->
<div class="col-md flex-grow-0">
<button class="btn btn-outline-primary" id="reset-filters" title="Reset Filters">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
</div>
</div>

<!-- Tick Marks for Threshold Slider -->
<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>

<!-- Sankey Diagram -->
<svg width="1000" height="400" id="sankey" fill="currentColor" class="d-block mx-auto"></svg>

<!-- Network Graph -->
<svg width="1000" height="1000" id="network" fill="currentColor" class="d-block mx-auto">
<defs>
<marker
Expand All @@ -115,30 +143,48 @@ <h2 class="display-6 text-center">What are the main drivers of incidents?</h2>
</defs>
</svg>

<!-- Ask a Question Section -->
<div class="container mt-5">
<div class="mb-3">
<label for="user-question" class="form-label">Ask a Question:</label>
<textarea class="form-control" id="user-question" rows="3" placeholder="Type your question here..."></textarea>
</div>
<button class="btn btn-secondary btn-lg d-block mx-auto mb-4" id="ask-question">Ask Question</button>
</div>

<!-- Summarize Button -->
<button class="btn btn-primary btn-lg d-block mx-auto" id="summarize">Analyze and Summarize</button>
<section id="summary" class="narrative mx-auto"></section>

<!-- Summary Section -->
<section id="summary" class="narrative mx-auto mt-5"></section>
</div>

</div>

<footer class="my-5 vh-100 d-flex align-items-center justify-content-center">
<h1 class="display-4">Designed by <a href="https://gramener.com/" class="text-reset link-offset-3 link-underline link-underline-opacity-25">Gramener</a></h1>
</footer>

<div class="modal" tabindex="-1" id="snippet-modal">
<div class="modal-dialog">
<div class="modal-content" id="snippet-modal">
<div class="modal-header">
<h5 class="modal-title" id="snippet-modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<!-- Footer -->
<footer class="my-5 vh-100 d-flex align-items-center justify-content-center">
<h1 class="display-4">Designed by <a href="https://gramener.com/" class="text-reset link-offset-3 link-underline link-underline-opacity-25">Gramener</a></h1>
</footer>

<!-- Modal (If Needed) -->
<div class="modal" tabindex="-1" id="snippet-modal">
<div class="modal-dialog">
<div class="modal-content" id="snippet-modal">
<div class="modal-header">
<h5 class="modal-title" id="snippet-modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="snippet-modal-body"></div>
</div>
<div class="modal-body" id="snippet-modal-body"></div>
</div>
</div>
</div>

<!-- Bootstrap Bundle JS (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="module"></script>

<!-- Dark Theme Toggle (from @gramex/ui) -->
<script src="https://cdn.jsdelivr.net/npm/@gramex/[email protected]/dist/dark-theme.js" type="module"></script>

<!-- Custom Script -->
<script src="script.js" type="module"></script>
</body>

Expand Down
Loading

0 comments on commit b4da870

Please sign in to comment.