Refactor the tree view as a pure CSS solution (drop d3.js) #1145

Signed-off-by: tdruez <tdruez@nexb.com>

scancodeio/static/tree-views/tree.css

@@ -0,0 +1,75 @@
+.tree{
+  --spacing : 1.5rem;
+  --radius  : 10px;
+}
+
+.tree li{
+  display      : block;
+  position     : relative;
+  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
+}
+
+.tree ul{
+  margin-left  : calc(var(--radius) - var(--spacing));
+  padding-left : 0;
+}
+
+.tree ul li{
+  border-left : 2px solid #ddd;
+}
+
+.tree ul li:last-child{
+  border-color : transparent;
+}
+
+.tree ul li::before{
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) / -2);
+  left         : -2px;
+  width        : calc(var(--spacing) + 2px);
+  height       : calc(var(--spacing) + 1px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+.tree summary{
+  display : block;
+  cursor  : pointer;
+}
+
+.tree summary::marker,
+.tree summary::-webkit-details-marker{
+  display : none;
+}
+
+.tree summary:focus{
+  outline : none;
+}
+
+.tree summary:focus-visible{
+  outline : 1px dotted #000;
+}
+
+.tree li::after,
+.tree summary::before{
+  content       : '';
+  display       : block;
+  position      : absolute;
+  top           : calc(var(--spacing) / 2 - var(--radius));
+  left          : calc(var(--spacing) - var(--radius) - 1px);
+  width         : calc(2 * var(--radius));
+  height        : calc(2 * var(--radius));
+  border-radius : 50%;
+  background    : #ddd;
+}
+
+.tree summary::before{
+  z-index    : 1;
+  background : #696 url('expand-collapse.svg') 0 0;
+}
+
+.tree details[open] > summary::before{
+  background-position : calc(-2 * var(--radius)) 0;
+}

scancodeio/static/tree-views/tree.css.ABOUT

@@ -0,0 +1,10 @@
+about_resource: tree.css
+name: css-tree-views
+homepage_url: https://iamkate.com/code/tree-views/
+description: A tree view (collapsible list) can be created using only html and css, without
+  the need for JavaScript. Accessibility software will see the tree view as lists nested inside
+  disclosure widgets, and the standard keyboard interaction is supported automatically.
+license_expression: cc0-1.0
+licenses:
+  - key: cc0-1.0
+    name: cc0-1.0

scancodeio/static/tree-views/tree.css.NOTICE

@@ -0,0 +1,29 @@
+Free content on iamkate.com
+The web was still young when I first went online in 1998. It felt like a utopian dream of free culture and free knowledge. Anyone could contribute, and within weeks I had learnt html and created my first site, hosted in the 10mb of webspace my isp included as standard.
+
+I’ve watched as the dream has become a nightmare of surveillance and monetisation. Companies such as Google and Facebook offer their services for free to the public because their real products are their advertising networks powered by the personal data of their visitors.
+
+The only concern of these companies and their shareholders is to maximise their income from advertising, regardless of the costs to society. They use dubious schemes to avoid paying tax. They encourage addiction and risk the mental health of their visitors. They threaten democratic institutions.
+
+I have little influence over the wider web, but I can control my small part of it, creating a haven that remains true to the original dream. This page describes my approach to copyright, my promise to protect the privacy of my visitors, and my commitment to transparency.
+
+Copyright
+Copyright limits creativity and holds back progress by restricting our rights to build upon the works of others. Copyleft licences attempt to use copyright against itself, but “the master’s tools will never dismantle the master’s house”, as Audre Lorde remarked in a different context.
+
+All content on my site is released under the terms of the Creative Commons CC0 1.0 Universal Legal Code. This means I have waived all copyright and related rights to the extent possible under law, with the intention of dedicating the content to the public domain. You can use and adapt it without attribution.
+
+Privacy
+Every site is hosted on a server, which is usually operated by a third party due to the expertise needed to manage servers securely. Most sites are accessed indirectly through the servers of a content delivery network, which protects the original server from attacks that could disable the site.
+
+My site is hosted on Cloudflare Pages. Cloudflare is both the host and the content delivery network, avoiding the need to trust two separate third parties. Cloudflare have a strong commitment to privacy and data protection, and frequently write about developing systems to protect visitor privacy.
+
+Almost every site today includes code that tracks visitors for statistical and advertising purposes. Often the site owner includes code with the deliberate aim of tracking their visitors, but sometimes they just want to include a feature provided by a third party, and that provider includes their own tracking code.
+
+My site doesn’t include any tracking code, and doesn’t load any code from third parties. It doesn’t have a cookie banner because it doesn’t use cookies. Instead of an invasive analytics system, Cloudflare Web Analytics gives me the most important statistics without tracking individual visitors.
+
+Transparency
+You probably don’t know me, and shouldn’t have to trust me. Instead, you should be able to check security and privacy claims for yourself. Unfortunately most sites today use a process called code minification, which makes them faster but also makes it harder for other people to understand their code.
+
+The Mozilla Observatory report for my site confirms the presence of various security and privacy features, resulting in a perfect A+ rating. One of these features, the content security policy, prevents browsers from loading code and other resources from third parties.
+
+My site doesn’t need to use code minification in order to load quickly due to its simple design, efficient implementation, and absence of resources loaded from third parties. As a result, other software developers can easily understand how the layout, styling, and interactive features are created.

scanpipe/templates/scanpipe/project_dependency_tree.html

@@ -1,7 +1,22 @@
 {% extends "scanpipe/base.html" %}
+{% load static %}
 
 {% block title %}ScanCode.io: {{ project.name }} - Dependency tree{% endblock %}
 
+{% block extrahead %}
+<link rel="stylesheet" href="{% static 'tree-views/tree.css' %}" crossorigin="anonymous">
+<style>
+  .tree {
+    line-height: 1.8rem;
+    --spacing : 2rem;
+  }
+  .tree summary::before{
+    background-color: rgb(72, 199, 142);
+    background-image: url('{% static "tree-views/expand-collapse.svg" %}');
+  }
+</style>
+{% endblock %}
+
 {% block content %}
   <div id="content-header" class="container is-max-widescreen mb-3">
     {% include 'scanpipe/includes/navbar_header.html' %}
@@ -13,64 +28,63 @@
   </div>
 
   <div class="container is-max-widescreen mb-3">
-    {% if recursion_error %}
-      <article class="message is-danger">
-        <div class="message-body">
-          The dependency tree cannot be rendered as it contains circular references.
-          {{ message|linebreaksbr }}
-        </div>
-      </article>
-    {% endif %}
-    <div id="tree"></div>
+    <section class="mx-5">
+      {% if recursion_error %}
+        <article class="message is-danger">
+          <div class="message-body">
+            The dependency tree cannot be rendered as it contains circular references.
+            {{ message|linebreaksbr }}
+          </div>
+        </article>
+      {% endif %}
+
+      <div class="mb-4">
+        <button id="collapseAll" class="button is-outlined is-small">
+          <span>Collapse All</span>
+          <span class="icon is-small">
+            <i class="fas fa-minus"></i>
+          </span>
+        </button>
+        <button id="expendAll" class="button is-outlined is-small">
+          <span>Expend All</span>
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </div>
+
+      <ul class="tree">
+        <li>
+          <details open>
+            <summary class="has-text-weight-semibold">
+              {{ dependency_tree.name }}
+            </summary>
+            {% include 'scanpipe/tree/children.html' with children=dependency_tree.children %}
+          </details>
+        </li>
+      </ul>
+    </section>
   </div>
 {% endblock %}
 
 {% block scripts %}
-  <script src="https://d3js.org/d3.v7.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6"></script>
-  {{ dependency_tree|json_script:"dependency_tree" }}
-  {{ row_count|json_script:"row_count" }}
-  {{ max_depth|json_script:"max_depth" }}
-  <script>
-    const data = JSON.parse(document.getElementById("dependency_tree").textContent);
-    const hierarchyData = d3.hierarchy(data);
-    const columnWidth = 110;
-    const rowWidth = 25;
-    const columnCount = hierarchyData.height;
-    const rowCount = hierarchyData.links().length;
-    const width = columnWidth * (columnCount + 1);
-    const height = rowWidth * (rowCount + 1);
+<script>
+  const collapseAllButton = document.getElementById('collapseAll');
+  const expendAllButton = document.getElementById('expendAll');
 
-    function indent() {
-      return (root) => {
-        root.eachBefore((node, i) => {
-          node.y = node.depth;
-          node.x = i;
-        });
-      };
-    }
+  function collapseAllDetails() {
+    document.querySelectorAll('details').forEach(details => {
+      details.removeAttribute('open');
+    });
+  }
 
-    // https://observablehq.com/plot/marks/tree
-    const plot = Plot.plot({
-      axis: null,
-      margin: 10,
-      marginLeft: 40,
-      marginRight: 160,
-      width: width,
-      height: height,
-      marks: [
-        Plot.tree(hierarchyData.leaves(), {
-          path: (node) => node.ancestors().reverse().map(({ data: { name } }) => name).join("|"),
-          delimiter: "|",
-          treeLayout: indent,
-          strokeWidth: 1,
-          curve: "step-before",
-          fontSize: 14,
-          textStroke: "none"
-        })
-      ]
+  function expendAllDetails() {
+    document.querySelectorAll('details').forEach(details => {
+      details.setAttribute('open', ''); // Adding 'open' attribute to open the details
     });
+  }
 
-    document.getElementById("tree").appendChild(plot);
-  </script>
+  collapseAllButton.addEventListener('click', collapseAllDetails);
+  expendAllButton.addEventListener('click', expendAllDetails);
+</script>
 {% endblock %}

scanpipe/templates/scanpipe/tree/children.html

@@ -0,0 +1,16 @@
+<ul>
+  {% for node in children %}
+    <li>
+      {% if node.children %}
+        <details class="my-1" open>
+          <summary>
+            {% include 'scanpipe/tree/node.html' with node=node only %}
+          </summary>
+          {% include 'scanpipe/tree/children.html' with children=node.children only %}
+        </details>
+      {% else %}
+        {% include 'scanpipe/tree/node.html' with node=node only %}
+      {% endif %}
+    </li>
+  {% endfor %}
+</ul>

scanpipe/templates/scanpipe/tree/node.html

@@ -0,0 +1,23 @@
+{% if node.name %}
+  {{ node.name }}
+{% else %}
+  Missing data
+{% endif %}
+
+<span class="ml-1">
+  {% if node.url %}
+    <a href="{{ node.url }}" target="_blank">
+      <i class="fa-solid fa-square-arrow-up-right fa-sm" title="View details"></i>
+    </a>
+  {% endif %}
+  {% if node.compliance_alert == "warning" or node.compliance_alert == "error" %}
+    <a href="{{ node.url }}#terms" target="_blank" class="{% if node.compliance_alert == 'warning' %}has-text-warning{% else %}has-text-danger{% endif %}">
+      <i class="fa-solid fa-scale-balanced fa-sm" title="Compliance alert"></i>
+    </a>
+  {% endif %}
+  {% if node.is_vulnerable %}
+    <a href="{{ node.url }}#vulnerabilities" target="_blank">
+      <i class="fa-solid fa-bug fa-sm has-text-danger" title="Vulnerabilities"></i>
+    </a>
+  {% endif %}
+</span>

scanpipe/views.py

@@ -2316,7 +2316,12 @@ def get_dependency_tree(self, project):
         return project_tree
 
     def get_node(self, package):
-        node = {"name": str(package)}
+        node = {
+            "name": str(package),
+            "url": package.get_absolute_url(),
+            "compliance_alert": package.compliance_alert,
+            "is_vulnerable": package.is_vulnerable,
+        }
         # Resolved dependencies
         children = [
             self.get_node(child_package)
@@ -2325,7 +2330,12 @@ def get_node(self, package):
 
         unresolved_dependencies = package.declared_dependencies.unresolved()
         for dependency in unresolved_dependencies:
-            children.append({"name": dependency.package_url})
+            children.append(
+                {
+                    "name": dependency.package_url,
+                    "is_vulnerable": dependency.is_vulnerable,
+                }
+            )
 
         if children:
             node["children"] = children