dump docker stuff

.github/workflows/build-container.yaml

@@ -0,0 +1,65 @@
+name: Create and publish a Docker image
+
+# Configures this workflow to run every time a change is pushed to the branch called `release`.
+on:
+  push:
+    paths:
+      - render.sh
+      - static/**
+      - Dockerfile
+      - entrypoint.sh
+  workflow_dispatch:
+
+# Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds.
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+# There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+      # 
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
+      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
+      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      # This step generates an artifact attestation for the image, which is an unforgeable statement about where and how it was built. It increases supply chain security for people who consume the image. For more information, see "[AUTOTITLE](/actions/security-guides/using-artifact-attestations-to-establish-provenance-for-builds)." 
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true
+
+

Dockerfile

@@ -0,0 +1,25 @@
+FROM ubuntu:jammy
+ARG QUARTO_VERSION="1.5.57"
+ARG YQ_VERSION="v4.44.3"
+ENV LC_ALL=en_US.UTF-8
+ENV LANG=en_US.UTF-8
+ENV DEBIAN_FRONTEND=noninteractive
+ENV TZ=UTC
+RUN useradd -s /bin/bash -m docker \
+  && usermod -a -G staff docker \
+  && apt-get update && apt-get install -y --no-install-recommends \
+  ca-certificates \
+  locales \
+  wget \
+  && rm -rf /var/lib/apt/lists/* \
+  && echo "en_US.UTF-8 UTF-8" >> /etc/locale.gen \
+  && locale-gen en_US.utf8 \
+  && /usr/sbin/update-locale LANG=en_US.UTF-8 \
+  && wget https://github.com/quarto-dev/quarto-cli/releases/download/v${QUARTO_VERSION}/quarto-${QUARTO_VERSION}-linux-amd64.deb \
+  && dpkg -i quarto-*-linux-amd64.deb
+RUN wget https://github.com/mikefarah/yq/releases/download/${YQ_VERSION}/yq_linux_amd64.tar.gz -O - |\
+  tar xz && mv yq_linux_amd64 /usr/bin/yq 
+
+COPY static /static
+COPY render.sh render.sh
+CMD ["bash"]

index.qmd

@@ -0,0 +1,18 @@
+---
+title: "corefast bashdoor'd"
+---
+
+This is a Quarto website.
+
+To learn more about Quarto websites visit <https://quarto.org/docs/websites>.
+
+Authors can use $\LaTeX$ to write equations and even put in callouts:
+
+:::{.callout-note}
+
+Look at this note!
+
+:::
+
+
+

render.sh

@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+set -e
+
+ORG=${1:-"hubverse-org"}
+REPO=${2:-"hub-dashboard-predtimechart"}
+BRANCH=${3:-"main"}
+DIR=${4:-""}
+if [[ $ORG == "hubverse-org" && $REPO == "hub-dashboard-predtimechart" ]]; then
+  DIR="demo/"
+fi
+ROOT="https://raw.githubusercontent.com/$ORG/$REPO/refs/heads/$BRANCH/$DIR"
+
+# copy resources to the user's site
+echo "📂 Copying site skeleton"
+cp -R /static/* /site/pages/
+# modify the quarto to contain the pages and their ordering
+echo "  Updating site config"
+yq -i '
+  # load the user site config
+  load("/site/site-config.yml") as $cfg |
+
+  # Add the pages to the navigation bar
+  with(.website.navbar.left;
+    . += $cfg.pages
+  ) |
+  # Update the title
+  with(.website.title;
+    . |= $cfg.title
+  )
+' /site/pages/_quarto.yml
+# modify the predtimechart js to get content from the correct place
+sed -i -E "s+\{ROOT\}+$ROOT+" /site/pages/resources/predtimechart.js
+# render the site!
+echo "🏗  Building the site"
+quarto render /site/pages/
+echo "😃 All done!"

static/_quarto.yml

@@ -0,0 +1,30 @@
+project:
+  type: website
+
+resources:
+  - resources/predtimechart.js
+
+website:
+  title: "corefast bashdoor'd"
+  navbar:
+    left:
+      - text: "HOME"
+        icon: home
+        href: index.qmd
+      - text: "Forecasts"
+        icon: chart-line
+        href: forecast.qmd
+    right:
+      - href: https://github.com/hubverse-org/hub-dashboard-predtimechart
+        icon: github
+
+format:
+  html:
+    theme: yeti
+    css: resources/css/styles.css
+    include-in-header: resources/header.html
+    include-after-body: resources/blank.html
+    toc: false 
+
+
+

static/forecast.qmd

@@ -0,0 +1,13 @@
+---
+title: forecast
+include-after-body:
+  text: |
+    <script type="module" src="resources/predtimechart.js"></script>
+---
+
+
+::: {#forecastViz_row .grid .column-screen-inset}
+
+this is replaced
+
+:::

static/resources/blank.html

@@ -0,0 +1,10 @@
+<script type="text/javascript">
+var all_links = document.querySelectorAll('a');
+for (var i = 0; i < all_links.length; i++){
+       var a = all_links[i];
+       if(a.hostname != location.hostname) {
+               a.rel = 'noopener';
+               a.target = '_blank';
+       }
+}
+</script>

static/resources/css/styles.css

@@ -0,0 +1,63 @@
+.navbar {
+  background-color: #003a80;
+}
+
+body {
+  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #0073ff;
+}
+
+a:hover,
+a:focus {
+  color: #0073ff;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover {
+    background-color: #002858;
+}
+
+.navbar-inverse .navbar-nav > li > a:focus {
+    background-color: #002858;
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+    background-color: #002858;
+}
+
+.button {
+  color: #ffffff;
+  padding: 20px 40px;
+  font-size: 20px;
+  border: none;
+
+  border-radius: 5px;
+
+  margin: 5px;
+}
+
+.button.forecasts {
+  color: #fff;
+  background-color: #003a80;
+}
+
+.button.reports {
+  color: #fff;
+  background-color: #64a621;
+}
+
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  background-color: #003a80;
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+    header {
+    padding-bottom: 89.2px !important;
+    }
+}

static/resources/header.html

@@ -0,0 +1,15 @@
+
+<!-- Bootstrap 4 -->
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.js"></script> -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
+<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"> -->
+<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> -->
+
+<!-- https://www.daterangepicker.com/ -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
+
+<!-- plotly -->
+<script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>

static/resources/predtimechart.js

@@ -0,0 +1,78 @@
+import App from 'https://cdn.jsdelivr.net/gh/reichlab/predtimechart@2.0.10/dist/predtimechart.bundle.js';
+document.predtimechart = App;  // for debugging
+
+function replace_chars(the_string) {
+    // replace all non-alphanumeric characters, except dashes and underscores, with a dash
+    return the_string.replace(/[^a-zA-Z0-9-_]/g, '-');
+}
+
+const root = "{ROOT}";
+
+function _fetchData(isForecast, targetKey, taskIDs, referenceDate) {
+    // ex taskIDs: {"scenario_id": "A-2022-05-09", "location": "US"} . NB: key order not sorted
+    console.info("_fetchData(): entered.", isForecast, `"${targetKey}"`, taskIDs, `"${referenceDate}"`);
+
+    const targetKeyStr = replace_chars(targetKey);
+
+    // get .json file name: 1) get taskIDs values ordered by sorted keys, 2) clean up ala `json_file_name()`
+    const taskIDsValsSorted = Object.keys(taskIDs).sort().map(key => taskIDs[key]);
+    const taskIDsValsStr = replace_chars(taskIDsValsSorted.join(' '));
+
+    let target_path;
+    // Get the reference date for today and use it to find
+    // the correct targets file
+    var now = new Date();
+    const day = now.getDay();
+    var days_to_saturday = 6 - day;
+    if (days_to_saturday < 0) {
+      days_to_saturday = days_to_saturday + 7;
+    }
+    now.setDate(now.getDate() + days_to_saturday);
+    const tagetDate = now.toISOString().split("T")[0];
+
+    const slug = `${targetKeyStr}_${taskIDsValsStr}`;
+    const forecast_file_name = `${slug}_${referenceDate}.json`;
+    const target_file_name = `${slug}_${tagetDate}.json`;
+    if (isForecast) {
+        // target_path = `./static/data/forecasts/${file_name}`;
+        target_path = `${root}/forecasts/${forecast_file_name}`;
+    } else {
+        // target_path = `./static/data/truth/${file_name}`;
+        target_path = `${root}/targets/${target_file_name}`;
+    }
+    return fetch(target_path);  // Pwomise?
+}
+
+
+// load options and then initialize the component
+fetch(`${root}/predtimechart-options.json`)
+    .then(response => response.json())
+    .then((data) => {
+        console.info("fetch(): done. calling App.initialize().", data);
+
+        // componentDiv, _fetchData, isIndicateRedraw, options, _calcUemForecasts:
+        App.initialize('forecastViz_row', _fetchData, false, data, null);
+    })
+    .then(function() {
+        // ZNK 2024-09-16: update for bootstrap 5
+        var divs = document.querySelectorAll("div[class^='col-md']");
+        for (var div of divs) {
+          if (div.className.match("g-col") == null) {
+            var n = div.className.match("col-md-(.{1,2})")[1];
+            div.classList.add("g-col-"+n);
+          }
+        }
+    });
+
+window.addEventListener('DOMContentLoaded', function() {
+  var divs = document.querySelectorAll("div[class^='col-md']");
+  for (var div of divs) {
+    if (div.className.match("g-col") == null) {
+      var n = div.className.match("col-md-(.{1,2})")[1];
+      div.classList.add("g-col-"+n);
+    }
+  }
+});
+
+
+