transfer from old repo

apps/shinyDAG-1.0.0/www/examples/README.md

@@ -0,0 +1,31 @@
+## Creating Examples
+
+To create a new example, run ShinyDAG locally using the shinydag dev docker file.
+
+Set up your example and then save it as a bookmark.
+
+Note the URL created by shiny for the bookmark, it should end with
+
+```
+?_state_id_=9d49cb0ba72b00f2
+```
+
+Navigate to the `shiny_bookmarks` folder and find the folder with the bookmark token, e.g. `9d49cb0ba72b00f2`.
+
+Copy `values.rds` to `www/examples` and give the file a descriptive name.
+These names are used for the shiny inputs, so keep the characters sane (and no spaces).
+
+Also, save the DAG image into `www/examples` with the same name (not required but a good idea).
+
+Finally, add the description text to `www/examples/examples.yml`.
+Here's an example template that you can copy.
+Note that if you can use HTML in the `description`, but it needs to be valid or it will cause problems on the page.
+
+```yaml
+- name: Classic Confounding
+  description: >
+    This is a description of classic confounding. Descriptions may include
+    <strong>HTML</strong>.
+  file: classic-confounding.rds
+  image: classic-confounding.png
+```

apps/shinyDAG-1.0.0/www/examples/examples.yml

@@ -0,0 +1,23 @@
+- name: Classic Confounding
+  description: >
+    This depicts <em>classic confounding</em>, where a confounder C is a common cause of exposure (E) and outcome (Y).
+  file: classic-confounding.rds
+  image: classic-confounding.png
+  
+- name: Differential Loss to Follow-Up
+  description: >
+    This depicts <em>differential loss to follow up</em>, where patients may be censored (C) depending on their value of L.
+  file: differential-loss-to-follow-up.rds
+  image: differential-loss-to-follow-up.png
+
+- name: Mediator with Confounding
+  description: >
+    This shows a <em>mediator with confounding</em>, where the variable M mediates the effect of E on Y, which is confounded by the variable C.
+  file: mediator-with-confounding.rds
+  image: mediator-with-confounding.png
+  
+- name: Selection Bias
+  description: >
+    This depicts classic <em>selection bias</em>, where C denotes criteria under which the data are observed which, in turn, is a downstream consequence of exposure (E) and outcome (D).
+  file: selection-bias.rds
+  image: selection-bias.png

apps/shinyDAG-1.0.0/www/shinydag.css

@@ -0,0 +1,264 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i');
+
+@media (min-width: 768px) and (max-width: 991px) {
+  #shinydag-toolbar-node-list-action {
+    padding-top: 32px;
+  }
+}
+
+/* ---- GerkeLab Admin LTE Theme Tweaks ---- */
+body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .main-header .logo {
+  font-family: Lato, sans-serif;
+}
+
+.main-header > .logo {
+  color: #989898 !important;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.main-header {
+  position: fixed;
+  width: 100%;
+  box-shadow: 0 3px 3px rgba(0,0,0,0.1) !important;
+  -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.1) !important;
+}
+
+.wrapper, .content-wrapper {
+  min-height: 100vh !important;
+  height: 100% !important;
+  background-color: #f0f0f0 !important;
+}
+
+@media (max-width:767px) {
+  .content-wrapper {
+    padding-top: 100px;
+  }
+}
+@media (min-width:768px) {
+  .content-wrapper {
+    padding-top: 50px;
+  }
+}
+
+.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
+.skin-black .main-header .navbar .navbar-right > li > a {
+  border-left: none;
+}
+
+.gerkelab-logo {
+  background: url("GerkeLab.png");
+  background-size: contain;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  bottom: 25px;
+  left: 65px;
+  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2));
+  transition: z-index 0s, left 0.25s ease-in-out, filter 0.25s ease-in-out, opacity 1s ease-in-out;
+  z-index: 1000;
+  opacity: 1;
+}
+
+.sidebar-collapse .gerkelab-logo {
+  transition: z-index 0s 0.5s, left 0.25s ease-in-out, filter 0.25s ease-in-out;
+  z-index: 0;
+  left: 2%;
+  bottom: 25px;
+}
+
+.sidebar-collapse .gerkelab-logo:hover {
+  filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
+}
+
+@media (max-width: 767px) {
+  .gerkelab-logo {
+    z-index: 0;
+    opacity: 0;
+  }
+}
+
+.disable-buttons {
+  pointer-events: none;
+}
+
+.disabled {
+  pointer-events: none;
+}
+
+#shiny-tab-sketch .box {
+  margin-bottom: 100px;
+}
+
+.dag-preview-tikz {
+  min-height: 400px;
+}
+
+.example-image {
+  text-align: center;
+}
+
+.example-image img {
+  width: 80%;
+  max-width: 500px;
+}
+
+/* ---- ShinyDAG specific tweaks ---- */
+
+#edge_aes_ui label {
+  color: #777;
+  font-weight: normal;
+}
+
+#showPreviewContainer {
+  padding-top: 32px;
+}
+
+.dagpreview-download-ui {
+  padding-top: 25px;
+}
+
+#node_delete {
+  margin-top: 20px;
+  color: #FFF
+}
+
+#edge_btn {
+  margin-top: 25px;
+  color: #FFF
+}
+
+#ui_edge_swap_btn {
+  margin-top: 25px;
+}
+
+@media (min-width: 768px) {
+  #node_delete {
+    margin-left: -25px;
+  }
+}
+
+.edge-selector-hint {
+  font-size: 28px;
+  line-height: 14px;
+  padding-left: 4px;
+  vertical-align: top;
+}
+
+.help-block {
+  padding-top: 0;
+  font-style: italic;
+}
+
+.help-block.text-warning {
+  color: #db8b0b;
+  background-color: #db8b0b20;
+}
+
+.help-block.text-danger {
+  color: #d33724;
+  background-color: #d3372420;
+}
+
+#edge_list_helptext .help-block, #node_list_helptext .help-block {
+  padding: 0.5em;
+  border-radius: 3px;
+}
+
+.btn-text {
+  padding-left: 5px;
+}
+
+@media (min-width: 992px) and (max-width: 1825px) {
+  .btn-text {
+    display: none;
+  }
+}
+
+.gerkelab-spinner {
+    margin: auto;
+    width: 100px;
+    height: 100px;
+    background: url("GerkeLab.png");
+    background-size: cover;
+    -webkit-animation-name: spin;
+    -webkit-animation-duration: 4000ms;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+    -moz-animation-name: spin;
+    -moz-animation-duration: 4000ms;
+    -moz-animation-iteration-count: infinite;
+    -moz-animation-timing-function: linear;
+    -ms-animation-name: spin;
+    -ms-animation-duration: 4000ms;
+    -ms-animation-iteration-count: infinite;
+    -ms-animation-timing-function: linear;
+    
+    animation-name: spin;
+    animation-duration: 4000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+@-ms-keyframes spin {
+    from { -ms-transform: rotate(0deg); }
+    to { -ms-transform: rotate(-360deg); }
+}
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(-360deg); }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(-360deg); }
+}
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(-360deg);
+    }
+}
+
+.alert-edge {
+  animation: fadeout 5s;
+  -moz-animation: fadeout 5s;
+  -webkit-animation: fadeout 5s;
+  -o-animation: fadeout 5s;
+}
+
+@keyframes fadeout {
+    0% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes fadeout {
+    0% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    0% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

apps/shinyDAG-1.0.0/www/shinydag.js

@@ -0,0 +1,78 @@
+const set_input_focus = (id) => {
+  const el = document.getElementById(id);
+  if (el) {
+    el.focus();
+  }
+};
+
+const wrap_btn_text_in_span = (id, text) => {
+  var $el = $("#" + id);
+  $el.html([$el.children()[0], "<span class='btn-text'>" + text + "</span>"]);
+};
+
+$( document ).ready(function() {
+  setTimeout(function() {wrap_btn_text_in_span("downloadButton", "Download")}, 1000);
+  setTimeout(function() {wrap_btn_text_in_span("\\._bookmark_", "Bookmark")}, 1000);
+});
+
+// Block name change updates while Shiny is re-rendering to avoid wonkiness
+var text_input_timeout;
+$(document).on("shiny:busy", (e) => { 
+  text_input_timeout = setTimeout(() => {
+    $("#node_list_node_name").prop("disabled", true);
+  }, 500);
+});
+$(document).on("shiny:idle", (e) => { 
+  clearTimeout(text_input_timeout);
+  $("#node_list_node_name").prop("disabled", false);
+});
+
+// Block node change buttons when updating names to avoid infinite looping wonkiness
+// disables buttons when user starts typing in text box
+$("#node_list_node_name").keydown(() => { 
+  $("#shinydag-toolbar-node-list-action button").prop("disabled", true);
+});
+
+// re-enable buttons when Shiny updates or the text bar loses focus (in case no change)
+$(document).on("shiny:value", () => { 
+  $("#shinydag-toolbar-node-list-action button").prop("disabled", false);
+});
+$("#node_list_node_name").blur(() => { 
+  $("#shinydag-toolbar-node-list-action button").prop("disabled", false);
+});
+
+// Block undo/redo buttons during Shiny updates as well
+var undo_disable_timeout = null;
+$("#undo_rv-history_back, #undo_rv-history_forward").on("click", () => {
+  undo_disable_timeout = setTimeout(() => {
+    $("#undo_rv-history_back").parent().addClass("disable-buttons");
+  }, 10);
+})
+
+// Bock undo/redo with a delay for general Shiny updates
+$(document).on("shiny:busy", () => {
+  if (!undo_disable_timeout) {
+    undo_disable_timeout = setTimeout(() => {
+      $("#undo_rv-history_back").parent().addClass("disable-buttons");
+    }, 250);
+  }
+});
+
+// re-enable undo/redo buttons when Shiny is idle
+$(document).on("shiny:idle", () => {
+  clearTimeout(undo_disable_timeout);
+  undo_disable_timeout = null;
+  $("#undo_rv-history_back").parent().removeClass("disable-buttons");
+});
+
+// Animate logo when app is busy
+var app_busy_timeout;
+$(document).on("shiny:busy", e => { 
+  app_busy_timeout = setTimeout(() => {
+    $(".gerkelab-logo").addClass("gerkelab-spinner"); 
+  }, 500);
+});
+$(document).on("shiny:idle", e => { 
+  clearTimeout(app_busy_timeout);
+  $(".gerkelab-logo").removeClass("gerkelab-spinner"); 
+});