Merge pull request #7 from Boehringer-Ingelheim/dev

Dev

_quarto.yml

@@ -2,25 +2,40 @@ project:
   type: website
 
 website:
-  title: "DaVinCI"
-  # favicon: quarto/images/davinci_hex.png
+  title: "DaVinci"
   navbar:
-   left:
-      - text: Home
-        file: index.qmd
-    # logo: quarto/images/davinci_hex.png
+    pinned: true
+    collapse: true
+    search: true
+    left:
+      - quarto/getting_started.qmd
+      - quarto/modules.qmd
+      #- about.qmd
+    right:
+      - icon: github
+        menu:
+          - text: Source code
+            url: https://github.com/orgs/Boehringer-Ingelheim/repositories?q=dv.
+            target: _blank
+          - text: Report a Bug
+            url: https://github.com/Boehringer-Ingelheim/davinci/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=
+            target: _blank
   page-footer:
     center:
-      - text: "This website as well as the DaVinCI packages are licensed under the Apache License, Version 2.0." # nolint
+      - text: "This website as well as the DaVinci packages are licensed under the Apache License, Version 2.0." # nolint
+    right:
+      - aria-label: GitHub
+        href: https://github.com/Boehringer-Ingelheim/davinci
+        icon: github
 
 format:
   html:
     theme: [cosmo, quarto/general.scss]
-    css: styles.css
+    css: quarto/style.scss
     toc: false
     page-layout: full
     anchor-sections: true
 
-execute:
-  freeze: auto
+
+
 

about.qmd

@@ -0,0 +1,5 @@
+---
+title: "About"
+---
+
+How to get in contact? 

davinci.Rproj

@@ -5,8 +5,13 @@ SaveWorkspace: No
 AlwaysSaveHistory: Default
 
 EnableCodeIndexing: Yes
+UseSpacesForTab: Yes
+NumSpacesForTab: 2
 Encoding: UTF-8
 
+RnwWeave: Sweave
+LaTeX: pdfLaTeX
+
 AutoAppendNewline: Yes
 StripTrailingWhitespace: Yes
 LineEndingConversion: Posix

index.qmd

@@ -1,20 +1,38 @@
 ---
-title: "DaVinCI"
+title: "DaVinci"
 ---
 
-## Dynamic Visualization for Clinical Insights
+## Dynamic Visualization for Clinical Insights (DaVinci)
 
-### What is DaVinCI?
+### What is DaVinci?
 
+DaVinci provides tools to review, aggregate and visualize data to develop and deliver safe and effective treatments for patients. Instead of creating entire R/Shiny applications, DaVinci provides individual modules. Modules are functional building blocks that can be linked together into customized apps. This customization enables App Creators to build their own app according to trial-specific needs without deep R knowledge. The concept of developing loosely coupled, functional units and composing them into a larger application is subsequently referred to as modular approach.
 
-DaVinCI offers R/Shiny based tools to review, aggregate and visualize data arising from clinical trials, supporting the goal of developing and delivering safe and effective treatments for patients. However, instead of creating entire R/Shiny applications, DaVinCI provides individual modules. Modules are functional building blocks that can be linked together into customized apps. This customization enables App Creators to build their own app according to trial-specific needs without deep R knowledge. 
+### The modular approach
 
+To create an app, you need to first identify which modules to include. Consider each DaVinci module as individual building stone that you can put together to build a vehicle for a certain purpose. If you want to go fast, build a motorcycle, but if distance is your goal, build a regular car. The constructed vehicle symbolizes the DaVinci app that you create according to your use case.
 
-### Our commitment and contribution to open-source
-
-DaVinCI software development including the codebase  will be made fully open-source, which will allow you to use or co-develop DaVinCI.  
-Our initial open-source release is planned by **Q3-2024!**  
-Don't miss our release and other DaVinCI related news, and connect with our Product Owner [Stefan Doering](https://www.linkedin.com/in/stefan-d%C3%B6ring-6134a595/){target="_blank"} on LinkedIn!
+![](quarto/images/building_blocks.png){fig-align="center"}
 
 
+DaVinci modules are provided as R packages, with each package containing one or multiple modules. Choose the modules freely according to the purpose of your visualization. For instance, while a heatmap may not be necessary for data cleaning, it could be useful for biomarker analyses. Safety review might benefit from an eDISH plot, and listings are likely to be needed in all use cases. These are only examples, modules can be combined as needed. Some modules even have the capability to interact with each other. 
+For more details about how to actually create an app, refer to [Getting Started](quarto/getting_started.qmd). An overview of all modules can be found [here](quarto/modules.qmd). 
 
+
+### The DaVinci framework 
+
+The DaVinci framework consists of the following packages:  
+
+
+|   package       | description |
+|-----------------|-------------|
+|[{dv.bookman}](https://boehringer-ingelheim.github.io/dv.bookman/){target="_blank"}| The Bookmark Manager module allows to safe app configurations and restore them at a later point in time from a centralized view. |
+|[{dv.clinlines}](https://boehringer-ingelheim.github.io/dv.clinlines/){target="_blank"}| The Clinical Timelines module offers an overview of pre-defined events and time intervals for all subjects over time. |
+|[{dv.edish}](https://boehringer-ingelheim.github.io/dv.edish/){target="_blank"}| The eDISH module supports the assessment of drug-induced liver injury by means of the (modified) evaluation of Drug-Induced Serious Hepatotoxicity plot. |
+|[{dv.explorer.parameter}](https://boehringer-ingelheim.github.io/dv.explorer.parameter/){target="_blank"}| The {dv.explorer.parameter} package contains multiple modules offering statistical plots like the Boxplot module, Correlation Heatmap module, Forest Plot module, Lineplot module, ROC (receiver operating characteristics) module, Scatterplot module, Matrix of Scatterplots module, and the Waterfall Plus Heatmap module. |
+|[{dv.filter}](https://boehringer-ingelheim.github.io/dv.filter/){target="_blank"}| The {dv.filter} package enables dynamic data filtering. |
+|[{dv.listings}](https://boehringer-ingelheim.github.io/dv.listings/){target="_blank"}| The Listings module displays arbitrary datasets as listings. |
+|[{dv.loader}](https://boehringer-ingelheim.github.io/dv.loader/){target="_blank"}| The {dv.loader} package facilitates data loading from either a local or remote source. |
+|[{dv.manager}](https://boehringer-ingelheim.github.io/dv.manager/){target="_blank"}| The {dv.manager} package is designed to make it quick and easy to create and deploy Shiny applications containing DaVinci modules. |
+|[{dv.papo}](https://boehringer-ingelheim.github.io/dv.papo/){target="_blank"}| The Patient Profile module presents data on subject-level. |
+: {tbl-colwidths="[25,75]"}

quarto/add_module_entry.R

@@ -0,0 +1,71 @@
+# add_module_entry <- function(module, package, url, description) {
+#   cat(paste0("### ", module, " by [{", package, "}](", url, '){target="_blank"}  \n'))
+#   cat("::: columns \n")
+#   cat('::: {.column width="40%"} \n')
+#   cat("::: \n")
+#   cat('::: {.column width="60%"} \n')
+#   cat(description)
+#   cat("::: \n")
+#   cat("::: \n")
+# }
+source("carousel/carousel.R")
+add_module_entry <- function(module, package, url, description) {
+
+  paste(
+    paste0("### ", module, " by [{", package, "}](", url, '){target="_blank"}  \n'),
+    "::: columns",
+    '::: {.column width="40%"}',
+
+    as.character(carousel("gallery-carousel", 5000, yaml.load_file("carousel/carousel.yml"))),
+
+    "Test",
+    ":::",
+    '::: {.column width="60%"}',
+    description,
+    ":::",
+    ":::",
+    sep = "\n"
+  )
+
+}
+
+
+
+
+
+```{r}
+#| results: asis
+source("add_module_entry.R")
+des <- "The listings module displays arbitrary datasets as listings. Users can select the dataset to be shown, and specify which columns of the dataset should be displayed as well as their order. The displayed columns can be sorted and filtered. Moreover, the table can be filtered to show only entries containing a keyword entered by the user. The module is not limited to usage of one data source, most notably, it can handle data from ADaM or SDTM."
+tst <- add_module_entry(module = "listings", "dv.listings", "https://boehringer-ingelheim.github.io/dv.listings/", description = des)
+cat(tst)
+```
+
+```{r}
+#| results: asis
+cat(paste0(
+  "### Listings by [{dv.listings}](https://boehringer-ingelheim.github.io/dv.listings/){target=\"_blank\"}
+
+::: columns
+::: {.column width=\"40%\"}"))
+```
+
+`{r} carousel("gallery-carousel", 5000, yaml.load_file("carousel/carousel.yml"))`
+```{r}
+#| results: asis
+cat(paste0(
+  "
+:::
+::: {.column width=\"60%\"}
+The listings module displays arbitrary datasets as listings. Users can select the dataset to be shown, and specify which columns of the dataset should be displayed as well as their order. The displayed columns can be sorted and filtered. Moreover, the table can be filtered to show only entries containing a keyword entered by the user. The module is not limited to usage of one data source, most notably, it can handle data from ADaM or SDTM.
+:::
+:::"
+))
+```
+
+
+```{r}
+#| results: asis
+cat(as.character(carousel("gallery-carousel", 5000, yaml.load_file("carousel/carousel.yml"))))
+```
+

quarto/carousel/carousel.R

@@ -0,0 +1,108 @@
+#### Code from: https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/carousel.R
+#### Changes from quarto-web tagged with "NOTE: Change"
+library(htmltools)
+library(yaml)
+
+# carousel displays a list of items w/ nav buttons
+carousel <- function(id, duration, items) {
+  index <- -1
+  items <- lapply(items, function(item) {
+    index <<- index + 1
+    carouselItem(
+      caption = item$caption,
+      image = item$image,
+      link = item$link,
+      index = index,
+      interval = duration,
+      gallery_id = id # NOTE: change
+    )
+  })
+
+  indicators <- div(
+    class = "carousel-indicators",
+    tagList(
+      lapply(items, function(item) item$button)
+    )
+  )
+  items <- div(
+    class = "carousel-inner",
+    tagList(
+      lapply(items, function(item) item$item)
+    )
+  )
+  div(
+    id = id,
+    class="carousel carousel-dark slide",
+    `data-bs-ride`="carousel",
+    indicators,
+    items,
+    navButton(id, "prev", "Previous"),
+    navButton(id, "next", "Next")
+  )
+}
+
+# carousel item
+carouselItem <- function(
+  caption, image, link, index, interval,
+  gallery_id) { # NOTE: Change
+  id <- paste0("gallery-carousel-item-", index)
+  button <- tags$button(
+    type = "button",
+    `data-bs-target` = "#gallery-carousel",
+    `data-bs-slide-to` = index,
+    `aria-label` = paste("Slide", index + 1)
+  )
+  if (index == 0) {
+    button <- tagAppendAttributes(
+      button,
+      class = "active",
+      `aria-current` = "true"
+    )
+  }
+  # NOTE: original
+  #item <- div(class = paste0("carousel-item", ifelse(index == 0, " active", "")),
+  #            `data-bs-interval` = interval,
+  #            a(href = link, img(src = image, class = "d-block  mx-auto border")),
+  #            div(class = "carousel-caption d-none d-md-block",
+  #                tags$p(class = "fw-light", caption)
+  #            )
+  # NOTE: change
+  item <- div(
+    class = paste0(
+      "carousel-item",
+      ifelse(index == 0, " active", "")
+    ),
+    `data-bs-interval` = interval,
+    a(
+    href = link,
+    class = "lightbox",
+    `data-gallery` = gallery_id,
+    div(
+      img(src = image, class = "d-block  mx-auto border", style = "width: 80%"),
+      style = "height: 200px"
+      ),
+    ),
+    div(
+      class = "carousel-caption d-none d-md-block",
+      tags$p(class = "fw-light", caption)
+    )
+  )
+
+  list(
+    button = button,
+    item = item
+  )
+}
+
+# nav button
+navButton <- function(targetId, type, text) {
+  tags$button(
+    class = paste0("carousel-control-", type),
+    type = "button",
+    `data-bs-target` = paste0("#", targetId),
+    `data-bs-slide` = type,
+    span(class = paste0("carousel-control-", type, "-icon"),
+         `aria-hidden` = "true"),
+    span(class = "visually-hidden", text)
+  )
+}

quarto/carousel/carousel.yml

@@ -0,0 +1,11 @@
+- caption: ""
+  image: "images/modules/Listings/1.png"
+  link: "images/modules/Listings/1.png"
+
+- caption: ""
+  image: "images/modules/Listings/2.png"
+  link: "#articles-reports"
+
+- caption: ""
+  image: "images/modules/Listings/3.png"
+  link: "#articles-reports"

quarto/general.scss

@@ -1,8 +1,13 @@
 /*-- scss:defaults --*/
 
-
-//$body-bg: #E5E3DE;
-$body-bg: #F6F5F3;
+/*
+// Base document colors
+$body-bg: #181818;
+$body-color: white;
+$link-color: #75AADB;
+*/
+$body-bg: #E5E3DE;
+//$body-color: #F6F5F3;
 $link-color: #70A0CC;
 $nav-tabs-link-active-bg: #00E47C;
 $nav-tabs-link-active-color: #00E47C;
@@ -11,6 +16,8 @@ $nav-tabs-link-active-color: #00E47C;
 $navbar-bg: #002b36;
 $navbar-fg: #00E47C;
 $navbar-hl: #00E47C;
+//$nav-tabs-link-active-bg: #00E47C;
+//$nav-tabs-link-active-color: #00E47C;
 
 // Footer
 $footer-bg: #002b36;