Add legend to graph view

digitalmethodsinitiative · Nov 20, 2020 · d4fb440 · d4fb440
1 parent 8d438e0
commit d4fb440
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -503,6 +503,12 @@ main {
   display: inline;
 }
 
+#graph-legend {
+  position: fixed;
+  bottom: 65px;
+  right: 1em;
+}
+
 #tooltip {
   position: absolute;
   z-index: 1;

diff --git a/index.html b/index.html
@@ -83,7 +83,19 @@ <h2><span id="view">Graph</span> View</h2>
             <ol id="site-list">
             </ol>
           </div>
-          <div id="vis-graph" class="hidden"></div>
+          <div id="vis-graph" class="hidden">
+
+          </div>
+          <div id="graph-legend">
+            <span class="badge social_media">social_media</span>
+            <span class="badge advertising">advertising</span>
+            <span class="badge site_analytics">site_analytics</span>
+            <span class="badge customer_interaction">customer_interaction</span>
+            <span class="badge audio_video_player">audio_video_player</span>
+            <span class="badge comments">comments</span>
+            <span class="badge essential">essential</span>
+            <span class="badge pornvertising">pornvertising</span>
+          </div>
         </div>
         <div class="vis-controls">
           <label>Show unrecognised third party sites</label>

diff --git a/js/brightbeam.js b/js/brightbeam.js
@@ -385,6 +385,7 @@ const brightbeam = {
     document.getElementById('view').innerText = 'Graph';
     document.getElementById('vis-graph').classList.remove('hidden');
     document.getElementById('vis-list').classList.add('hidden');
+    document.getElementById('graph-legend').classList.remove('hidden');
     this.stopGraphView();
     let network = await this.getNetwork();
     console.log(network);
@@ -435,6 +436,7 @@ const brightbeam = {
       document.getElementById('vis-graph').innerHTML = '';
       document.getElementById('vis-graph').classList.add('hidden');
       document.getElementById('vis-list').classList.remove('hidden');
+    document.getElementById('graph-legend').classList.add('hidden');
 
       let container = document.getElementById('site-list');
       const data = await storeChild.getAll();

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Brightbeam",
-  "version": "4.0.0",
+  "version": "4.0.1",
 
   "description": "Brightbeam is a browser extension that uses interactive visualizations to show you the relationships between third parties and the sites you visit. It is a fork of the late Mozilla Lightbeam.",
   "homepage_url": "https://github.com/digitalmethodsinitiative/brightbeam",