DataQualityDashboard
DataQualityDashboard copied to clipboard
OHDSI
v1: vendor datatables and google fonts deps to enable offline use
Fixes #310 and #184 in v1 (already fixed in future release v2)
I'm not sure if you are interested in this fix for v1, but this is a quick curl & sed -based vendor-ing of the gooogle fonts and datatables dependencies in v1. It pulls in all the related JS, CSS, and PNG files needed to use the shiny app in an offline mode.
This script is what I used to to patch and download the files in this PR, it shows my work and you can use it to run the patch locally in case you're concerned about accepting random js, ttf, and png files from strangers on the Internet.
#!/bin/sh
base="inst/shinyApps/www"
cd "$base"
# $ rg -o -r '$1' '(?:src|href)="(http[^"]+)"' inst/shinyApps/www/index.html | rg -v 'github|ohdsi.org|nih.gov'
# https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700
# https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i
# https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css
# https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css
# https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js
# https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
# https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js
# https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js
# making directories
mkdir -p \
vendor/googlefonts \
vendor/datatables/buttons/1.5.6/css \
vendor/datatables/buttons/1.5.6/js \
vendor/datatables/v/dt/dt-1.10.18/images \
;
echo "downloading google fonts CSS files and patching related paths in index.html"
for url in \
'https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700' \
'https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i' \
; do
font_filename=$(printf '%s' "$url" | sed 's#^https://fonts.googleapis.com/css?family=##; s#:#-#g; s#+#_#g; s#$#.css#;')
(set -x
curl -sSL -o "vendor/googlefonts/${font_filename}" "$url"
sed -i.bak "s#${url}#vendor/googlefonts/${font_filename}#g" index.html
)
done
# $ cat inst/shinyApps/www/vendor/googlefonts/*.css
# @font-face {
# font-family: 'Muli';
# font-style: italic;
# font-weight: 400;
# src: url(https://fonts.gstatic.com/s/muli/v27/7Aujp_0qiz-afTfcIyoiGtm2P0wG05Fz4eqVxg.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Muli';
# font-style: italic;
# font-weight: 800;
# src: url(https://fonts.gstatic.com/s/muli/v27/7Aujp_0qiz-afTfcIyoiGtm2P0wG0xF04eqVxg.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Muli';
# font-style: normal;
# font-weight: 400;
# src: url(https://fonts.gstatic.com/s/muli/v27/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk30e0.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Muli';
# font-style: normal;
# font-weight: 800;
# src: url(https://fonts.gstatic.com/s/muli/v27/7Aulp_0qiz-aVz7u3PJLcUMYOFlOl0k30e0.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Saira Extra Condensed';
# font-style: normal;
# font-weight: 500;
# src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrG2vh2wpk.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Saira Extra Condensed';
# font-style: normal;
# font-weight: 700;
# src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrU23h2wpk.ttf) format('truetype');
# }
echo "downloading google fonts ttf files and patching css files"
grep --no-filename -Eo 'url\([^)]+\)' vendor/googlefonts/*.css \
| while read -r url_expression; do
url=$(printf '%s' "$url_expression" | sed 's#^url(\(.*\))#\1#g;')
font_filename=$(printf '%s' "$url" | sed "s#^https://fonts.gstatic.com/s/##g; s#/#_#g")
(set -x
curl -sSL -o "vendor/googlefonts/${font_filename}" "$url"
sed -i.bak "s#${url}#${font_filename}#g" vendor/googlefonts/*.css
)
done
# $ cat inst/shinyApps/www/vendor/googlefonts/*.css
# @font-face {
# font-family: 'Muli';
# font-style: italic;
# font-weight: 400;
# src: url(muli_v27_7Aujp_0qiz-afTfcIyoiGtm2P0wG05Fz4eqVxg.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Muli';
# font-style: italic;
# font-weight: 800;
# src: url(muli_v27_7Aujp_0qiz-afTfcIyoiGtm2P0wG0xF04eqVxg.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Muli';
# font-style: normal;
# font-weight: 400;
# src: url(muli_v27_7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk30e0.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Muli';
# font-style: normal;
# font-weight: 800;
# src: url(muli_v27_7Aulp_0qiz-aVz7u3PJLcUMYOFlOl0k30e0.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Saira Extra Condensed';
# font-style: normal;
# font-weight: 500;
# src: url(sairaextracondensed_v11_-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrG2vh2wpk.ttf) format('truetype');
# }
# @font-face {
# font-family: 'Saira Extra Condensed';
# font-style: normal;
# font-weight: 700;
# src: url(sairaextracondensed_v11_-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrU23h2wpk.ttf) format('truetype');
# }
# $ ls inst/shinyApps/www/vendor/googlefonts/*.ttf
# inst/shinyApps/www/vendor/googlefonts/muli_v27_7Aujp_0qiz-afTfcIyoiGtm2P0wG05Fz4eqVxg.ttf
# inst/shinyApps/www/vendor/googlefonts/muli_v27_7Aujp_0qiz-afTfcIyoiGtm2P0wG0xF04eqVxg.ttf
# inst/shinyApps/www/vendor/googlefonts/muli_v27_7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk30e0.ttf
# inst/shinyApps/www/vendor/googlefonts/muli_v27_7Aulp_0qiz-aVz7u3PJLcUMYOFlOl0k30e0.ttf
# inst/shinyApps/www/vendor/googlefonts/sairaextracondensed_v11_-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrG2vh2wpk.ttf
# inst/shinyApps/www/vendor/googlefonts/sairaextracondensed_v11_-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrU23h2wpk.ttf
echo "downloading datatables css and js files and making related patches in index.html"
for url in \
'https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css' \
'https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js' \
'https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js' \
'https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js' \
'https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css' \
'https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js' \
; do
output_path=$(printf '%s' "$url" | sed 's#^https://cdn.datatables.net/#vendor/datatables/#')
(set -x
curl -sSL -o "$output_path" "$url"
)
sed -i.bak "s#${url}#${output_path}#g" index.html
done
# $ rg -o 'url\([^)]+\)' inst/shinyApps/www/vendor/datatables
# inst/shinyApps/www/vendor/datatables/v/dt/dt-1.10.18/datatables.min.css
# 13:url("/DataTables-1.10.18/images/sort_both.png")
# 13:url("/DataTables-1.10.18/images/sort_asc.png")
# 13:url("/DataTables-1.10.18/images/sort_desc.png")
# 13:url("/DataTables-1.10.18/images/sort_asc_disabled.png")
# 13:url("/DataTables-1.10.18/images/sort_desc_disabled.png")
echo "Patching image path in datables css file"
sed -i.bak 's#url("/DataTables-1.10.18/#url("#g' vendor/datatables/v/dt/dt-1.10.18/datatables.min.css
# $ rg -o 'url\([^)]+\)' inst/shinyApps/www/vendor/datatables
# inst/shinyApps/www/vendor/datatables/v/dt/dt-1.10.18/datatables.min.css
# 13:url("images/sort_both.png")
# 13:url("images/sort_asc.png")
# 13:url("images/sort_desc.png")
# 13:url("images/sort_asc_disabled.png")
# 13:url("images/sort_desc_disabled.png")
echo "Downloading datatables images"
for url in \
'https://cdn.datatables.net/DataTables-1.10.18/images/sort_asc_disabled.png' \
'https://cdn.datatables.net/DataTables-1.10.18/images/sort_asc.png' \
'https://cdn.datatables.net/DataTables-1.10.18/images/sort_both.png' \
'https://cdn.datatables.net/DataTables-1.10.18/images/sort_desc_disabled.png' \
'https://cdn.datatables.net/DataTables-1.10.18/images/sort_desc.png' \
; do
output_path=$(printf '%s' "$url" | sed 's#^https://cdn.datatables.net/DataTables-1.10.18#vendor/datatables/v/dt/dt-1.10.18#')
(set -x
curl -sSL -o "$output_path" "$url"
)
done
echo "patching index.html with vendored paths"
sed -i.bak 's#url("/DataTables-1.10.18/#url("#g' index.html
echo "Removing sed backup files"
find . -name '*.bak' -print -delete
@actualben this is great, thank you. I confess I don't have the depth of knowledge to review this PR. @fdefalco can you take a look?
Thanks @fdefalco! @actualben Can you do me a favor and target your PR to the develop branch instead of the main branch? We are trying to use good HADES practices by putting all features on the develop branch until such time they are ready to release
@clairblacketer Sorry about the delay I missed the notifications for some reason. I've changed the base branch to develop.