Improve tag management and add Others category for uncategorized tags

- Remove duplicate tags in app-card template and HTML (use single tags parameter)
- Add global .hidden CSS class for proper element hiding
- Add Others category in JavaScript to display uncategorized tags (shown only when not empty)
- Update tag categories with missing tags: direct, continuation, conjugate-points, energy-optimization, production-regeneration, singular-control, turnpike
- Add automatic color alternation via JavaScript (red-green-purple pattern)
- Add Others section in filter sidebar (hidden by default)

Author: ocots

_includes/app-card.html

@@ -1,14 +1,14 @@
-<a class="app-card" href="{{ include.url }}" style="--app-color: {{ include.color | default: '#CB3C33' }};" data-tags="{{ include.tags }}">
+<a class="app-card" href="{{ include.url }}" style="--app-color: {{ include.color | default: '#CB3C33' }};" data-tags="{{ include.tags | join: ',' }}">
 <div class="app-header">
 <div class="app-avatar-text">{{ include.abbrev }}</div>
 <span class="app-title">{{ include.title }}</span>
 </div>
 <div class="app-body">
 <p class="app-summary">{{ include.summary }}</p>
-{% if include.tags_list %}
+{% if include.tags %}
 <div class="app-tags">
 <span class="tags-label">Tags:</span>
-{% for tag in include.tags_list %}
+{% for tag in include.tags %}
 <span class="tag">{{ tag }}</span>
 {% endfor %}
 </div>

applications/index.md

@@ -87,6 +87,11 @@ custom_js:
 <div class="filter-bar" id="filter-bar-techniques"></div>
 </div>
 
+<div class="filter-tags-section hidden" id="filter-section-others">
+<h4>Others</h4>
+<div class="filter-bar" id="filter-bar-others"></div>
+</div>
+
 </div>
 
 </div>
@@ -117,24 +122,22 @@ custom_js:
 
 <div class="app-grid" id="app-grid">
 
-{% assign tags-cov = "classical-mechanics,calculus-of-variations,lagrangian,direct-methods,indirect-methods" | split: "," %}
+{% assign tags-cov = "classical-mechanics,calculus-of-variations,lagrangian,shooting,continuation,conjugate-points" | split: "," %}
 {% include app-card.html
   url="https://control-toolbox.org/CalculusOfVariations.jl"
   abbrev="CoV"
   title="Calculus of variations"
   summary="Classical variational problems reformulated as optimal control problems and solved via direct and indirect numerical methods."
-  tags="classical-mechanics,calculus-of-variations,lagrangian,direct-methods,indirect-methods"
-  tags_list=tags-cov
+  tags=tags-cov
 %}
 
-{% assign tags-dbg = "biology,resource-allocation,switching-time,bang-bang,indirect-methods" | split: "," %}
+{% assign tags-dbg = "biology,resource-allocation,switching-time,bang-bang,direct" | split: "," %}
 {% include app-card.html
   url="https://agustinyabo.github.io/DiauxicGrowth.jl"
   abbrev="DBG"
   title="Diauxic bacterial growth"
   summary="Optimal resource allocation for bacterial growth on multiple substrates, maximizing final cell population via optimal control of metabolic fluxes."
-  tags="biology,resource-allocation,switching-time,bang-bang,indirect-methods"
-  tags_list=tags-dbg
+  tags=tags-dbg
 %}
 
 {% assign tags-grn = "biology,piecewise-linear,nonsmooth,regularization,gene-networks" | split: "," %}
@@ -143,30 +146,27 @@ custom_js:
   abbrev="GRN"
   title="PWL models of gene regulatory networks"
   summary="State transitions in piecewise linear models of gene regulatory networks, with a nonsmooth L¹ cost and regularization strategies (Hill and exponential)."
-  tags="biology,piecewise-linear,nonsmooth,regularization,gene-networks"
-  tags_list=tags-grn
+  tags=tags-grn
 %}
 
-{% assign tags-gprec = "preconditioning,shooting,convergence,hamiltonian,geometric-control" | split: "," %}
+{% assign tags-gprec = "preconditioning,shooting,convergence,geometric-control" | split: "," %}
 {% include app-card.html
   url="https://control-toolbox.org/GeometricPreconditioner.jl"
   abbrev="GPrec"
   font_size="19"
   title="Geometric preconditioner"
   summary="Geometric preconditioning of shooting methods to accelerate convergence in indirect optimal control, exploiting the structure of the Hamiltonian flow."
-  tags="preconditioning,shooting,convergence,hamiltonian,geometric-control"
-  tags_list=tags-gprec
+  tags=tags-gprec
 %}
 
-{% assign tags-lctrl = "constrained,regularization,shooting,indirect-methods,zermelo" | split: "," %}
+{% assign tags-lctrl = "constrained,regularization,pontryagin-maximum-principle,shooting,direct,shooting,zermelo" | split: "," %}
 {% include app-card.html
   url="https://control-toolbox.org/LossControl.jl"
   abbrev="LCtrl"
   font_size="19"
   title="Loss control regions in optimal control problems"
   summary="Optimal control problems with loss control regions where the control is frozen, solved by combining direct regularization and indirect shooting methods."
-  tags="constrained,regularization,shooting,indirect-methods,zermelo"
-  tags_list=tags-lctrl
+  tags=tags-lctrl
 %}
 
 {% assign tags-mf = "energy-optimization,production-regeneration,bang-bang,singular-control,turnpike" | split: "," %}
@@ -175,39 +175,35 @@ custom_js:
   abbrev="MF"
   title="Membrane filtration"
   summary="Energy-optimal control of membrane filtration processes with production-regeneration cycles, minimizing power consumption while achieving targeted permeate volume via bang-bang and singular control strategies."
-  tags="energy-optimization,production-regeneration,bang-bang,singular-control,turnpike"
-  tags_list=tags-mf
+  tags=tags-mf
 %}
 
-{% assign tags-mri = "medical-imaging,time-optimal,physics,geometric-control,bloch-equation" | split: "," %}
+{% assign tags-mri = "medical-imaging,time-optimal,geometric-control,direct,shooting,bloch-equation" | split: "," %}
 {% include app-card.html
   url="https://control-toolbox.org/MagneticResonanceImaging.jl"
   abbrev="MRI"
   title="Optimal control in Magnetic Resonance Imaging"
   summary="Time-minimal control of nuclear spin ensembles via RF pulses, with applications to contrast optimization in MRI using geometric optimal control."
-  tags="medical-imaging,time-optimal,physics,geometric-control,bloch-equation"
-  tags_list=tags-mri
+  tags=tags-mri
 %}
 
-{% assign tags-kepler = "aerospace,time-optimal,shooting,direct-methods,orbital-mechanics" | split: "," %}
+{% assign tags-kepler = "aerospace,time-optimal,shooting,direct,orbital-mechanics" | split: "," %}
 {% include app-card.html
   url="https://control-toolbox.org/Kepler.jl"
   abbrev="Kepler"
   font_size="19"
   title="Minimum time orbit transfer"
   summary="Minimum-time orbit transfer of a spacecraft under Kepler dynamics with thrust constraints, solved by direct and indirect methods."
-  tags="aerospace,time-optimal,shooting,direct-methods,orbital-mechanics"
-  tags_list=tags-kepler
+  tags=tags-kepler
 %}
 
-{% assign tags-sir = "epidemiology,constrained,social-distancing,public-health,ode" | split: "," %}
+{% assign tags-sir = "epidemiology,constrained,social-distancing,public-health,ode,direct" | split: "," %}
 {% include app-card.html
   url="https://anasxbouali.github.io/SIRcontrol.jl"
   abbrev="SIR"
   title="On the problem of minimizing the epidemic final size for SIR model via social distancing"
   summary="Minimizing epidemic final size in the SIR model via L¹-constrained social distancing interventions, with optimal control over a single or two time intervals."
-  tags="epidemiology,constrained,social-distancing,public-health,ode"
-  tags_list=tags-sir
+  tags=tags-sir
 %}
 
 </div>

assets/css/applications.css

@@ -3,6 +3,11 @@
     margin-bottom: 0 !important;
 }
 
+/* Global hidden class */
+.hidden {
+    display: none !important;
+}
+
 /* Layout with sidebar */
 .apps-layout {
     display: grid;

assets/js/applications.js

@@ -126,23 +126,64 @@
   var tagCategories = {
     'domains': {
       container: document.getElementById('filter-bar-domains'),
-      tags: ['classical-mechanics', 'biology', 'epidemiology', 'aerospace', 'medical-imaging', 'physics']
+      tags: [
+        'classical-mechanics', 
+        'biology', 
+        'epidemiology', 
+        'aerospace', 
+        'medical-imaging', 
+        'physics']
     },
     'methods': {
       container: document.getElementById('filter-bar-methods'),
-      tags: ['direct-methods', 'indirect-methods', 'shooting', 'discretization', 'regularization']
+      tags: [
+        'direct-methods',
+        'indirect-methods',
+        'shooting',
+        'discretization',
+        'regularization',
+        'continuation',
+        'direct']
     },
     'problems': {
       container: document.getElementById('filter-bar-problems'),
-      tags: ['time-optimal', 'energy-optimal', 'lagrangian', 'constrained', 'nonsmooth', 'bang-bang']
+      tags: [
+        'time-optimal',
+        'energy-optimal',
+        'energy-optimization',
+        'lagrangian',
+        'constrained',
+        'nonsmooth',
+        'bang-bang']
     },
     'concepts': {
       container: document.getElementById('filter-bar-concepts'),
-      tags: ['calculus-of-variations', 'hamiltonian', 'pontryagin', 'geometric-control', 'piecewise-linear', 'ode']
+      tags: [
+        'calculus-of-variations',
+        'hamiltonian',
+        'pontryagin-maximum-principle',
+        'geometric-control',
+        'piecewise-linear',
+        'ode',
+        'conjugate-points',
+        'singular-control',
+        'turnpike']
     },
     'techniques': {
       container: document.getElementById('filter-bar-techniques'),
-      tags: ['preconditioning', 'convergence', 'switching-time', 'state-constraints', 'resource-allocation', 'social-distancing', 'public-health', 'gene-networks', 'zermelo', 'bloch-equation', 'orbital-mechanics']
+      tags: [
+        'preconditioning',
+        'convergence',
+        'switching-time',
+        'state-constraints',
+        'resource-allocation',
+        'social-distancing',
+        'public-health',
+        'gene-networks',
+        'zermelo',
+        'bloch-equation',
+        'orbital-mechanics',
+        'production-regeneration']
     }
   };
 
@@ -168,20 +209,29 @@
   var activeFilters = new Set();
   var tagButtons = {};
 
+  // Collect all categorized tags
+  var categorizedTags = new Set();
+  Object.keys(tagCategories).forEach(function(categoryKey) {
+    tagCategories[categoryKey].tags.forEach(function(tag) {
+      categorizedTags.add(tag);
+    });
+  });
+
+  // Create buttons for categorized tags
   Object.keys(tagCategories).forEach(function(categoryKey) {
     var category = tagCategories[categoryKey];
     category.tags.forEach(function(tag) {
       if (allTags.has(tag)) {
         var btn = document.createElement('button');
         btn.className = 'filter-btn';
-        
+
         var tagName = document.createElement('span');
         tagName.textContent = tag;
-        
+
         var tagCount = document.createElement('span');
         tagCount.className = 'tag-count';
         tagCount.textContent = tagCounts[tag];
-        
+
         btn.appendChild(tagName);
         btn.appendChild(tagCount);
         btn.addEventListener('click', function() { toggleFilter(tag); });
@@ -191,6 +241,38 @@
     });
   });
 
+  // Handle OTHERS category - uncategorized tags
+  var othersContainer = document.getElementById('filter-bar-others');
+  var othersSection = document.getElementById('filter-section-others');
+  if (othersContainer && othersSection) {
+    var othersTags = Array.from(allTags).filter(function(tag) {
+      return !categorizedTags.has(tag);
+    }).sort();
+
+    if (othersTags.length > 0) {
+      othersTags.forEach(function(tag) {
+        var btn = document.createElement('button');
+        btn.className = 'filter-btn';
+
+        var tagName = document.createElement('span');
+        tagName.textContent = tag;
+
+        var tagCount = document.createElement('span');
+        tagCount.className = 'tag-count';
+        tagCount.textContent = tagCounts[tag];
+
+        btn.appendChild(tagName);
+        btn.appendChild(tagCount);
+        btn.addEventListener('click', function() { toggleFilter(tag); });
+        othersContainer.appendChild(btn);
+        tagButtons[tag] = btn;
+      });
+      othersSection.classList.remove('hidden');
+    } else {
+      othersSection.classList.add('hidden');
+    }
+  }
+
   function toggleFilter(tag) {
     if (activeFilters.has(tag)) {
       activeFilters.delete(tag);