dotdata_widgets 0.0.28-dev.70.bfd2f27f

package/README.md

@@ -0,0 +1,86 @@
+# Dotdata Widgets
+
+Dotdata widgets consist of a NodeJS library and a python module.
+
+## Building the `nodejs` part
+
+In order to build the nodejs part of dotdata widgets - follow the `make` targets
+defined in the `Makefile` in this directory.
+
+```bash
+make build_js
+```
+There is an alias for this command in the root-level `Makefile`:
+```bash
+make -C ../../ build_widgets_js_for_iff
+```
+
+NOTE: this command might not work if on platforms other than linux.
+The docker container in which the commands are executed is based on `node:18.15` container,
+which assumes that the working user has `UID=1000`.
+Calling it on MacOS may produce artifacts with invalid ownership.
+
+In order to build the nodejs package without the docker, make sure you've provisioned your local environment
+as described in the `docker/npm/Dockerfile`. Especially make sure that you have:
+
+* node in version >=18
+* yarn (`npm install yarn -g`)
+* python >=3.8
+* jupyterlab
+
+Then you may call:
+```bash
+make -C ../../ build_js_without_docker
+```
+
+## Publishing the js part of Dotdata Widgets
+
+**DO NOT publish the nodejs package unless you're sure what you're doing!**
+
+Dotdata Widgets are published in a public npm repository.
+You can browse the published packages at https://www.npmjs.com/package/dotdata_widgets
+
+Dotdata widgets are published together with the dotdata wheel by the jenkins job,
+which calls `make publish_iff` from the root-level `Makefile`.
+This command refers to the npm `publish` command, which utilises credentials to npm registry
+defined in `.npmrc`
+
+
+## Interactive development and testing
+
+**WARNING: THERE ARE NO AUTOMATED TESTS OF DOTDATA WIDGETS (neither JS nor python part).**
+
+Dotdata widgets can be tested manually in a jupyter notebook.
+
+In order to do so do the following:
+* Prune local virtual env:
+  ```bash
+  make -C ../../ prune_iff_test_env
+  ```
+  This command cleans the venv directory and deletes pre-existing artifacts.
+* Install `dotdata` in dev mode in the local virtual env:
+  ```bash
+  make -C ../../ prepare_iff_interactive_dev_env
+  ```
+  This command installs `jupyterlab`, installs `dotdata` in `--editable` mode, and calls `jupyter labextension develop --overwrite ${PATH_TO_DOTDAT_WIDGETS}`.
+  Although it make take up to 20 minutes, it has to be called only once.
+* Launch widgets compilation server:
+  ```bash
+  make -C ../../ _run_yarn_watch_compilation_of_dotdata_widgets
+  ```
+  * NOTE: this command requires `node` and `yarn` to be installed in your environment.
+  * Also, it fails if `prepare_iff_interactive_dev_env` wasn't called before.
+  * This command spawns a server that watches for changes in the ts files and recompiles them on the fly.
+  * Run it in separate terminal.
+  * A single recompilation may take up to a minute, so be patient.
+* Launch jupyter lab:
+  ```bash
+  make -C ../../ _start_jupyterlab
+  ```
+  * This command spawns a jupyter-lab server. Run it in separate terminal.
+  * It also opens a browser window with a jupyter lab workspace.
+* Open a notebook (e.g. `examples/introduction.ipynb`) and work with your widgets.
+
+When developing widgets in interactive mode, keep in mind that:
+* you have to reload browser caches in order to force it to load re-compiled `*.js` files.
+* you have to restart notebook's kernel in order to load modified python modules.

package/css/colors.css

@@ -0,0 +1,124 @@
+:root {
+  --c-red-50: #ffebee;
+  --c-red-100: #ffcdd2;
+  --c-red-200: #ef9a9a;
+  --c-red-300: #e57373;
+  --c-red-400: #ef5350;
+  --c-red-500: #f44336;
+  --c-red-600: #e53935;
+  --c-red-700: #d32f2f;
+  --c-red-800: #c62828;
+  --c-red-900: #b71c1c;
+  --c-purple-50: #f3e5f5;
+  --c-purple-100: #e1bee7;
+  --c-purple-200: #ce93d8;
+  --c-purple-300: #ba68c8;
+  --c-purple-400: #ab47bc;
+  --c-purple-500: #9c27b0;
+  --c-purple-600: #8e24aa;
+  --c-purple-700: #7b1fa2;
+  --c-purple-800: #6a1b9a;
+  --c-purple-900: #4a148c;
+  --c-cyan-50: #e0f7fa;
+  --c-cyan-100: #b2ebf2;
+  --c-cyan-200: #80deea;
+  --c-cyan-300: #4dd0e1;
+  --c-cyan-400: #26c6da;
+  --c-cyan-500: #00bcd4;
+  --c-cyan-600: #00acc1;
+  --c-cyan-700: #0097a7;
+  --c-cyan-800: #00838f;
+  --c-cyan-900: #006064;
+  --c-blue-50: #e3f2fd;
+  --c-blue-100: #bbdefb;
+  --c-blue-200: #90caf9;
+  --c-blue-300: #64b5f6;
+  --c-blue-400: #42a5f5;
+  --c-blue-500: #2196f3;
+  --c-blue-600: #1e88e5;
+  --c-blue-700: #1976d2;
+  --c-blue-800: #1565c0;
+  --c-blue-900: #0d47a1;
+  --c-light-blue-50: #e1f5fe;
+  --c-light-blue-100: #b3e5fc;
+  --c-light-blue-200: #81d4fa;
+  --c-light-blue-300: #4fc3f7;
+  --c-light-blue-400: #29b6f6;
+  --c-light-blue-500: #03a9f4;
+  --c-light-blue-600: #039be5;
+  --c-light-blue-700: #0288d1;
+  --c-light-blue-800: #0277bd;
+  --c-light-blue-900: #01579b;
+  --c-green-50: #e8f5e9;
+  --c-green-100: #c8e6c9;
+  --c-green-200: #a5d6a7;
+  --c-green-300: #81c784;
+  --c-green-400: #66bb6a;
+  --c-green-500: #4caf50;
+  --c-green-600: #43a047;
+  --c-green-700: #388e3c;
+  --c-green-800: #2e7d32;
+  --c-light-green-50: #f1f8e9;
+  --c-light-green-100: #dcedc8;
+  --c-light-green-200: #c5e1a5;
+  --c-light-green-300: #aed581;
+  --c-light-green-400: #9ccc65;
+  --c-light-green-500: #8bc34a;
+  --c-light-green-600: #7cb342;
+  --c-light-green-700: #689f38;
+  --c-light-green-800: #558b2f;
+  --c-light-green-900: #33691e;
+  --c-yellow-50: #fffde7;
+  --c-yellow-100: #fff9c4;
+  --c-yellow-200: #fff59d;
+  --c-yellow-300: #fff176;
+  --c-yellow-400: #ffee58;
+  --c-yellow-500: #ffeb3b;
+  --c-yellow-600: #fdd835;
+  --c-yellow-700: #fbc02d;
+  --c-yellow-800: #f9a825;
+  --c-yellow-900: #f57f17;
+  --c-amber-100: #ffecb3;
+  --c-amber-200: #ffe082;
+  --c-amber-300: #ffd54f;
+  --c-amber-400: #ffca28;
+  --c-amber-500: #ffc107;
+  --c-amber-600: #ffb300;
+  --c-amber-700: #ffa000;
+  --c-amber-800: #ff8f00;
+  --c-amber-900: #ff6f00;
+  --c-orange-50: #fff3e0;
+  --c-orange-100: #ffe0b2;
+  --c-orange-200: #ffcc80;
+  --c-orange-300: #ffb74d;
+  --c-orange-400: #ffa726;
+  --c-orange-500: #ff9800;
+  --c-orange-600: #fb8c00;
+  --c-orange-700: #f57c00;
+  --c-orange-800: #ef6c00;
+  --c-orange-900: #e65100;
+  --c-brown-50: #efebe9;
+  --c-brown-100: #d7ccc8;
+  --c-brown-200: #bcaaa4;
+  --c-brown-300: #a1887f;
+  --c-brown-400: #8d6e63;
+  --c-brown-500: #795548;
+  --c-brown-600: #6d4c41;
+  --c-brown-700: #5d4037;
+  --c-brown-800: #4e342e;
+  --c-brown-900: #3e2723;
+  --c-grey-50: #fafafa;
+  --c-grey-100: #f5f5f5;
+  --c-grey-200: #eee;
+  --c-grey-300: #e0e0e0;
+  --c-grey-400: #bdbdbd;
+  --c-grey-500: #9e9e9e;
+  --c-grey-600: #757575;
+  --c-grey-700: #616161;
+  --c-grey-800: #424242;
+  --c-grey-900: #212121;
+
+  --c-catskill-white: #f5f7fa;
+  --c-zircon: #EDF3FF;
+  --c-cornflower-blue: #5B92FB
+}

package/css/typography.css

@@ -0,0 +1,44 @@
+h1,
+.h1 {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0;
+}
+
+h2,
+.h2 {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0;
+}
+
+h3,
+.h3 {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 26px;
+  letter-spacing: 0;
+}
+
+h4,
+.h4 {
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0;
+  font-weight: 500;
+  margin-block: 12px;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.label-bold {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}

package/css/widget.css

@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
+
+@import url('colors.css');
+@import url('typography.css');
+
+@import url('../src/feature-descriptor/feature-descriptors-domain.css');
+@import url('../src/components/accordion/accordion.css');
+@import url('../src/widgets/feature-space/feature-space.css');
+@import url('../src/widgets/feature-leaderboard/feature-leaderboard.css');
+
+:root {
+  --c-text: black;
+
+  /* TABLE */
+  --table-border-color: var(--c-grey-300);
+  --table-header-color: var(--c-grey-600);
+  --table-row-height: 30px;
+}
+
+.dotdata-widget {
+  font-family: Roboto, serif;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--c-text);
+  overflow-x: auto;
+  margin-top: 24px;
+}
+
+/************ DARK MODE *************/
+/* Databricks*/
+body.dark-mode .dotdata-widget,
+  /* VSCODE */
+.vscode-dark .dotdata-widget,
+  /* Jupyter */
+body[data-jp-theme-light="false"] .dotdata-widget {
+  filter: invert(1) saturate(0.5) !important;
+}
+
+.dotdata-widget ::-webkit-scrollbar {
+  width: 4px;
+}
+
+.dotdata-widget ::-webkit-scrollbar-track {
+  background: var(--c-grey-300);
+  border-radius: 0;
+}
+
+.dotdata-widget ::-webkit-scrollbar-thumb {
+  background: var(--c-cornflower-blue);
+  border-radius: 4px;
+}
+
+h1,
+h2,
+h3 {
+  margin-block: 0.4em;
+}
+
+.grey-label {
+  color: var(--c-grey-700);
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table :is(th, td) {
+  padding: 0.3rem;
+  min-width: 50px;
+}
+
+.table :is(tr) {
+  height: var(--table-row-height);
+}
+
+.table th {
+  color: var(--table-header-color);
+  border-bottom: 1px solid var(--c-grey-300);
+  text-align: start;
+}