dotdata_widgets 0.1.2 → 0.1.4

package/README.md

@@ -1,9 +1,9 @@
-
 # Dotdata widgets
 
 A dotdata widget
 
 ### Prerequisites
+
 1. nodejs >= 18
 2. yarn (npm install yarn -g)
 3. python 3
@@ -18,6 +18,7 @@ pip install dotdata_widgets
 
 If you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
 the nbextension:
+
 ```bash
 jupyter nbextension enable --py [--sys-prefix|--user|--system] dotdata_widgets
 ```
@@ -25,11 +26,13 @@ jupyter nbextension enable --py [--sys-prefix|--user|--system] dotdata_widgets
 ## Development Installation
 
 Create a dev environment:
+
 ```bash
 python -m venv venv/
 ```
 
 Install the python. This will also build the TS package.
+
 ```bash
 pip install -e ".[test, examples]"
 ```
@@ -55,11 +58,13 @@ you might also need another flag instead of `--sys-prefix`, but we won't cover t
 of those flags here.
 
 ### Watch Mode
+
 ```bash
 yarn run watch
 ```
 
-### Docker 
+### Docker
+
 ```bash
 git clone ...
 
@@ -67,8 +72,11 @@ docker run -it --name dotdata_widget -v $(pwd)/dotdata_widgets:/dotdata_widgets
 ```
 
 ### How to see your changes
+
 #### Typescript:
-If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
+
+If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in
+different
 terminals to watch for changes in the extension's source and automatically rebuild the widget.
 
 ```bash
@@ -81,6 +89,7 @@ jupyter lab
 After a change wait for the build to finish and then refresh your browser and the changes should take effect.
 
 #### Python:
+
 If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
 
 ## Updating the version
@@ -93,3 +102,18 @@ pip install tbump
 tbump <new-version>
 ```
 
+## Build with docker
+
+```bash
+# Only for the first run
+docker build -t dotdata_widgets_builder .
+
+# bump version before run
+docker run -it --rm --env VERSION=0.1.2 -v $(pwd):/dotdata_widgets dotdata_widgets_builder
+```
+
+## Publish npm package
+
+```bash
+npm publish
+```

package/css/colors.css

@@ -117,4 +117,8 @@
   --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

@@ -22,6 +22,15 @@ h3,
   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;

package/css/widget.css

@@ -1,14 +1,16 @@
-@import url('~@fontsource/roboto');
-@import url('~@fontsource/roboto/500.css');
+@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/components/input/input.css');
+@import url('../src/widgets/feature-space/feature-space.css');
+@import url('../src/widgets/feature-leaderboard/feature-leaderboard.css');
 
 :root {
-  --c-text: var(--c-grey-900);
+  --c-text: black;
 
   /* TABLE */
   --table-border-color: var(--c-grey-300);
@@ -19,8 +21,35 @@
 .dotdata-widget {
   font-family: Roboto, serif;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 16px;
   color: var(--c-text);
+  overflow-x: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dotdata-widget {
+    filter: invert(1) saturate(0.5) !important;
+  }
+}
+
+.vscode-high-contrast .dotdata-widget,
+.vscode-dark .dotdata-widget,
+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,
@@ -33,6 +62,12 @@ h3 {
   color: var(--c-grey-700);
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .table {
   border-collapse: collapse;
   border-spacing: 0;