Add filters for dataset page

beverleyy · beverleyy · commit aefeee23a405 · 2025-02-20T13:36:13.000-08:00
diff --git a/_datasets/brouzet2021.md b/_datasets/brouzet2021.md
@@ -5,6 +5,7 @@ title: Reacting Jet Flows
 description: Turbulent Round Jet Premixed COFFEE CH4-air Premixed Flame DNS
 header:
   teaser: /assets/img/ico_brouzet2021.png
+categories: reacting
 ---
 
 <div class="sidebar__right" style="top:200px; text-align: center;">
diff --git a/_datasets/chung2022.md b/_datasets/chung2022.md
@@ -5,6 +5,7 @@ excerpt: (1 case)
 header:
   teaser: /assets/img/ico_chung2022.png
 description: Compressible Inert CH4-O2 Homogeneous Isotropic Turbulence DNS
+categories: nonreacting
 ---
 
 ![image](./assets/img/chung2022.png)
diff --git a/_datasets/coulon.md b/_datasets/coulon.md
@@ -5,6 +5,7 @@ description: NH3-H2-Air Premixed Flame DNS
 excerpt: (1 case)
 header:
   teaser: /assets/img/ico_coulon2023.png
+categories: reacting
 ---
 
 <div class="sidebar__right" style="top: 130px; text-align: center;">
diff --git a/_datasets/gauding2022.md b/_datasets/gauding2022.md
@@ -5,6 +5,7 @@ title: Forced HIT
 description: Passive Scalar HIT DNS
 header:
   teaser: /assets/img/ico_gauding2022.png
+categories: nonreacting
 ---
 
 <div class="sidebar__right" style="text-align: center; top: 160px;">
diff --git a/_datasets/guo2022.md b/_datasets/guo2022.md
@@ -4,6 +4,7 @@ title: Non-Reacting Channel Flow
 excerpt: (6 cases)
 header:
   teaser: /assets/img/ico_guo2022.png
+categories: nonreacting
 description: Transcritical Channel Flow N2 Turbulence DNS
 ---
 
diff --git a/_datasets/jiang2021.md b/_datasets/jiang2021.md
@@ -5,6 +5,7 @@ excerpt: (1 case)
 header:
   teaser: /assets/img/ico_jiang2021.png
 description: Premixed Flame-wall Interaction CH4-Air DNS
+categories: reacting
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/jung2021.md b/_datasets/jung2021.md
@@ -4,7 +4,8 @@ title: Slot Burner
 excerpt: (1 case)
 header:
   teaser: /assets/img/ico_jung2021.png
-description: Slot Burner Diluted Partially-Premixed  H2-air Lifted Flame DNS
+description: Slot Burner Diluted Partially-Premixed H2-air Lifted Flame DNS
+categories: reacting
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/poludnenko.md b/_datasets/poludnenko.md
@@ -5,6 +5,7 @@ excerpt: (1 case)
 description: CH4-Air Flame Interaction With Forced HIT DNS
 header:
   teaser: /assets/img/ico_poludnenko.png
+categories: reacting
 ---
 
 ![image](./assets/img/poludnenko.png)
diff --git a/_datasets/quentin2024.md b/_datasets/quentin2024.md
@@ -6,6 +6,7 @@ description: Premixed Flame H2-Air DNS in Slot Burner
 header:
   teaser: /assets/img/ico_quentin2024.png
 #   image: /assets/img/quentin2024.png
+categories: reacting
 ---
 <div style="text-align: center;">
     <img src="./assets/img/quentin2024.png" alt="Image 1" style="max-width: 100%;">
diff --git a/_datasets/roshan2024.md b/_datasets/roshan2024.md
@@ -6,6 +6,7 @@ description: Rayleigh-Bénard Convection DNS
 header:
   teaser: /assets/img/ico_roshan2024.png
   image: /assets/img/roshan2024.png
+categories: nonreacting
 ---
 
 <!--
diff --git a/_datasets/savard.md b/_datasets/savard.md
@@ -5,6 +5,7 @@ excerpt: (22 cases)
 header:
   teaser: /assets/img/ico_savard2019.png
 description: Vitiated H2-air Freely Propagating Flame DNS
+categories: reacting
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/shantanu.md b/_datasets/shantanu.md
@@ -5,6 +5,7 @@ title: Canonical Decaying HIT
 description: Decaying homogeneous isotropic turbulence DNS
 header:
   teaser: /assets/img/ico_shantanu2022.png
+categories: nonreacting
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/sharma2024.md b/_datasets/sharma2024.md
@@ -5,6 +5,7 @@ title: Lifted hydrogen jet flame
 description: Circular Burner Diluted Partially-Premixed H2-air Lifted Flame in 2D configuration
 header:
   teaser: /assets/img/ico_sharma2024.png
+categories: reacting
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/wang2024.md b/_datasets/wang2024.md
@@ -6,6 +6,7 @@ description: LES of an ensemble of wildfire spread
 header:
   image: /assets/img/wang2024.png
   teaser: /assets/img/ico_wang2024.png
+categories: reacting
 ---
 
 <!--
diff --git a/_includes/archive-single.html b/_includes/archive-single.html
@@ -10,7 +10,7 @@
   {% assign title = post.title %}
 {% endif %}
 
-<div class="{{ include.type | default: 'list' }}__item">
+<div class="{% if post.categories %}{{ post.categories }}{% endif %} {{ include.type | default: 'list' }}__item">
   <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork"{% if post.locale %} lang="{{ post.locale }}"{% endif %}>
     {% if include.type == "grid" and teaser %}
       <div class="archive__item-teaser">
diff --git a/_includes/datasets_filters.html b/_includes/datasets_filters.html
@@ -0,0 +1,53 @@
+<div class="filter-group filter-categories">
+  <a href="#"class="datasets_all"  data-filter="*">
+    <h3>All</h3>
+    <img src="/assets/img/blastnet_banner.png"/>
+  </a>
+  <a href="#" data-filter=".reacting">
+    <h3>Reacting</h3>
+    <img src="/assets/img/filter_reacting.jpeg"/>
+  </a>
+  <a href="#" data-filter=".nonreacting">
+    <h3>Non-reacting</h3>
+    <img src="/assets/img/filter_nonreacting.png"/>
+  </a>
+  <a href="#" data-filter=".experimental">
+    <h3>Experimental</h3>
+    <img src="/assets/img/filter_experimental.png"/>
+  </a>
+  <h2>BLASTNet Simulation Dataset</h2>
+</div>
+
+<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
+<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
+
+<script>
+document.addEventListener('DOMContentLoaded',function(){
+    var content = document.querySelector('.entries-grid');
+    var iso = new Isotope(content,{
+        itemSelector:'.grid__item',
+        layoutMode:'fitRows'
+    });
+    imagesLoaded(content).on('progress',function(){
+        iso.layout();
+    });
+    document.querySelectorAll('.filter-group a').forEach(function(element){
+        element.addEventListener('click',function(e){
+            var filter_class;
+            //var filter_class = element.getAttribute("data-filter");
+            if (element.classList.contains('is-checked'))
+                filter_class = '*';
+            else {
+                filter_class = element.getAttribute('data-filter');
+                document.querySelectorAll('.is-checked').forEach(el => el.classList.remove('is-checked'));
+            }
+	    iso.arrange({
+                filter: filter_class
+            });
+            element.classList.toggle('is-checked');
+            e.preventDefault();
+        });
+    });
+});
+</script>
+
diff --git a/_layouts/datapage.html b/_layouts/datapage.html
@@ -62,7 +62,7 @@ <h1 id="page-title" class="page__title" itemprop="headline">
         {% if site.data.ui-text[site.locale].meta_label %}
           <h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
         {% endif %}
-        {% include page__taxonomy.html %}
+	<!--{% include page__taxonomy.html %}-->
         {% include page__date.html %}
       </footer>
 
diff --git a/_layouts/datasets.html b/_layouts/datasets.html
@@ -4,7 +4,7 @@
 
 <p>{{ page.excerpt }}</p>
 
-<h2>BLASTNet Simulation Dataset</h2>
+{% include datasets_filters.html %}
 
 {% assign entries_layout = page.entries_layout | default: 'list' %}
 <div class="entries-{{ entries_layout }}">
diff --git a/_sass/stylesheets/_blastnet.scss b/_sass/stylesheets/_blastnet.scss
@@ -55,8 +55,8 @@ $base0f: #d33682 !default;
 }
 
 .page__hero img {
-  width: 70%; 
-  height: auto; 
+  width: 70%;
+  height: auto;
 }
 
 .page__hero {
@@ -223,3 +223,54 @@ $base0f: #d33682 !default;
   background-color: $secondary-color!important;
   color: #fff!important;
 }
+
+/*-- isotope --*/
+
+.filter-group {
+  text-align:center;
+
+  h2 {
+    text-align:left;
+  }
+}
+
+.filter-group a {
+  text-decoration:none;
+
+  &.is-checked:not(.datasets_all) {
+    opacity:0.5;
+  }
+}
+
+.filter-group a {
+  width:24%;
+  height:100px;
+  position:relative;
+  display:inline-block;
+
+  img {
+    display:block;
+    width:100%;
+    height:100%;
+    position:absolute;
+    object-fit:cover;
+    top:0;
+    left:0;
+    border-radius:20px;
+  }
+
+  h3 {
+    position:absolute;
+    left:0;
+    right:0;
+    top:0;
+    bottom:0;
+    z-index:1;
+    text-shadow:1px 1px 4px rgba(0,0,0,0.5);
+    height:1.5rem;
+    margin:auto;
+    text-align:center;
+    color:white;
+    text-decoration:none;
+  }
+}
diff --git a/_sass/stylesheets/_page.scss b/_sass/stylesheets/_page.scss
@@ -572,4 +572,4 @@ body {
 
 p {
   text-align: justify;
-}
+}
diff --git a/assets/img/filter_experimental.png b/assets/img/filter_experimental.png
diff --git a/assets/img/filter_nonreacting.png b/assets/img/filter_nonreacting.png
diff --git a/assets/img/filter_reacting.jpeg b/assets/img/filter_reacting.jpeg
