Merge pull request #253 from NGO-Algorithm-Audit/feature/container-add-accordion-option

Feature/container add accordion option

Author: jfparie

content/english/technical-tools/BDT.md

@@ -1,10 +1,34 @@
 ---
 title: Unsupervised bias detection tool
 subtitle: >
-  Local-first tool using statistical analysis to identify groups that may be subject to unfair treatment by algorithms or AI. The tool informs
-  the qualitative doctrine of law and ethics which disparities need to be
+  Local-first tool using statistical analysis to identify groups that may be
+  subject to unfair treatment by algorithms or AI. The tool informs the
+  qualitative doctrine of law and ethics which disparities need to be
   scrutinised manually by domain experts.
 image: /images/svg-illustrations/illustration_cases.svg
+quick_navigation:
+  title: Content overview
+  links:
+    - title: Introduction
+      url: '#info'
+    - title: Web app
+      url: '#web-app'
+    - title: Source code
+      url: '#source-code'
+    - title: Anomaly detection algorithm
+      url: '#HBAC'
+    - title: Scientific paper and audit report
+      url: '#scientific-paper'
+    - title: Local-first computing
+      url: '#local-first'
+    - title: Supported by
+      url: '#supported-by'
+    - title: Awards and acknowledgements
+      url: '#awards-acknowledgements'
+    - title: Summary
+      url: '#summary'
+    - title: Team
+      url: '#team'
 reports_preview:
   title: Example output bias detection tool
   icon: fas fa-file
@@ -52,41 +76,18 @@ team:
       name: Mackenzie Jorgensen PhD
       bio: |
         Researcher Alan Turing Institute, London
-quick_navigation:
-  title: Content overview
-  links:
-    - title: Introduction
-      url: "#info"
-    - title: Web app
-      url: "#web-app"
-    - title: Source code
-      url: "#source-code"
-    - title: Anomaly detection algorithm
-      url: "#HBAC"
-    - title: Scientific paper and audit report
-      url: "#scientific-paper"
-    - title: Local-first computing
-      url: "#local-first"
-    - title: Supported by
-      url: "#supported-by"
-    - title: Awards and acknowledgements
-      url: "#awards-acknowledgements"
-    - title: Summary
-      url: "#summary"
-    - title: Team
-      url: "#team"
 type: bias-detection-tool
 ---
 
 <!-- Introduction -->
 
-{{< container_open title="Introduction – Unsupervised bias detection tool" icon="fas fa-search" id="info" >}}
+{{< container_open title="Introduction – Unsupervised bias detection tool" icon="fas fa-search " id="info" isAccordion="" >}}
 
 <br>
 
 #### What is the tool about?
 
-The tool identifies groups where an algorithm or AI system shows variations in performance. This type of monitoring is referred to as _anomaly detection_. To identify anomalous patterns, the tool uses <a href="https://en.wikipedia.org/wiki/Cluster_analysis" target="_blank">clustering</a>. Clustering is a form of _unsupervised learning_. This means detecting disparate treatment (bias) does not require any data on protected attributes of users, such as gender, nationality, or ethnicity. The metric used to measure bias can be manually selected and is referred to as the `bias metric`.
+The tool identifies groups where an algorithm or AI system shows variations in performance. This type of monitoring is referred to as *anomaly detection*. To identify anomalous patterns, the tool uses <a href="https://en.wikipedia.org/wiki/Cluster_analysis" target="_blank">clustering</a>. Clustering is a form of *unsupervised learning*. This means detecting disparate treatment (bias) does not require any data on protected attributes of users, such as gender, nationality, or ethnicity. The metric used to measure bias can be manually selected and is referred to as the `bias metric`.
 
 #### What data can be processed?
 
@@ -125,7 +126,7 @@ The tool identifies deviating clusters. A summary of the results is made availab
 
 #### How is my data processed?
 
-The tool is privacy-friendly because the data is processed entirely within the browser. The data does not leave your computer or the environment of your organization. The tool utilizes the computing power of your own computer to analyze the data. This type of browser-based software is referred to as _local-first_. The tool does not upload data to third parties, such as cloud providers. Instructions on how to host the tool and local-first architecture can be hosted locally within your own organization can be found on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
+The tool is privacy-friendly because the data is processed entirely within the browser. The data does not leave your computer or the environment of your organization. The tool utilizes the computing power of your own computer to analyze the data. This type of browser-based software is referred to as *local-first*. The tool does not upload data to third parties, such as cloud providers. Instructions on how to host the tool and local-first architecture can be hosted locally within your own organization can be found on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
 
 Try the tool below ⬇️
 
@@ -143,18 +144,17 @@ Try the tool below ⬇️
 
 {{< container_open title="Source code" id="source-code" icon="fas fa-toolbox" >}}
 
-- The source code of the anolamy detection-algorithm is available on <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection" target="_blank">Github</a> and as a <a href="https://pypi.org/project/unsupervised-bias-detection/" target="_blank">pip package</a>: `pip install unsupervised-bias-detection`.
-  [![!pypi](https://img.shields.io/pypi/v/unsupervised-bias-detection?logo=pypi&color=blue)](https://pypi.org/project/unsupervised-bias-detection/)
-
-- The architecture to run web apps local-first is also available on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
+* The source code of the anolamy detection-algorithm is available on <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection" target="_blank">Github</a> and as a <a href="https://pypi.org/project/unsupervised-bias-detection/" target="_blank">pip package</a>: `pip install unsupervised-bias-detection`.
+  [![!pypi](https://img.shields.io/pypi/v/unsupervised-bias-detection?logo=pypi\&color=blue)](https://pypi.org/project/unsupervised-bias-detection/)
+* The architecture to run web apps local-first is also available on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
 
 {{< container_close >}}
 
 <!-- Anolamy detection algorithm -->
 
 {{< container_open title="Anolamy detection algorithm – Hierarchical Bias-Aware Clustering (HBAC)" icon="fas fa-code-branch" id="HBAC" >}}
 
-The tool uses the _Hierarchical Bias-Aware Clustering_ (HBAC) algorithm. HBAC processes input data according to the k-means (for numerical data) or k-modes (for categorical data) clustering algorithm. The HBAC-algorithm is introduced by Misztal-Radecka and Indurkya in a [scientific article](https://www.sciencedirect.com/science/article/abs/pii/S0306457321000285) as published in *Information Processing and Management* (2021). Our implementation of the HBAC-algorithm, including additional methodological checks to distinguish real bias from noise, such as sample splitting, statistical hypothesis testing and measuring cluster stability, can be found in the <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection/blob/master/README.md" target="_blank">unsupervised-bias-detection</a> pip package.
+The tool uses the *Hierarchical Bias-Aware Clustering* (HBAC) algorithm. HBAC processes input data according to the k-means (for numerical data) or k-modes (for categorical data) clustering algorithm. The HBAC-algorithm is introduced by Misztal-Radecka and Indurkya in a [scientific article](https://www.sciencedirect.com/science/article/abs/pii/S0306457321000285) as published in *Information Processing and Management* (2021). Our implementation of the HBAC-algorithm, including additional methodological checks to distinguish real bias from noise, such as sample splitting, statistical hypothesis testing and measuring cluster stability, can be found in the <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection/blob/master/README.md" target="_blank">unsupervised-bias-detection</a> pip package.
 
 {{< container_close >}}
 
@@ -188,11 +188,11 @@ Local-first computing is the opposite of cloud computing: the data is not upload
 
 <!-- Supported by -->
 
-{{< container_open title="Supported by" icon="fas fa-toolbox" id="supported-by">}}
+{{< container_open title="Supported by" icon="fas fa-toolbox" id="supported-by" >}}
 
 This tool is developed with support of public and philanthropic organisations.
 
-{{< accordions_area_open id="supported-by-accordion">}}
+{{< accordions_area_open id="supported-by-accordion" >}}
 
 {{< accordion_item_open title="Innovation grant Dutch Ministry of the Interior" image="/images/supported_by/BZK.jpg" tag1="2024-25" >}}
 
@@ -218,7 +218,7 @@ In 2024, the SIDN Fund <a href="https://www.sidnfonds.nl/projecten/open-source-a
 
 <!-- Awards and acknowledgements -->
 
-{{< container_open title="Awards and acknowledgements" icon="fas fa-medal" id="awards-acknowledgements">}}
+{{< container_open title="Awards and acknowledgements" icon="fas fa-medal" id="awards-acknowledgements" >}}
 
 This tool has received awards and is acknowledged by various <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection?tab=readme-ov-file#contributing-members" target="_blank">stakeholders</a>, including civil society organisations, industry representatives and academics.
 
@@ -246,16 +246,16 @@ The unsupervised bias detection tool is part of OECD's <a href="https://oecd.ai/
 
 <!-- Summary -->
 
-{{< container_open title="Summary" icon="fas fa-dot-circle" id="summary">}}
+{{< container_open title="Summary" icon="fas fa-dot-circle" id="summary" >}}
 
 Key take-aways about unsupervised bias detection tool:
 
-- <span style="color:#005AA7">Quantitative-qualitative research method</span>: Data-driven bias testing combined with the balanced and context-sensitive judgment of human experts;
-- <span style="color:#005AA7">Unsupervised bias detection</span>: No user data needed on protected attributes (_unsupervised learning_);
-- <span style="color:#005AA7">Anolamy detection</span>: Scalable method based on statistical analysis;
-- <span style="color:#005AA7">Detects complex bias</span>: Identifies unfairly treated groups characterized by mixture of features, detects intersectional bias;
-- <span style="color:#005AA7">Model-agnostic</span>: Works for all binary classification algorithms and AI systems;
-- <span style="color:#005AA7">Open-source and not-for-profit</span>: User friendly and free to use for the entire AI auditing community.
+* <span style="color:#005AA7">Quantitative-qualitative research method</span>: Data-driven bias testing combined with the balanced and context-sensitive judgment of human experts;
+* <span style="color:#005AA7">Unsupervised bias detection</span>: No user data needed on protected attributes (*unsupervised learning*);
+* <span style="color:#005AA7">Anolamy detection</span>: Scalable method based on statistical analysis;
+* <span style="color:#005AA7">Detects complex bias</span>: Identifies unfairly treated groups characterized by mixture of features, detects intersectional bias;
+* <span style="color:#005AA7">Model-agnostic</span>: Works for all binary classification algorithms and AI systems;
+* <span style="color:#005AA7">Open-source and not-for-profit</span>: User friendly and free to use for the entire AI auditing community.
 
 {{< container_close >}}
 

layouts/shortcodes/container_close.html

@@ -1,4 +1,4 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-
+        </div>
     </div>
 </div>

layouts/shortcodes/container_open.html

@@ -1,16 +1,38 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-<div id={{.Get "id" }} class="container-fluid mt-5 p-0">
-    <div class="shadow mobile-desktop-container-layout rounded-lg">
-        <div class="row">
-            <div class="col-12">
+{{ $id := .Get "id" }}
+{{ $isAccordion := .Get "isAccordion" }}
+{{ if $isAccordion }}
+<script>
+    docReady(function () {
+        new Accordion('.accordion_container_{{$id}}');
+
+        $(".accordion_container_{{$id}} .ac-trigger").click(function() {
+            const isExpanded = $(this).attr("aria-expanded");
+            const elementToSetChevronOn = $(this).find("h3 > span.fas");
+            if  (isExpanded === "true") {
+                elementToSetChevronOn.removeClass("fa-chevron-up");
+                elementToSetChevronOn.addClass("fa-chevron-down");
+            } else {
+                elementToSetChevronOn.removeClass("fa-chevron-down");
+                elementToSetChevronOn.addClass("fa-chevron-up");
+            }
+        });
+    });
+</script>
+{{ end }}
+<div id={{$id}} class="{{ if $isAccordion }} accordion_container_{{$id}} {{ end }} container-fluid mt-5 p-0">
+    <div class="{{ if $isAccordion }} ac {{ end }} shadow mobile-desktop-container-layout rounded-lg ">
+        <div class="{{ if $isAccordion }} ac-header {{ end }} ">
+            <div class="col-12 row ac--has-own-icon {{ if $isAccordion }} ac-trigger {{ end }}">
 
                 <!-- Title and icon -->
                 <div>
                     <h3>
-                        <span class="{{.Get "icon" }} icon mb-4 pl-5"></span>
+                        <span class="{{if $isAccordion }} fas fa-chevron-up {{else}} {{.Get "icon" }} {{end}} icon mb-4 pl-5"></span>
                         {{ .Get "title" }}
                     </h3>
                 </div>
 
             </div>
-        </div>
+        </div>
+        <div class="{{ if $isAccordion }} ac-panel {{ end }} ">

static/css/accordion.min.css

@@ -20,7 +20,7 @@
     padding: 0
 }
 
-.ac .ac-trigger {
+.ac .ac-trigger:not(    .ac--has-own-icon) {
     text-align: left;
     width: 100%;
     padding: 8px 32px 8px 8px;
@@ -34,7 +34,7 @@
     border: 0
 }
 
-.ac .ac-trigger::after {
+.ac .ac-trigger:not(    .ac--has-own-icon)::after {
     content: "+";
     text-align: center;
     width: 15px;
@@ -68,6 +68,6 @@
     visibility: visible
 }
 
-.ac.is-active>.ac-header .ac-trigger::after {
+.ac.is-active>.ac-header .ac-trigger.ac-trigger:not(.ac--has-own-icon)::after {
     content: "–"
 }

static/js/quicknavigation.js

@@ -5,16 +5,20 @@ docReady(function () {
     var sections = quickLinks.map(function () {
       return $(this).attr("href");
     });
-    var sectionOffsets = sections.map(function (index, section) {
-      return $(section).offset().top - 300; // Adjust offset as needed
+    var sectionOffsets = sections.map(function (_, section) {
+      const sectionElement = $(section);
+      if (sectionElement.length === 0) {
+        return -1;
+      }
+      return sectionElement.offset().top - 250; // Adjust offset as needed
     });
     let highestActiveIndex = -1;
     var scrollPos = $(this).scrollTop();
     quickLinks.each(function () {
       $(this).removeClass("highlight-red-sm");
     });
     sectionOffsets.each(function (index) {
-      if (scrollPos >= this) {
+      if (this > 0 && scrollPos >= this) {
         highestActiveIndex = index;
       }
     });

tina/collections/shared/templates/container_open.ts

@@ -7,6 +7,24 @@ let template: RichTextTemplate = {
     end: ">}}",
   },
   fields: [
+    {
+      type: "string",
+      name: "isAccordion",
+      label: "Is Accordion",
+      description:
+        "Is this a collapsible accordion?, if so, the icon below is ignored",
+      required: false,
+      options: [
+        {
+          label: "No",
+          value: "",
+        },
+        {
+          label: "Yes",
+          value: "true",
+        },
+      ],
+    },
     {
       type: "string",
       name: "icon",

tina/collections/shared/templates/team.ts

@@ -1,19 +1,24 @@
-import { RichTextTemplate } from "@tinacms/schema-tools/dist/types/index"
-let pdf_frame : RichTextTemplate = {
-    name: 'team',
-    label: 'Team',
-    match: {
-        start: '{{<',
-        end: '>}}'
+import { RichTextTemplate } from "@tinacms/schema-tools/dist/types/index";
+let pdf_frame: RichTextTemplate = {
+  name: "team",
+  label: "Team",
+  match: {
+    start: "{{<",
+    end: ">}}",
+  },
+  fields: [
+    {
+      name: "id",
+      label: "ID",
+      type: "string",
     },
-    fields: [
-        {
-            name: 'title',
-            label: 'DONT USE',
-            type: 'string',
-            description: 'Use top level template',
-            required: false,
-        }
-    ]
+    {
+      name: "title",
+      label: "DONT USE",
+      type: "string",
+      description: "Use top level template",
+      required: false,
+    },
+  ],
 };
-export default pdf_frame;
+export default pdf_frame;