Add tag cloud with popular filters above search input

New features:
- Tag cloud displays 8 most popular languages and 6 most popular categories
- Tags have variable font sizes based on frequency (larger = more common)
- Tags are clickable and trigger the same filtering as table row tags
- Positioned above search input for easy discovery
- Styled with hover effects and responsive layout
- Shows both language and category tags mixed together

The tag cloud helps users quickly discover popular filters without
needing to scroll through the entire table.
This commit is contained in:
Wilson Freitas
2026-03-28 13:03:32 -03:00
parent fc78df9bcb
commit dc54c140e2
3 changed files with 128 additions and 0 deletions
+20
View File
@@ -51,6 +51,26 @@
</div>
</div>
<div class="tag-cloud">
<div class="tag-cloud-label">Popular filters:</div>
<div class="tag-cloud-items">
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="Python" style="font-size: 1.60em;">python</button>
<button class="tag tag-section tag-cloud-item" data-filter-type="category" data-filter-value="Trading &amp; Backtesting" style="font-size: 1.24em;">Trading &amp; Backtesting</button>
<button class="tag tag-section tag-cloud-item" data-filter-type="category" data-filter-value="Market Data &amp; Data Sources" style="font-size: 1.20em;">Market Data &amp; Data Sources</button>
<button class="tag tag-section tag-cloud-item" data-filter-type="category" data-filter-value="Financial Instruments &amp; Pricing" style="font-size: 1.16em;">Financial Instruments &amp; Pricing</button>
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="R" style="font-size: 1.15em;">r</button>
<button class="tag tag-section tag-cloud-item" data-filter-type="category" data-filter-value="Reproducing Works, Training &amp; Books" style="font-size: 1.11em;">Reproducing Works, Training &amp; Books</button>
<button class="tag tag-section tag-cloud-item" data-filter-type="category" data-filter-value="Portfolio Optimization &amp; Risk Analysis" style="font-size: 1.08em;">Portfolio Optimization &amp; Risk Analysis</button>
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="Julia" style="font-size: 1.05em;">julia</button>
<button class="tag tag-section tag-cloud-item" data-filter-type="category" data-filter-value="Technical Indicators" style="font-size: 1.05em;">Technical Indicators</button>
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="JavaScript" style="font-size: 1.03em;">javascript</button>
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="Rust" style="font-size: 1.02em;">rust</button>
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="Java" style="font-size: 1.01em;">java</button>
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="CPP" style="font-size: 1.00em;">cpp</button>
<button class="tag tag-lang tag-cloud-item" data-filter-type="language" data-filter-value="Haskell" style="font-size: 1.00em;">haskell</button>
</div>
</div>
<div class="filter-bar" id="filter-bar" style="display:none">
<span class="filter-label">Filtered by:</span>
<span class="filter-value" id="filter-value"></span>