From 23918704afef44a5c198e0c22229a59ed689861e Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 19 Oct 2026 09:50:13 +0000 Subject: [PATCH 1/2] Make research topic chips teal buttons Topic filters were purple spans, so the keyboard and the teal accent never reached them. Real buttons keep the same tag filter and expose pressed state. Co-authored-by: Vatsal Sanjay | CoMPhy Lab --- AGENTS.md | 4 +- README.md | 4 +- _layouts/research.html | 2 + _research/index.md | 94 +++++++++++++------------- assets/css/research-v2.css | 44 ++++++++---- assets/css/styles.css | 7 +- assets/js/command-data.js | 6 +- assets/js/page-research.js | 39 +++++++---- scripts/generate_filtered_research.rb | 2 +- tests/command-actions-workflow.test.js | 12 ++-- tests/command-data-actual.test.js | 6 +- tests/research-filter.test.js | 29 ++++---- 12 files changed, 145 insertions(+), 104 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 81e1b70..c20215e 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -80,7 +80,7 @@ content. ### Research tag filtering - Client-side JS filtering plus pre-generated tag pages for SEO. -- Tags must use `
TagName
` in +- Tags must use `
` in `_research/index.md`. ### Redirect pages @@ -133,7 +133,7 @@ Add to `_research/index.md` in this exact form: ```markdown

[NUMBER] Author1, A., **Author2, B.**, & Author3, C. Title. _Journal_, Volume, Pages (Year).

-
Tag1Tag2Featured
+
[![Badge](https://img.shields.io/static/v1.svg?style=flat-square&label=LABEL&message=MESSAGE&color=COLOR)](URL) ``` diff --git a/README.md b/README.md index 834f5b0..18793b6 100644 --- a/README.md +++ b/README.md @@ -345,7 +345,7 @@ present: ```markdown

[NUMBER] Author1, A., **Author2, B.**, & Author3, C. Title. _Journal_, Volume, Pages (Year).

-
Tag1Tag2Featured
+
[![Badge1](https://img.shields.io/static/v1.svg?style=flat-square&label=LABEL&message=MESSAGE&color=COLOR)](URL) [![Badge2](https://img.shields.io/static/v1.svg?style=flat-square&label=LABEL&message=MESSAGE&color=COLOR)](URL) @@ -547,7 +547,7 @@ The search functionality includes content from our external blog at blogs.comphy Research papers can be tagged with multiple topics. Tags are defined in the markdown files using the following format: ```html -
Tag1Tag2
+
``` These tags are: diff --git a/_layouts/research.html b/_layouts/research.html index 6d83c4e..380b9b0 100644 --- a/_layouts/research.html +++ b/_layouts/research.html @@ -99,6 +99,8 @@

Contents

/* Hidden paper (filtered out) */ .research-content .paper-container.hidden { display: none; } /* Active tag (clicked) gets a teal solid treatment */ + .research-content .tags button.active, + .research-content .tags button[aria-pressed="true"], .research-content .tags span.active, .r-theme__tag.active { background: var(--c-accent-teal); diff --git a/_research/index.md b/_research/index.md index 04899c4..2cd750a 100644 --- a/_research/index.md +++ b/_research/index.md @@ -5,29 +5,29 @@ title: Research ## Sort by topic -
Bubbles
-
Drops
-
Jets
-
Sheets
-
Non-Newtonian
-
Coalescence
-
Superamphiphobic-surfaces
-
Impact forces
-
Dissipative anomaly
-
Soft-matter-singularities
-
Elastic beads
-
Bouncing
-
Rupture
-
Contact line
-
Marangoni flows
-
Numerical methods
-
Featured
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Work in Progress ### Gordillo, J. M., Rodríguez-Rodríguez, J., & Sanjay, V. Self-similar Worthington jets. arXiv preprint arXiv:2607.08972 (2026). {#self-similar-worthington-jets} -
BubblesJetsSoft-matter-singularitiesFeatured
+
[![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2607.08972&color=green)](https://arxiv.org/abs/2607.08972) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/comphy-lab/Bursting-Bubble) @@ -38,13 +38,13 @@ title: Research ### Yang, Z., Sanjay, V., Constante-Amores, C. R., & Feng, J. Confinement-Induced Suppression of Jet Drop Size by Bubble Bursting in Shallow Liquids. arXiv preprint arXiv:2606.28609 (2026). -
BubblesJetsDropsSoft-matter-singularities
+
[![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2606.28609&color=green)](https://arxiv.org/abs/2606.28609) ### Ghaemi, A. H., Yang, Z., Huang, A., Sanjay, V., Feng, J., & Constante-Amores, C. R. Bursting bubbles in Herschel-Bulkley fluids: dynamics and jetting transitions. arXiv preprint arXiv:2511.23345 (2025). -
BubblesNon-NewtonianJets
+
[![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2511.23345&color=green)](https://arxiv.org/abs/2511.23345) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/comphy-lab/BurstingBubble_Herschel-Bulkley/) @@ -54,7 +54,7 @@ title: Research

[26] Sanjay, V. Singularities in Soft Matter Systems. Contemporary Physics (2026).

-
Soft-matter-singularitiesFeatured
+
[![Contemporary Physics](https://img.shields.io/static/v1.svg?style=flat-square&label=Contemporary%20Physics&message=DOI:%2010.1080%2F00107514.2026.2721118&color=orange)](https://doi.org/10.1080/00107514.2026.2721118) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2608.11060&color=green)](https://arxiv.org/abs/2608.11060) @@ -63,7 +63,7 @@ title: Research

[25] Verschuur, C. I., Oratis, A. T., Sanjay, V., & Snoeijer, J. H. How elasticity affects bubble pinch-off. Phys. Rev. Fluids, 11, 073302 (2026).

-
BubblesSoft-matter-singularitiesElastic beads
+
[![PRF](https://img.shields.io/static/v1.svg?style=flat-square&label=PRF&message=DOI:%2010.1103%2F5sp3-k5l2&color=orange)](https://doi.org/10.1103/5sp3-k5l2) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2511.20075&color=green)](https://arxiv.org/abs/2511.20075) @@ -81,7 +81,7 @@ title: Research

[24] Appleford, T., Sanjay, V., & Jalaal, M. Rheology of Two-Dimensional Dilute Emulsions. Phys. Rev. Fluids, 11, 033607 (2026).

-
EmulsionsRheology
+
[![PRF](https://img.shields.io/static/v1.svg?style=flat-square&label=PRF&message=DOI:%2010.1103%2F9dgt-rkp5&color=orange)](https://doi.org/10.1103/9dgt-rkp5) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2508.13022&color=green)](https://arxiv.org/abs/2508.13022) @@ -90,7 +90,7 @@ title: Research

[23] Jana, S., Kolinski, J., Lohse, D., & Sanjay, V. Impacting spheres: from liquid drops to elastic beads. Soft Matter, 22, 2226-2236 (2026).

-
DropsImpact forcesElastic beadsFeatured
+
[![Soft Matter](https://img.shields.io/static/v1.svg?style=flat-square&label=Soft%20Matter&message=DOI:%2010.1039%2FD5SM01078K&color=orange)](https://doi.org/10.1039/D5SM01078K) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2510.24855&color=green)](https://arxiv.org/abs/2510.24855) @@ -111,7 +111,7 @@ title: Research

[22] Dixit, A. K., Zhao, C., Zaleski, S., Lohse, D., & Sanjay, V. Holes in Sheets: Double-Threshold Rupture of Draining Liquid Films. Phys. Rev. Lett., 136, 084001 (2026).

-
SheetsRuptureSoft-matter-singularitiesFeatured
+
[![Phys. Rev. Lett.](https://img.shields.io/static/v1.svg?style=flat-square&label=Phys.%20Rev.%20Lett.&message=DOI:%2010.1103%2Fbdpw-7mr5&color=orange)](https://doi.org/10.1103/bdpw-7mr5) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2509.12789&color=green)](https://arxiv.org/abs/2509.12789) @@ -122,7 +122,7 @@ title: Research

[21] Díaz, D., Bhargava, A. S., Walz, F., Sharifi, A., Summaly, S., Berger, R., Kappl, M., Butt, H.-J., Lohse, D., Willers, T., Sanjay, V., & Vollmer, D. Stood-up Drop to Determine Receding Contact Angles. Soft Matter, 22, 657-667 (2026).

-
DropsContact lineSuperamphiphobic-surfacesFeatured
+
[![Soft Matter](https://img.shields.io/static/v1.svg?style=flat-square&label=Soft%20Matter&message=DOI:%2010.1039%2FD5SM00985E&color=orange)](https://doi.org/10.1039/D5SM00985E) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2511.20259&color=green)](https://arxiv.org/abs/2511.20259) @@ -133,7 +133,7 @@ title: Research

[20] Demirkır, Ç., Yang, R., Bashkatov, A., Sanjay, V., Lohse, D., & Krug, D. To jump or not to jump: Adhesion and viscous dissipation dictate the detachment of coalescing wall-attached bubbles. Phys. Rev. Fluids, 10, 123602 (2025).

-
BubblesCoalescence
+
[![PRF](https://img.shields.io/static/v1.svg?style=flat-square&label=PRF&message=OA&color=orange)](https://doi.org/10.1103/nq3w-57gg) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2501.05532&color=green)](https://arxiv.org/abs/2501.05532) @@ -144,7 +144,7 @@ title: Research

[19] Mclauchlan, J., Walker, J. S., Sanjay, V., Jalaal, M., Reid, J. P., Squires, A. M., & Souslov, A. Bouncing microdroplets on hydrophobic surfaces. Proc. Natl. Acad. Sci., 122, e2507309122 (2025).

-
DropsBouncing
+
[![PNAS](https://img.shields.io/static/v1.svg?style=flat-square&label=PNAS&message=OA&color=orange)](https://doi.org/10.1073/pnas.2507309122) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2503.22527&color=green)](https://arxiv.org/abs/2503.22527) @@ -152,7 +152,7 @@ title: Research

[18] Saini, M., Sanjay, V., Saade, Y., Lohse, D., & Popinet, S. Implementation of integral surface tension formulations in a volume of fluid framework and their applications to Marangoni flows. J. Comput. Phys., 542, 114348 (2025).

-
Marangoni flowsNumerical methods
+
[![J. Comput. Phys.](https://img.shields.io/static/v1.svg?style=flat-square&label=J.%20Comput.%20Phys.&message=OA&color=orange)](https://doi.org/10.1016/j.jcp.2025.114348) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/comphy-lab/marangoniSheet) @@ -160,7 +160,7 @@ title: Research

[17] Bashkatov, A., Bürkle, F., Demirkır, Ç., Ding, W., Sanjay, V., Babich, A., Yang, X., Mutschke, G., Czarske, J., Lohse, D., Krug, D., Lars, B., & Eckert, E. Electrolyte droplet spraying in H2 bubbles during water electrolysis under normal and microgravity conditions. Nat. Commun., 16, 4580 (2025).

-
BubblesJetsCoalescenceSoft-matter-singularitiesDrops
+
[![Nat. Commun.](https://img.shields.io/static/v1.svg?style=flat-square&label=Nat.%20Commun.&message=OA&color=orange)](https://doi.org/10.1038/s41467-025-59762-7) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2409.00515&color=green)](https://arxiv.org/abs/2409.00515) @@ -171,7 +171,7 @@ title: Research

[16] Dixit, A., Oratis, A., Zinelis, K., Lohse, D., & Sanjay, V. Viscoelastic Worthington Jets and Droplets Produced by Bursting Bubbles. J. Fluid Mech., 1010, A2 (2025).

-
BubblesNon-NewtonianJetsSoft-matter-singularitiesDrops
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2025.237) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2408.05089&color=green)](https://arxiv.org/abs/2408.05089) @@ -182,7 +182,7 @@ title: Research

[15] Sanjay, V., & Lohse, D. Unifying theory of scaling in drop impact: Forces & maximum spreading diameter. Phys. Rev. Lett., 134, 104003 (2025).

-
DropsDissipative anomalySuperamphiphobic-surfacesImpact forces
+
[![PRL](https://img.shields.io/static/v1.svg?style=flat-square&label=PRL&message=OA&color=orange)](https://doi.org/10.1103/PhysRevLett.134.104003) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2408.12714&color=green)](https://arxiv.org/abs/2408.12714) @@ -193,7 +193,7 @@ title: Research

[14] Sanjay, V., Zhang, B., Lv, C., & Lohse, D. The role of viscosity on drop impact forces on non-wetting surfaces. J. Fluid Mech., 1004, A6 (2025).

-
DropsImpact forces
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2024.982) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2311.03012&color=green)](https://arxiv.org/abs/2311.03012) @@ -214,7 +214,7 @@ title: Research

[13] Kayal, L., Sanjay, V., Yewale, N., Kumar, A., & Dasgupta, R. Focusing of concentric free-surface waves. J. Fluid Mech., 1003, A14 (2025).

-
WavesDissipative anomaly
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2024.1089) [![arXiv](https://img.shields.io/static/v1.svg?style=flat-square&label=arXiv&message=2406.05416&color=green)](https://arxiv.org/abs/2406.05416) @@ -227,7 +227,7 @@ title: Research

[12] Balasubramanian, A. G., Sanjay, V., Jalaal, M., Vinuesa, R., & Tammisola, O. Bursting bubble in an elastoviscoplastic medium. J. Fluid Mech., 1001, A9 (2024).

-
BubblesNon-NewtonianJetsSoft-matter-singularities
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2024.1073) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/comphy-lab/2023_Bubble-bursting-in-an-elasto-viscoplastic-medium) @@ -249,7 +249,7 @@ title: Research

[11] Sanjay, V., Chantelot, P., & Lohse, D. When does an impacting drop stop bouncing? J. Fluid Mech., 958, A26 (2023).

-
DropsBouncingDissipative anomalyFeatured
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2023.55) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/comphy-lab/Drop-Impact) @@ -259,7 +259,7 @@ title: Research

[10] Sanjay, V., Lakshman, S., Chantelot, P., Snoeijer, J. H., & Lohse, D. Drop impact on viscous liquid films. J. Fluid Mech., 958, A25 (2023).

-
DropsBouncingSuperhydrophobic surfaces
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2023.13) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/VatsalSy/Drop-impact-on-viscous-liquid-films) @@ -271,7 +271,7 @@ title: Research

➡️ Sanjay, V. Viscous free-surface flows. Ph.D. Thesis, Physics of Fluids, University of Twente (2022).

-
DropsJetsSheetsBubblesSoft-matter-singularitiesNon-Newtonian
+
[![PhD thesis](https://img.shields.io/static/v1.svg?logo=adobeacrobatreader&style=flat-square&label=Thesis&message=Download&color=green)](https://qrco.de/bd9SHU) [![DOI](https://img.shields.io/static/v1.svg?style=flat-square&label=UT&message=link&color=orange)](https://doi.org/10.3990/1.9789036554077) @@ -281,7 +281,7 @@ title: Research

[9] Sanjay, V., Sen, U., Kant, P., and Lohse, D. Taylor–Culick retractions and the influence of the surroundings. J. Fluid Mech., 948, A14 (2022).

-
SheetsDissipative anomalyRetraction
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2022.671) [![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/VatsalSy/Taylor-Culick-retractions) @@ -291,7 +291,7 @@ title: Research

[8] Zhang, B., Sanjay, V., Shi, S., and Zhao, Y., and Lv, C., and Feng, X.-Q., & Lohse, D. Impact forces of water drops falling on superhydrophobic surfaces. Phys. Rev. Lett., 129(10), 104501 (2022).

-
DropsSuperhydrophobic surfacesImpact forces
+
[![GitHub](https://img.shields.io/badge/GitHub-100000?style=flat-square&logo=github&logoColor=white)](https://github.com/VatsalSy/Impact-forces-of-water-drops-falling-on-superhydrophobic-surfaces) [![PDF](https://img.shields.io/static/v1.svg?logo=adobeacrobatreader&style=flat-square&label=PDF&message=Download&color=green)](https://qrco.de/bd9aV3) @@ -311,7 +311,7 @@ title: Research

[7] Sanjay, V., Lohse, D., & Jalaal, M. Bursting bubble in a viscoplastic medium. J. Fluid Mech., 922, A2 (2021).

-
BubblesJetsNon-NewtonianSoft-matter-singularities
+
[![JFM](https://img.shields.io/static/v1.svg?style=flat-square&label=JFM&message=OA&color=orange)](https://doi.org/10.1017/jfm.2021.489) [![arXiv](https://img.shields.io/badge/arXiv-2101.07744-green?style=flat-square)](https://arxiv.org/abs/2101.07744) @@ -324,7 +324,7 @@ title: Research

[6] Ramírez-Soto, O., Sanjay, V., Lohse, D., Pham, J. T., & Vollmer, D. Lifting a sessile oil drop from a superamphiphobic surface with an impacting one. Sci. Adv., 6(34), eaba4330 (2020).

-
DropsSuperamphiphobic-surfacesLifting
+
[![Sci. Adv.](https://img.shields.io/static/v1.svg?style=flat-square&label=Sci.%20Adv.&message=OA&color=orange)](https://doi.org/10.1126/sciadv.aba4330) [![arXiv](https://img.shields.io/badge/arXiv-1912.02667-green?style=flat-square)](https://arxiv.org/abs/1912.02667) @@ -337,7 +337,7 @@ title: Research

[5] Jain, A., Sanjay, V., & Das, A. K. Consequences of inclined and dual jet impingement in stagnant liquid and stratified layers. AIChE J., 65(1), 372-384 (2019).

-
JetsBubbles
+
[![PDF](https://img.shields.io/static/v1.svg?style=flat-square&label=PDF&message=Available&color=green)](https://www.dropbox.com/scl/fi/ug7njhulcy9zq8lib911j/2019-Vatsal-_Consequences-of-Inclined-and-Dual-Jet-Impingement-in-Stagnant-Liquid-and-Stratified-Layers.pdf?rlkey=l00thknv7wt55sb0bcuiy8isw&dl=0) [![DOI](https://img.shields.io/static/v1.svg?style=flat-square&label=DOI&message=10.1002/aic.16373&color=orange)](https://doi.org/10.1002/aic.16373) @@ -349,7 +349,7 @@ title: Research

[4] Soni, A., Sanjay, V., & Das, A. K. Formation of fluid structures due to jet-jet and jet-sheet interactions. Chem. Eng. Sci., 191, 67-77 (2018).

-
Jets
+
[![PDF](https://img.shields.io/static/v1.svg?style=flat-square&label=PDF&message=Available&color=green)](https://www.dropbox.com/scl/fi/zbs17s77qlu2l2i4c6sak/2018-Vatsal-preprint-_Formation-of-fluid-structures-due-to-jet-jet-and-jet-sheet-interactions.pdf?rlkey=beya847mr9hf8bbdabwyanrmf&dl=0) [![DOI](https://img.shields.io/static/v1.svg?style=flat-square&label=DOI&message=10.1016/j.ces.2018.06.055&color=orange)](https://doi.org/10.1016/j.ces.2018.06.055) @@ -359,7 +359,7 @@ title: Research

[3] Sanjay, V., Das, A.K. Numerical assessment of hazard in compartmental fire having steady heat release rate from the source. Build. Simul. 11, 613–624 (2018).

-
OthersFireEvacuation
+
[![PDF](https://img.shields.io/static/v1.svg?style=flat-square&label=PDF&message=Available&color=green)](https://www.dropbox.com/scl/fi/c9vob7a6kso4ai4mygpj2/2018-Vatsal-_Numerical-assessment-of-hazard-in-compartmental-fire-having-steady-heat-release-rate-from-the-source.pdf?rlkey=e8rjz2d3e8nt0xof863i3xb3p&dl=0) [![DOI](https://img.shields.io/static/v1.svg?style=flat-square&label=DOI&message=10.1007/s12273-017-0411-y&color=orange)](https://doi.org/10.1007/s12273-017-0411-y) @@ -371,7 +371,7 @@ title: Research

[2] Sanjay, V., & Das, A. K. Formation of liquid chain by collision of two laminar jets. Phys. Fluids, 29(11), 112101 (2017).

-
JetsSheets
+
[![PDF](https://img.shields.io/static/v1.svg?style=flat-square&label=PDF&message=Available&color=green)](https://www.dropbox.com/scl/fi/fmk08c3z9twdat138v8b3/2017-Vatsal-preprint-_Formation-of-liquid-chain-by-collision-of-two-laminar-jets.pdf?rlkey=imwh2a606aecpbvjq3ctdq168&dl=0) [![DOI](https://img.shields.io/static/v1.svg?style=flat-square&label=DOI&message=10.1063/1.4998288&color=orange)](https://doi.org/10.1063/1.4998288) @@ -382,7 +382,7 @@ title: Research

[1] Sanjay, V., & Das, A. K. On air entrainment in a water pool by impingement of a jet. AIChE J., 63(11), 5169-5181 (2017).

-
JetsBubbles
+
[![PDF](https://img.shields.io/static/v1.svg?style=flat-square&label=PDF&message=Available&color=green)](https://www.dropbox.com/scl/fi/37ek49y5ae1t1lr18q95n/2017-Vatsal-preprint-_On-Air-Entrainment-in-a-Water-pool-by-Impingement-of-a-Jet.pdf?rlkey=iqb3ejms8t990owpiuqmpy0k6&dl=0) [![DOI](https://img.shields.io/static/v1.svg?style=flat-square&label=DOI&message=10.1002/aic.15828&color=orange)](https://doi.org/10.1002/aic.15828) diff --git a/assets/css/research-v2.css b/assets/css/research-v2.css index f98d796..7954d48 100644 --- a/assets/css/research-v2.css +++ b/assets/css/research-v2.css @@ -509,12 +509,12 @@ flow horizontally and wrap. The `_research/index.md` sort-by-topic block uses one `.tags` div per tag; inline-flex lets them queue up on a single line instead of stacking. Per-paper `.tags` rows still - look right because each contains its own spans in one div. */ + look right because each contains its own buttons in one div. */ .research-content .tags { display: inline-flex; flex-wrap: wrap; - gap: 6px; - margin: 0 6px 6px 0; + gap: var(--s-2); + margin: 0 var(--s-2) var(--s-2) 0; vertical-align: top; } @@ -533,30 +533,48 @@ margin: var(--s-2) 0 var(--s-3); } +.research-content .tags button, .research-content .tags span { + appearance: none; display: inline-flex; align-items: center; - padding: 4px 10px; - background: color-mix(in srgb, var(--c-brand-purple) 10%, transparent); - color: var(--c-brand-purple); - border: 1px solid color-mix(in srgb, var(--c-brand-purple) 22%, transparent); + margin: 0; + padding: var(--s-1) var(--s-3); + background: color-mix(in srgb, var(--c-accent-teal) 10%, transparent); + color: var(--c-accent-teal); + border: 1px solid color-mix(in srgb, var(--c-accent-teal) 22%, transparent); border-radius: var(--r-pill); font-family: var(--t-sans); - font-weight: 500; - font-size: 12px; - letter-spacing: 0.02em; + font-weight: var(--t-weight-med); + font-size: var(--t-eyebrow); + line-height: 1.6; + white-space: nowrap; cursor: pointer; - transition: background var(--dur-fast) var(--ease); + transition: + background var(--dur-fast) var(--ease), + color var(--dur-fast) var(--ease), + border-color var(--dur-fast) var(--ease); } +.research-content .tags button:hover, .research-content .tags span:hover { background: color-mix(in srgb, var(--c-accent-teal) 15%, transparent); color: var(--c-accent-teal); border-color: var(--c-accent-teal); } -[data-theme="dark"] .research-content .tags span { - color: #d99adc; +.research-content .tags button:focus-visible, +.research-content .tags span:focus-visible { + outline: var(--s-1) solid var(--c-accent-teal); + outline-offset: var(--s-1); +} + +.research-content .tags button[aria-pressed="true"], +.research-content .tags button.active, +.research-content .tags span.active { + background: var(--c-accent-teal); + color: var(--c-accent-teal-fg); + border-color: var(--c-accent-teal); } /* Shield badges inline. Long DOI badges are wider than a 390 px diff --git a/assets/css/styles.css b/assets/css/styles.css index 76b5d88..be87bb7 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1938,7 +1938,9 @@ section#featured:after, margin: 1rem 0; } -.featured-paper .tags span { +.featured-paper .tags span, +.featured-paper .tags button { + appearance: none; display: inline-block; padding: 0.4rem 0.8rem; background: var(--tag-bg); @@ -1951,7 +1953,8 @@ section#featured:after, border: 1px solid var(--tag-border); } -.featured-paper .tags span:hover { +.featured-paper .tags span:hover, +.featured-paper .tags button:hover { background: var(--tag-bg-hover); transform: translateY(-2px); border-color: var(--tag-border-hover); diff --git a/assets/js/command-data.js b/assets/js/command-data.js index f619013..3858a57 100644 --- a/assets/js/command-data.js +++ b/assets/js/command-data.js @@ -540,7 +540,9 @@ window.matchMedia("(prefers-color-scheme: dark)").matches; // Collect all unique tags from the page - const tagElements = document.querySelectorAll(".tags span"); + const tagElements = document.querySelectorAll( + ".tags button, .tags span" + ); const tags = new Set(); tagElements.forEach((tag) => { tags.add(tag.textContent); @@ -656,7 +658,7 @@ // Find the actual tag in the document and simulate a click on it const tagText = btn.textContent; const matchingTag = Array.from( - document.querySelectorAll(".tags span") + document.querySelectorAll(".tags button, .tags span") ).find((tag) => tag.textContent === tagText); if (matchingTag) { diff --git a/assets/js/page-research.js b/assets/js/page-research.js index 4ba1752..004b73b 100644 --- a/assets/js/page-research.js +++ b/assets/js/page-research.js @@ -76,7 +76,9 @@ document.addEventListener("DOMContentLoaded", function () { } }); - var contentTags = researchContent.querySelectorAll(".tags span"); + var contentTags = researchContent.querySelectorAll( + ".tags button, .tags span" + ); var themeTags = document.querySelectorAll(".r-theme__tag[data-filter-tag]"); var tagControls = Array.from(contentTags).concat(Array.from(themeTags)); var papers = researchContent.querySelectorAll(".paper-container"); @@ -86,9 +88,16 @@ document.addEventListener("DOMContentLoaded", function () { return control.getAttribute("data-filter-tag") || control.textContent; } + function setPressed(control, pressed) { + control.classList.toggle("active", pressed); + if (control.tagName === "BUTTON") { + control.setAttribute("aria-pressed", pressed ? "true" : "false"); + } + } + function setActive(tagText) { tagControls.forEach(function (control) { - control.classList.toggle("active", getTagText(control) === tagText); + setPressed(control, getTagText(control) === tagText); }); } @@ -103,7 +112,7 @@ document.addEventListener("DOMContentLoaded", function () { options = options || {}; activeTag = null; tagControls.forEach(function (control) { - control.classList.remove("active"); + setPressed(control, false); }); papers.forEach(function (paper) { paper.classList.remove("hidden"); @@ -119,7 +128,7 @@ document.addEventListener("DOMContentLoaded", function () { var tags = paper.querySelector(".tags"); var match = tags && - Array.from(tags.querySelectorAll("span")).some(function (tag) { + Array.from(tags.querySelectorAll("button, span")).some(function (tag) { return tag.textContent === tagText; }); paper.classList.toggle("hidden", !match); @@ -137,16 +146,20 @@ document.addEventListener("DOMContentLoaded", function () { control.addEventListener("click", function () { activateTag(control); }); - if (control.tagName !== "BUTTON") { - control.setAttribute("role", "button"); - control.setAttribute("tabindex", "0"); - control.addEventListener("keydown", function (event) { - if (event.key === "Enter" || event.key === " ") { - event.preventDefault(); - activateTag(control); - } - }); + if (control.tagName === "BUTTON") { + if (!control.hasAttribute("aria-pressed")) { + control.setAttribute("aria-pressed", "false"); + } + return; } + control.setAttribute("role", "button"); + control.setAttribute("tabindex", "0"); + control.addEventListener("keydown", function (event) { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + activateTag(control); + } + }); } tagControls.forEach(bindTagControl); diff --git a/scripts/generate_filtered_research.rb b/scripts/generate_filtered_research.rb index fa6025f..5973c3d 100755 --- a/scripts/generate_filtered_research.rb +++ b/scripts/generate_filtered_research.rb @@ -16,7 +16,7 @@ # Find all unique tags all_tags = [] -doc.css('.tags span').each do |tag| +doc.css('.tags button, .tags span').each do |tag| all_tags << tag.text unless all_tags.include?(tag.text) end diff --git a/tests/command-actions-workflow.test.js b/tests/command-actions-workflow.test.js index 4afa5c2..4fcf3cf 100644 --- a/tests/command-actions-workflow.test.js +++ b/tests/command-actions-workflow.test.js @@ -102,11 +102,11 @@ describe("command palette action workflows", () => { "beforeend", `
-

Paper A

Elastic
-

Paper B

NewtonianElastic
-

Paper C

Capillary
-

Paper D

Inertial
-

Paper E

Viscous
+

Paper A

+

Paper B

+

Paper C

+

Paper D

+

Paper E

` ); require("../assets/js/page-research.js"); @@ -137,7 +137,7 @@ describe("command palette action workflows", () => { "beforeend", `
${["A", "B", "C", "D", "E"] - .map((tag) => `${tag}`) + .map((tag) => ``) .join("")}
` ); initPage("/research/"); diff --git a/tests/command-data-actual.test.js b/tests/command-data-actual.test.js index 2214829..1a1ab41 100644 --- a/tests/command-data-actual.test.js +++ b/tests/command-data-actual.test.js @@ -4,7 +4,7 @@ // Mock dependencies global.Fuse = jest.fn().mockImplementation(() => ({ - search: jest.fn().mockReturnValue([]) + search: jest.fn().mockReturnValue([]), })); global.sortCoursesByDate = jest.fn(); @@ -124,10 +124,10 @@ describe("command-data.js actual implementation", () => { window.history.replaceState({}, "", "/research"); document.body.innerHTML = `
- +
`; - document.querySelector(".tags span").textContent = ""; + document.querySelector(".tags button").textContent = ""; require("../assets/js/command-data.js"); diff --git a/tests/research-filter.test.js b/tests/research-filter.test.js index 32019f6..9c85a5f 100644 --- a/tests/research-filter.test.js +++ b/tests/research-filter.test.js @@ -11,9 +11,9 @@ describe("research tag filtering user paths", () => {

Published work

-

Paper A

Viscoelastic
+

Paper A

Elastic material

-

Paper B

Newtonian
+

Paper B

Methods

Methods text

`; require("../assets/js/page-research.js"); @@ -64,15 +64,21 @@ describe("research tag filtering user paths", () => { test("published paper tags filter and a second activation clears", () => { load(); - const tag = document.querySelector(".tags span"); + const tag = document.querySelector(".tags button"); + expect(tag.tagName).toBe("BUTTON"); expect(visiblePapers()).toEqual(["24", "23"]); tag.click(); expect(visiblePapers()).toEqual(["24"]); expect(window.location.search).toBe("?tag=Viscoelastic"); + expect(tag.getAttribute("aria-pressed")).toBe("true"); + expect( + document.querySelector(".r-theme__tag").getAttribute("aria-pressed") + ).toBe("true"); expect(document.querySelector(".r-theme__tag").classList).toContain( "active" ); tag.click(); + expect(tag.getAttribute("aria-pressed")).toBe("false"); expect(visiblePapers()).toEqual(["24", "23"]); expect(window.location.search).toBe(""); }); @@ -80,18 +86,15 @@ describe("research tag filtering user paths", () => { test("keyboard Enter and Space operate tags with stable deep links", () => { load("?tag=Newtonian"); expect(visiblePapers()).toEqual(["23"]); - const tag = document.querySelector(".tags span"); - expect(tag.getAttribute("role")).toBe("button"); + const tag = document.querySelector(".tags button"); + expect(tag.getAttribute("type")).toBe("button"); expect(tag.tabIndex).toBe(0); - const enter = new KeyboardEvent("keydown", { - key: "Enter", - bubbles: true, - cancelable: true, - }); - tag.dispatchEvent(enter); - expect(enter.defaultPrevented).toBe(true); + // Enter and Space activate a real button through click. + tag.click(); + expect(tag.getAttribute("aria-pressed")).toBe("true"); expect(visiblePapers()).toEqual(["24"]); - tag.dispatchEvent(new KeyboardEvent("keydown", { key: " " })); + tag.click(); + expect(tag.getAttribute("aria-pressed")).toBe("false"); expect(visiblePapers()).toEqual(["24", "23"]); }); From 3501c0ec43968ce5ccac9ab532095c9be906c48d Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 19 Oct 2026 09:53:25 +0000 Subject: [PATCH 2/2] Cover legacy span chips in the research filter tests The button path left the span keyboard fallback untested, which dropped statement coverage under the 80 percent gate. Co-authored-by: Vatsal Sanjay | CoMPhy Lab --- tests/research-filter.test.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/tests/research-filter.test.js b/tests/research-filter.test.js index 9c85a5f..d565058 100644 --- a/tests/research-filter.test.js +++ b/tests/research-filter.test.js @@ -98,6 +98,36 @@ describe("research tag filtering user paths", () => { expect(visiblePapers()).toEqual(["24", "23"]); }); + test("legacy span chips still filter from Enter and Space", () => { + window.history.replaceState({}, "", "/research/"); + document.body.innerHTML = ` +
+

Paper A

Viscoelastic
+

Paper B

Newtonian
+
`; + require("../assets/js/page-research.js"); + ready(); + const tag = document.querySelector(".tags span"); + expect(tag.getAttribute("role")).toBe("button"); + expect(tag.tabIndex).toBe(0); + const enter = new KeyboardEvent("keydown", { + key: "Enter", + bubbles: true, + cancelable: true, + }); + tag.dispatchEvent(enter); + expect(enter.defaultPrevented).toBe(true); + expect(visiblePapers()).toEqual(["24"]); + tag.dispatchEvent( + new KeyboardEvent("keydown", { + key: " ", + bubbles: true, + cancelable: true, + }) + ); + expect(visiblePapers()).toEqual(["24", "23"]); + }); + test("theme controls and back/forward state use the same filter", () => { load(); document.querySelector(".r-theme__tag").click();