Fix and update slider for larger contents ✨

Author: Freymaurer

src/content/images/research/SharingisCaring.svg

@@ -0,0 +1,8 @@
+---
+img: biologicalDataScience.png
+index: 2
+--- 
+
+# Biological data science
+
+Modern technologies now allow researchers to simultaneously study biological organisms and processes across various molecular layers and in diverse biological contexts. To leverage this wealth of data, we are developing advanced methods for both supervised and unsupervised analysis of multi-modal omics data using cutting-edge machine learning and statistical modeling techniques. As part of fslabs.org, we contribute to the open-source data analysis library environment, ensuring that our innovations are accessible to the broader research community. Our methods enable comprehensive, data-driven integration and analysis of data derived from multiple omics technologies and varied biological scenarios, thereby enhancing our understanding of complex biological systems. 

src/content/images/research/biologicalDataScience.png

@@ -0,0 +1,12 @@
+---
+img: predictionOmicsData.png
+index: 3
+--- 
+
+# Prediction of acclimation modulators and integrators based on ‘omics data 
+
+Acclimation responses involve complex interactions among genes, proteins, and metabolites, resulting in both general and specific elements. Previously, we focused on extracting response-specific structural models from complex 'omics data using functional constraint aggregation and network topology inference.  
+---
+Predicting modulators and integrators based on regulatory network topology and differential expression levels remains challenging, especially with limited acclimation data. However, incorporating additional regulatory characteristics of proteins—such as thermostability, aggregation propensity, intrinsic disorder, and post-translational modifications—can improve this identification. 
+
+This project proposes a novel approach using sequential meta-learning to integrate these regulatory characteristics, overcoming data sparsity challenges. In collaboration with CRC experimental groups, we will test our model’s predictions by introducing thermostable protein homologs into plant and algal cells. These experiments are expected to reduce acclimation capabilities and cause growth retardation, validating our approach in experimental evolution assays. 

src/content/images/research/predictionOmicsData.png

@@ -0,0 +1,10 @@
+---
+img: rdm.png
+index: 1
+--- 
+
+# Research data management (RDM)
+
+We are committed to the success of FAIR (Findable, Accessible, Interoperable, and Reusable) and open research data. Research data possess immense value, which, when combined with tomorrow's technologies such as machine and deep learning, can unlock answers to questions we cannot even conceive today. Therefore, the flexible contextualization of research data with machine-actionable metadata is essential to advance modern science. 
+---
+We draw inspiration from the open-source software community's success, developing approaches that enable the biological community to collaboratively build a community-wide FAIR research data resource. Our research group participates in the National Research Data Infrastructure (NFDI) initiative with the DataPLANT project, which empowers plant researchers to engage in a thriving RDM ecosystem without barriers. 

src/content/images/research/rdm.png

@@ -1,6 +1,5 @@
 #r "../_lib/Fornax.Core.dll"
 
-
 open Html
 
 let rptu_navbar() =
@@ -77,7 +76,6 @@ let scaffold (ctx : SiteContents) bodyCnt =
             rptu_navbar()
             csb_navbar()
             main [Class "csb-content"] [
-                // bodyCnt
                 yield! bodyCnt
             ]
 
@@ -110,6 +108,7 @@ let scaffold (ctx : SiteContents) bodyCnt =
                             })(document);
                         """
             ]
+
         ]  
     ]
 

src/content/research/biological_data_science.md

@@ -5,14 +5,47 @@
 
 open Html
 
+let private SliderHeight = "fit-content"
+let private createModalId(slide: Researchloader.FrameSlide) =
+  sprintf "More-Content-Modal-%i" slide.Index
+
+
+let private createResearchModal(slide: Researchloader.FrameSlide) =
+  let id = createModalId slide
+  // Bulma Modal
+  div [Class "modal"; HtmlProperties.Id id] [
+    div [Class "modal-background"] []
+    div [Class "modal-content"] [
+      div [Class "box"] [
+        div [Class "content"] [
+          !!slide.MainContent
+          match slide.MoreContent with
+          | Some c ->
+            !!c
+          | None -> ()
+        ]
+      ]
+    ]
+    button [Class "modal-close is-large"; HtmlProperties.Custom("aria-label", "close")] []
+  ]
+
+
+let private createMoreContentModalButton (slide: Researchloader.FrameSlide) =
+  let id = createModalId slide
+  div [] [
+    // Trigger Button
+    button [Class "button is-primary is-small js-modal-trigger"; HtmlProperties.Custom("data-target", id)] [
+      !!"More"
+    ]
+  ]
 
 let private createFrameSlide (slide: Researchloader.FrameSlide) =
   let innerFlexBoxContainer = HtmlProperties.Style [Display "flex"; CSSProperties.Height "100%"; AlignItems "center"]
   li [Class "splide__slide"] [
       // container
-      div [Class "is-flex fixed-grid research__bg"; HtmlProperties.Style [CSSProperties.Height "100%"; AlignItems "center"; JustifyContent "center"]] [
-          div [Class "grid research__grid"; HtmlProperties.Style [CSSProperties.Custom("justify-items", "end"); CSSProperties.Height "fit-content";]] [
-              div [Class "cell research__cell"] [
+      div [Class "is-flex fixed-grid research__bg has-1-cols-mobile"; HtmlProperties.Style [CSSProperties.Height "100%"; AlignItems "center"; JustifyContent "center"]] [
+          div [Class "grid research__grid"; HtmlProperties.Style [CSSProperties.Custom("justify-items", "end"); CSSProperties.Height "fit-content"; CSSProperties.MaxHeight SliderHeight]] [
+              div [Class "cell research__cell"; HtmlProperties.Style [CSSProperties.Width "100%"; CSSProperties.MaxWidth "unset"]] [
                 div [innerFlexBoxContainer] [
                   div [] [
                     img [
@@ -27,7 +60,13 @@ let private createFrameSlide (slide: Researchloader.FrameSlide) =
               ]
               div [Class "cell research__cell"] [
                 div [innerFlexBoxContainer] [
-                  div [Class "content research__content"] [!!slide.Content]
+                  div [Class "content research__content"] [
+                      !!slide.MainContent
+                      match slide.MoreContent with
+                      | Some _ ->
+                          createMoreContentModalButton(slide)
+                      | None -> ()
+                  ]
                 ]
               ]
           ]
@@ -39,7 +78,7 @@ let generate (ctx : SiteContents) (_: string) =
         ctx.TryGetValues<Researchloader.FrameSlide> ()
         |> Option.defaultValue Seq.empty
         |> Seq.toList
-    div [HtmlProperties.Style [CSSProperties.Height "400px"]] [
+    div [HtmlProperties.Style [CSSProperties.Height SliderHeight]] [
         section [Class "splide"; HtmlProperties.Custom("aria-label","current research information")] [
             // div [Class "splide__slider"] [
             // ]
@@ -64,8 +103,12 @@ let generate (ctx : SiteContents) (_: string) =
         ]
         script [] [
             !!"""document.addEventListener( 'DOMContentLoaded', function() {
-    var splide = new Splide( '.splide', { type: 'loop', autoplay: true } );
+    var splide = new Splide( '.splide', { type: 'loop', autoplay: false } );
     splide.mount();
 } );"""
         ]
+        section [] [
+          for researchSlide in researchList do
+            createResearchModal researchSlide
+        ]
     ]

src/content/research/ml_models.md

@@ -39,22 +39,43 @@ module ContentReader =
         let frontmatter, content =
             fileContent
             |> Array.splitAt indexOfSeperator
+            |> fun (x, y) -> x,y.[1..] //skip closing ---
+        let moreContentIndex = content |> Array.tryFindIndex isSeparator
+        let content, moreContent =
+          match moreContentIndex with
+          | Some i ->
+            let content, moreContent = content |> Array.splitAt i
+            content, Some moreContent.[1..] //skip closing ---
+          | None -> 
+            content, None
         frontmatter
         |> Seq.choose splitKey
         |> Map.ofSeq
-        |> fun x -> x.Add(
+        |> fun x -> 
+            match moreContent with
+            | None -> x
+            | Some moreContent ->
+              let moreContent = moreContent |> String.concat "\n"
+              x.Add("more", moreContent)
+        |> fun x -> 
+          x.Add(
             "content", 
-            content.[1..] //skip closing ---
+            content
             |> String.concat "\n"
-        )
+          )
+          
 
 type FrameSlide = {
-    Content: string
+    /// This will always be on the slider
+    MainContent: string
+    /// This is hidden behind "More" button. Only exists if content after empty line exists.
+    MoreContent: string option
     Image: string option
     ImageUrl: string option
+    Index: int
 } with
-  static member create(content: string, ?image, ?imageurl) =
-    { Content = content; Image = image; ImageUrl = imageurl }
+  static member create(content: string, index:int, ?moreContent, ?image, ?imageurl) =
+    { MainContent = content; Index = index; MoreContent = moreContent; Image = image; ImageUrl = imageurl }
 
 let getImageUrl (imageName: string) =
     imgDir + imageName
@@ -65,10 +86,11 @@ let loadFile (filePath: string) =
     let lines = File.ReadAllLines(filePath)
     let metadata = ContentReader.getData lines
     let content = metadata.["content"] |> fun c -> Markdown.ToHtml(c, ContentReader.pipeline)
+    let moreContent = metadata |> Map.tryFind "more" |> Option.map (fun mc -> Markdown.ToHtml(mc, ContentReader.pipeline))
     let image = metadata |> Map.tryFind key_image |> Option.map getImageUrl
     let imageUrl = metadata |> Map.tryFind key_image_url
     let index = metadata |> Map.tryFind "index" |> Option.map int |> Option.defaultValue System.Int32.MaxValue
-    index, FrameSlide.create(content, ?image=image, ?imageurl=imageUrl)
+    FrameSlide.create(content, index, ?moreContent=moreContent, ?image=image, ?imageurl=imageUrl)
 
 let loader (projectRoot: string) (siteContent: SiteContents) =
     let postsPath = Path.Combine(projectRoot, contentDir)
@@ -77,8 +99,8 @@ let loader (projectRoot: string) (siteContent: SiteContents) =
     files
     |> Array.filter (fun n -> n.EndsWith ".md")
     |> Array.map (loadFile)
-    |> Array.sortBy fst
-    |> Array.map snd
+    |> Array.sortBy (fun x -> x.Index)
+    |> Array.mapi (fun i x -> { x with Index = i }) // make index unique
     |> Array.iter siteContent.Add
     // siteContent.Add({disableLiveRefresh = false})
     siteContent

src/content/research/prediction_omics_data.md

@@ -163,4 +163,49 @@ window.addEventListener('scroll', function() {
   if (scrollpos >= scrollChange) { add_class_on_scroll() }
   else { remove_class_on_scroll() }
 })
-/// End: change csb-navbar color on scroll to top
+/// End: change csb-navbar color on scroll to top
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Functions to open and close a modal
+  function openModal($el) {
+    $el.classList.add('is-active');
+  }
+
+  function closeModal($el) {
+    $el.classList.remove('is-active');
+  }
+
+  function closeAllModals() {
+    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+      closeModal($modal);
+    });
+  }
+
+  // Add a click event on buttons to open a specific modal
+  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+    
+    $trigger.addEventListener('click', () => {
+      const modal = $trigger.dataset.target;
+      console.log("modal", modal)
+      const $target = document.getElementById(modal);
+      console.log("clicked", $target)
+      openModal($target);
+    });
+  });
+
+  // Add a click event on various child elements to close the parent modal
+  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+    const $target = $close.closest('.modal');
+
+    $close.addEventListener('click', () => {
+      closeModal($target);
+    });
+  });
+
+  // Add a keyboard event to close all modals
+  document.addEventListener('keydown', (event) => {
+    if(event.key === "Escape") {
+      closeAllModals();
+    }
+  });
+});

src/content/research/rdf.md

@@ -13,8 +13,9 @@
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
   }
-  @media (max-width: 639px) {
-    border-radius: unset;
+
+  @media (max-width: 768px) {
+    border-radius: unset; 
   }
 }
 
@@ -29,6 +30,10 @@
   max-width: 80%;
   column-gap: unset;
 
+  @media (max-width: 768px) {
+    row-gap: unset; // Adjusted max-width for tiny screens
+  }
+
   @media (max-width: 639px) {
     max-width: unset; // Adjusted max-width for tiny screens
   }