add map to report

www/report/report.css

@@ -1,10 +1,10 @@
-/* MVP.css v1.7.3 - https://github.com/andybrewer/mvp */
+/* adapted from MVP.css v1.7.3 - https://github.com/andybrewer/mvp */
 
 :root {
     --border-radius: 5px;
     --box-shadow: 2px 2px 10px;
-    --color: darkblue;
+    --color: blue;
-    --hover-color: blue;
+    --hover-color: lightblue;
     --color-accent: #118bee15;
     --color-bg: #fff;
     --color-bg-secondary: #e9e9e9;
@@ -24,6 +24,31 @@
     --width-content: 720px;
 }
 
+iframe {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100% - var(--width-content) - 2rem);
+    height: 100vh;
+    border-style: none none none none;
+    /* border-width: 3px;
+    border-color: black; */
+}
+
+content {
+    margin-left: 55vw;
+    max-width: var(--width-content);
+    margin-right: 5vw;
+    display: block;
+}
+
+@media screen and (max-width: 1350px) {
+    iframe#map{
+        display: none;;
+    }
+    
+}
+
 /*
 @media (prefers-color-scheme: dark) {
     :root {
@@ -60,7 +85,7 @@ body {
 footer,
 header,
 main {
-    margin: 0 auto;
+    margin: 0 0 0 auto;
     max-width: var(--width-content);
     width: calc(100% - 2rem);
     padding: .5rem 1rem;
@@ -69,12 +94,13 @@ main {
 header{
     position: fixed;
     top: 0;
-    left: calc(50% - var(--width-content) / 2);
+    right: 0;
     padding-left: 0;
     padding-right: 0;
     background-color: white;
     border-bottom: solid 1px var(--color-bg-secondary);
     z-index: 999;
+    max-width: calc(var(--width-content) + 2rem);
 }
 
 @media screen and  (max-width: 740px) {
@@ -245,7 +271,7 @@ h5,
 h6 {
     text-align: left;
     line-height: var(--line-height);
-    padding-top:5rem
+    padding-top: 2rem;
 }
 
 h1{
@@ -254,6 +280,7 @@ h1{
     font-size: 150%;
 }
 h2{
+    padding-top:5rem;
     font-size: 125%;
 }
 /* h1::before{
@@ -319,13 +346,13 @@ small {
 }
 
 sup {
-    background-color: var(--color-secondary);
+    /* background-color: var(--color-secondary); */
-    border-radius: var(--border-radius);
+    /* border-radius: var(--border-radius); */
-    color: var(--color-bg);
+    /* color: var(--color-secondary); */
-    font-size: xx-small;
+    /* font-size: xx-small; */
     font-weight: bold;
-    margin: 0.2rem;
+    /* margin: 0.2rem;
-    padding: 0.2rem 0.3rem;
+    padding: 0.2rem 0.3rem; */
     position: relative;
     top: -2px;
 }
@@ -349,7 +376,7 @@ a:hover {
     /* text-decoration: underline; */
 }
 a:hover sup{
-    background-color: var(--hover-color);
+    /* background-color: var(--hover-color); */
 }
 
 a b,
@@ -560,7 +587,7 @@ h1.Title{
     background-color: black;
     color: var(--color-bg-secondary);
     padding: 1rem;
-
+    margin: 0 -1rem;
 }
 .keypoints > p > strong{
     margin-left:2.5rem;

www/report/report.html

@@ -5,7 +5,7 @@
   <meta name="generator" content="pandoc" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <title>Biometric and Behavioural Mass Surveillance in EU Member States</title>
-  <link rel="stylesheet" href="mvp.css" />
+  <link rel="stylesheet" href="report.css" />
 <style type="text/css">
   
   
@@ -15,8 +15,54 @@
 
   
 </style>
+
+<script>
+  
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const frameEl = document.getElementById('map');
+    frameEl.addEventListener('load', function () {
+
+        const caseEls = document.getElementsByClassName('level1');
+        for (let caseEl of caseEls) {
+            console.log(caseEl.dataset.title);
+            const toSelect = typeof caseEl.dataset.title == 'undefined' || caseEl.dataset.title == 'none' ? null : frameEl.contentWindow.getIdForTitle(caseEl.dataset.title);
+            // navItemEl.hash url-encodes
+            // let targetEl = document.getElementById(navItemEl.attributes.href.value.substr(1));
+            // let wrapperEl = targetEl.parentNode;
+            let intersectionObserver = new IntersectionObserver(function (entries) {
+                console.log(entries);
+                // If intersectionRatio is 0, the target is out of view
+                // and we do not need to do anything.
+                if (entries[0].intersectionRatio <= 0) {
+                    // navItemEl.classList.remove('active');
+                } else {
+                    if(toSelect === null) {
+                        frameEl.contentWindow.mapGraph.deselectNode();
+                        frameEl.contentWindow.mapGraph.resetZoom();
+                    } else {
+                        const node = frameEl.contentWindow.mapGraph.graph.nodes.filter(n => n.id == toSelect)[0]
+                        frameEl.contentWindow.mapGraph.selectNode(node);
+                    }
+                    // navItemEl.classList.add('active');
+                }
+
+            });
+            // start observing
+            intersectionObserver.observe(caseEl);
+        }
+
+    })
+  });
+
+  // frame.contentWindow;
+</script>
 </head>
 <body>
+
+
+  <iframe id='map' src="../index.html"></iframe>
+
 <header id="title-block-header">
   <nav id="TOC">
     <a href="#">Biometric and Behavioural Mass Surveillance in EU Member States</a>
@@ -985,7 +1031,7 @@
 <p>The <strong>Council of Europe’s Convention for the Protection of Individuals with regard to Automatic Processing of Personal data (Convention 108),</strong> which is one of the bases for EU data protection legislation, was updated in 2018. The modernised Convention 108, which is known as <strong>Convention 108+, prohibits the processing of sensitive data (subject to certain conditions),</strong> in a similar, albeit arguably more modest (Greenleaf 2016), way to the GDPR. It lays out similar data subject rights, including the right not to be subjected to a sole automated decision-making process (Article 9). <strong>Although Article 11 of Convention 108+ permits the Signatory Parties to derogate from certain rules</strong> and obligations including the purpose limitation (Article 5(4)) and the duty to inform about data breaches (Article 7(2)) based on national security interests, it expressly requires the need to <strong>establish independent and effective review and supervision of data processing activities in a national security context (Article 11(3)).</strong> While Convention 108+ has yet to be ratified by all EU Member States, it provides a strong standpoint for establishing an oversight mechanism for surveillance measures.</p>
 </section>
 </section>
-<section id="main-political-issues-and-debates" class="level1">
+<section id="main-political-issues-and-debates" class="level1" >
 <h1>Main political issues and debates</h1>
 <div class="keypoints">
 <p><strong>Key points</strong></p>
@@ -1090,7 +1136,7 @@
 <section id="part-ii-case-studies" class="level1 Title">
 <h1 class="Title">PART II: CASE STUDIES</h1>
 </section>
-<section id="facial-recognition-cameras-at-brussels-international-airport-belgium" class="level1">
+<section id="facial-recognition-cameras-at-brussels-international-airport-belgium" class="level1 case" data-title="Facial Recognition in Brussels Airport (Stopped)">
 <h1>Facial Recognition cameras at Brussels International Airport (Belgium)</h1>
 <div class="keypoints">
 <p><strong>Key points</strong></p>
@@ -1147,7 +1193,7 @@
 <p>The French campaign Technopolice has extended to Belgium and is raising awareness through a diversified strategy based on public forums, cartography of technology and organization of events. The NGO <strong>Ligue des Droits Humains</strong> is a member of the <strong>Reclaim Your Face</strong> campaign, along with 40 other organisations<a href="#fn32" class="footnote-ref" id="fnref32" role="doc-noteref"><sup>32</sup></a>, yet it hasn’t been as active as partner organizations in neighbouring France or Germany.</p>
 </section>
 </section>
-<section id="the-burglary-free-neighbourhood-in-rotterdam-netherlands" class="level1">
+<section id="the-burglary-free-neighbourhood-in-rotterdam-netherlands" class="level1 case" data-title="Data-lab Burglary-free Neighbourhood">
 <h1>The Burglary Free Neighbourhood in Rotterdam (Netherlands)</h1>
 <div class="keypoints">
 <p><strong>Key points</strong></p>
@@ -1206,7 +1252,7 @@
 <p>It is however apparent that projects such as these <strong>require (legal) fail-safes for their usage</strong>. In the case of the <strong>Burglary Free Neighbourhood</strong>, it seems the <strong>project’s privacy-by-design has been secured by project manager Delvers</strong>. The fact that local police requested access to the cameras indicates the necessity for proper oversight in such deployments. Assuming that the data protection legislation applies to the <strong>Fieldlab</strong> or any similar initiatives (to the extent that they process “personal data”), it is unclear as to who processes which type of data and the level of collaboration between the private and public sectors. This uncertainty means that it may be <strong>hard to allocate responsibilities and obligations</strong> under the data protection legislation since it may be complicated to determine who is the “competent authority”, whose processing activities in a law enforcement context fall under the <strong>scope of the LED</strong>, as well as who is the <strong>authority responsible for processing personal data</strong> (i.e., the <strong>data controller</strong>) and the one responsible for processing the data on behalf of that authority (i.e., the <strong>data processor</strong>). Such uncertainties may complicate the effectiveness of the <strong>data protection legislation</strong> (Purtova, 2018).</p>
 </section>
 </section>
-<section id="the-safe-city-projects-in-nice-france" class="level1">
+<section id="the-safe-city-projects-in-nice-france" class="level1 case" data-title="Safe City Pilot Project (Nice)">
 <h1>The Safe City Projects in Nice (France)</h1>
 <div class="keypoints">
 <p><strong>Key points</strong></p>
@@ -1264,7 +1310,7 @@
 <p>As one press article reports, “For their part, many people in Nice do not seem to be hostile to this application”. The article further quotes a 72-year-old from Nice: “With terrorism, any measure that allows us to reinforce security seems desirable to me. On the condition that we don't give this application to just anyone". (Barelli 2018)</p>
 </section>
 </section>
-<section id="facial-recognition-in-hamburg-mannheim-berlin-germany" class="level1">
+<section id="facial-recognition-in-hamburg-mannheim-berlin-germany" class="level1 case" data-title="Pilot Project Südkreuz Berlin">
 <h1>Facial Recognition in Hamburg, Mannheim &amp; Berlin (Germany)</h1>
 <div class="keypoints">
 <p><strong>Key points</strong></p>
@@ -1337,7 +1383,7 @@
 <p>Figure 4. Growth in police requests to INPOL system<a href="#fn37" class="footnote-ref" id="fnref37" role="doc-noteref"><sup>37</sup></a></p>
 </section>
 </section>
-<section id="the-dragonfly-project-hungary" class="level1">
+<section id="the-dragonfly-project-hungary" class="level1 case" data-title="Dragonfly Project">
 <h1>The Dragonfly project (Hungary)</h1>
 <div class="keypoints">
 <p><strong>Key points</strong></p>
@@ -1741,5 +1787,6 @@
 <hr>
 </article>
 </main>
+
 </body>
 </html>