feat: Support lerna scopes in npm start (#203)

Support lerna scopes in npm start

.github/workflows/pre-commit.yml

@@ -6,6 +6,6 @@ jobs:
   pre-commit:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-python@v3
-    - uses: pre-commit/action@v3.0.0
+      - uses: actions/checkout@v3
+      - uses: actions/setup-python@v3
+      - uses: pre-commit/action@v3.0.0

.pre-commit-config.yaml

@@ -1,11 +1,11 @@
 repos:
--   repo: https://github.com/adamchainz/blacken-docs
+  - repo: https://github.com/adamchainz/blacken-docs
     rev: 1.15.0
     hooks:
-    -   id: blacken-docs
+      - id: blacken-docs
         additional_dependencies:
-        - black==22.12.0
--   repo: https://github.com/psf/black
+          - black==22.12.0
+  - repo: https://github.com/psf/black
     rev: 22.10.0
     hooks:
-    -   id: black
+      - id: black

.prettierignore

@@ -0,0 +1,2 @@
+# These json files should not be auto-formatted to avoid breaking CI tests
+plugins/json/test/*.json

README.md

@@ -86,13 +86,28 @@ Run `npm install` to install js dependencies.
 You can build the js plugin(s) in watch mode from the root directory of this repo by using the following commands:
 
 ```shell
-npm start # starts all plugins in watch mode and serves the plugins directory
-# OR
+# build all plugins in watch mode and serves the plugins directory
+npm start
+```
+
+This will serve the plugins using Vite's dev server. You can optionally provide a `--scope` argument to filter which .js plugins will be built in watch mode:
+
+e.g. To run all packages containing "theme" in the name:
+
+```shell
+# include a scope to filter which plugins to build in watch mode
+npm start -- --scope *theme*
+```
+
+Alternatively, you can also run individual plugins in watch mode. Note that this will only build the plugin and won't start the dev server.
+
+```shell
+# build a single plugin in watch mode
 cd plugins/plugin
-npm start # starts just the current directory plugin in watch mode
+npm start
 ```
 
-This will rebuild the plugin(s) any time the source changes. If you are mapping the folder directly via DHC start options, you will need to restart the deephaven-core server each time a change is made for the change to be picked up.
+Note that if you are mapping the `plugins` folder directly via DHC start options, the plugins dev server won't actually be used, and you will need to restart the deephaven-core server each time a change is made for the change to be picked up.
 
 ##### Serve Plugins
 
@@ -114,36 +129,46 @@ See READMEs in the directories of the python plugins you're working with for spe
 You can build the wheels using the following commands (or similar for other plugins) from the root directory of this repo:
 
 ```
+
 python -m build --wheel plugins/matplotlib
 python -m build --wheel plugins/plotly
+
 ```
 
 Substitute in your local wheel locations for the wheels in the following command.
 Note that `<deephaven-plugins-path>` is the path to this repo.
 
 ```
+
 pip install <deephaven-plugins-path>/plotly/plugins/dist/deephaven_plugin_plotly-0.0.1.dev2-py3-none-any.whl <deephaven-plugins-path>/plugins/matplotlib/dist/deephaven_plugin_matplotlib-0.1.1-py3-none-any.whl
+
 ```
 
 If installing multiple wheels, you can use the following shorthand to install all built wheels:
 
 ```
-pip install <deephaven-plugins-path>/plugins/*/dist/*.whl
+
+pip install <deephaven-plugins-path>/plugins/_/dist/_.whl
+
 ```
 
 If you're reinstalling the python wheels without a version bump (generally for the purpose of development), you'll want to add the `--force-reinstall` tag. The `--no-deps` tag is also recommended as `--force-reinstall` will update all the dependencies as well, which is generally unnecessary.
 For example, on reinstalls the above command becomes
 
 ```
-pip install --force-reinstall --no-deps <deephaven-plugins-path>/plugins/*/dist/*.whl
+
+pip install --force-reinstall --no-deps <deephaven-plugins-path>/plugins/_/dist/_.whl
+
 ```
 
 ##### Start deephaven-core
 
 Finally, start up Deephaven with the appropriate js-plugin flags using the path to your deephaven-plugins repo. For example, to start with the matplotlib and plotly plugins, start the server with the following command:
 
 ```
+
 START_OPTS="-Ddeephaven.jsPlugins.@deephaven/js-plugin-matplotlib=<deephaven-plugins-path>/plugins/matploltib/src/js -Ddeephaven.jsPlugins.@deephaven/js-plugin-plotly=<deephaven-plugins-path>/plugins/plotly/src/js" ./gradlew server-jetty-app:run
+
 ```
 
 The Deephaven IDE can then be opened at http://localhost:10000/ide/, with your plugins ready to use.

docker/data/storage/layouts/demo-layout.json

@@ -1 +1,109 @@
-{"filterSets":[],"layoutConfig":[{"type":"row","height":100,"isClosable":true,"isFocusOnShow":true,"reorderEnabled":true,"title":"","content":[{"type":"stack","isClosable":true,"isFocusOnShow":true,"reorderEnabled":true,"title":"","width":47.87172011661808,"activeItemIndex":0,"content":[{"type":"react-component","component":"ConsolePanel","title":"Console","isClosable":false,"id":"EwmgpXQqE","props":{"metadata":{},"panelState":{"consoleSettings":{},"itemIds":[]}},"componentName":"lm-react-component","isFocusOnShow":true,"reorderEnabled":true,"componentState":null},{"type":"react-component","component":"LogPanel","title":"Log","isClosable":false,"id":"l9Ll30LIS8","props":{"metadata":{}},"componentName":"lm-react-component","isFocusOnShow":true,"reorderEnabled":true,"componentState":null}]},{"type":"stack","width":52.12827988338192,"isClosable":true,"isFocusOnShow":true,"reorderEnabled":true,"title":"","activeItemIndex":2,"content":[{"type":"react-component","component":"CommandHistoryPanel","title":"Command History","isClosable":false,"id":"qfsNtUkwNG","props":{"metadata":{},"panelState":{}},"componentName":"lm-react-component","isFocusOnShow":true,"reorderEnabled":true,"componentState":null},{"type":"react-component","component":"FileExplorerPanel","title":"File Explorer","isClosable":false,"id":"x0ISsm_Crj","props":{"metadata":{}},"componentName":"lm-react-component","isFocusOnShow":true,"reorderEnabled":true,"componentState":null},{"type":"react-component","component":"NotebookPanel","isFocusOnShow":false,"props":{"metadata":{"id":"KfJJtrr0G"},"panelState":{"settings":{"language":""},"fileMetadata":{"id":"/DEMO.md","itemName":"/DEMO.md"},"isPreview":true}},"title":"DEMO.md","id":"KfJJtrr0G","componentName":"lm-react-component","isClosable":true,"reorderEnabled":true,"componentState":null}]}]}],"links":[],"version":2}
+{
+  "filterSets": [],
+  "layoutConfig": [
+    {
+      "type": "row",
+      "height": 100,
+      "isClosable": true,
+      "isFocusOnShow": true,
+      "reorderEnabled": true,
+      "title": "",
+      "content": [
+        {
+          "type": "stack",
+          "isClosable": true,
+          "isFocusOnShow": true,
+          "reorderEnabled": true,
+          "title": "",
+          "width": 47.87172011661808,
+          "activeItemIndex": 0,
+          "content": [
+            {
+              "type": "react-component",
+              "component": "ConsolePanel",
+              "title": "Console",
+              "isClosable": false,
+              "id": "EwmgpXQqE",
+              "props": {
+                "metadata": {},
+                "panelState": { "consoleSettings": {}, "itemIds": [] }
+              },
+              "componentName": "lm-react-component",
+              "isFocusOnShow": true,
+              "reorderEnabled": true,
+              "componentState": null
+            },
+            {
+              "type": "react-component",
+              "component": "LogPanel",
+              "title": "Log",
+              "isClosable": false,
+              "id": "l9Ll30LIS8",
+              "props": { "metadata": {} },
+              "componentName": "lm-react-component",
+              "isFocusOnShow": true,
+              "reorderEnabled": true,
+              "componentState": null
+            }
+          ]
+        },
+        {
+          "type": "stack",
+          "width": 52.12827988338192,
+          "isClosable": true,
+          "isFocusOnShow": true,
+          "reorderEnabled": true,
+          "title": "",
+          "activeItemIndex": 2,
+          "content": [
+            {
+              "type": "react-component",
+              "component": "CommandHistoryPanel",
+              "title": "Command History",
+              "isClosable": false,
+              "id": "qfsNtUkwNG",
+              "props": { "metadata": {}, "panelState": {} },
+              "componentName": "lm-react-component",
+              "isFocusOnShow": true,
+              "reorderEnabled": true,
+              "componentState": null
+            },
+            {
+              "type": "react-component",
+              "component": "FileExplorerPanel",
+              "title": "File Explorer",
+              "isClosable": false,
+              "id": "x0ISsm_Crj",
+              "props": { "metadata": {} },
+              "componentName": "lm-react-component",
+              "isFocusOnShow": true,
+              "reorderEnabled": true,
+              "componentState": null
+            },
+            {
+              "type": "react-component",
+              "component": "NotebookPanel",
+              "isFocusOnShow": false,
+              "props": {
+                "metadata": { "id": "KfJJtrr0G" },
+                "panelState": {
+                  "settings": { "language": "" },
+                  "fileMetadata": { "id": "/DEMO.md", "itemName": "/DEMO.md" },
+                  "isPreview": true
+                }
+              },
+              "title": "DEMO.md",
+              "id": "KfJJtrr0G",
+              "componentName": "lm-react-component",
+              "isClosable": true,
+              "reorderEnabled": true,
+              "componentState": null
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "links": [],
+  "version": 2
+}

package.json

@@ -5,7 +5,7 @@
   ],
   "scripts": {
     "docker": "docker compose up --build",
-    "start": "run-p start:packages serve:plugins",
+    "start": "run-p \"start:packages -- {@}\" serve:plugins --",
     "build": "lerna run build --stream",
     "serve:plugins": "vite",
     "start:packages": "lerna run start --stream",

plugins/manifest.json

@@ -1,8 +1,20 @@
 {
   "plugins": [
-    { "name": "matplotlib", "version": "0.1.0", "main": "src/js/dist/index.js" },
-    { "name": "plotly-express", "version": "0.1.0", "main": "src/js/dist/bundle/index.js" },
-    { "name": "auth-keycloak", "version": "0.1.0", "main": "src/js/dist/index.js" },
+    {
+      "name": "matplotlib",
+      "version": "0.1.0",
+      "main": "src/js/dist/index.js"
+    },
+    {
+      "name": "plotly-express",
+      "version": "0.1.0",
+      "main": "src/js/dist/bundle/index.js"
+    },
+    {
+      "name": "auth-keycloak",
+      "version": "0.1.0",
+      "main": "src/js/dist/index.js"
+    },
     { "name": "ui", "version": "0.1.0", "main": "src/js/dist/index.js" }
   ]
 }

plugins/matplotlib/README.md

@@ -2,13 +2,15 @@
 
 The Deephaven Plugin for matplotlib. Allows for opening matplotlib plots in a Deephaven environment. Any matplotlib plot
 should be viewable by default. For example:
+
 ```python
 import matplotlib.pyplot as plt
 
 fig = plt.figure()
 ax = fig.subplots()  # Create a figure containing a single axes.
 ax.plot([1, 2, 3, 4], [4, 2, 6, 7])  # Plot some data on the axes.
 ```
+
 You can also use `TableAnimation`, which allows updating a plot whenever a Deephaven Table is updated.
 
 ## `TableAnimation` Usage
@@ -17,6 +19,7 @@ You can also use `TableAnimation`, which allows updating a plot whenever a Deeph
 is being listened to updates, the provided function will run again.
 
 ### Line Plot
+
 ```python
 import matplotlib.pyplot as plt
 from deephaven import time_table
@@ -45,7 +48,9 @@ ani = TableAnimation(fig, tt, update_fig)
 ```
 
 ### Scatter Plot
+
 Scatter plots require data in a different format that Line plots, so need to pass in the data differently.
+
 ```python
 import matplotlib.pyplot as plt
 from deephaven import time_table
@@ -82,7 +87,9 @@ ani = TableAnimation(fig, tt, update_fig)
 ```
 
 ### Multiple Series
+
 It's possible to have multiple kinds of series in the same figure. Here is an example driving a line and a scatter plot:
+
 ```python
 import matplotlib.pyplot as plt
 from deephaven import time_table
@@ -134,7 +141,7 @@ To build:
 python -m build --wheel
 ```
 
-The wheel is stored in `dist/`. 
+The wheel is stored in `dist/`.
 
 To test within [deephaven-core](https://github.com/deephaven/deephaven-core), note where this wheel is stored (using `pwd`, for example).
-Then, follow the directions in the top-level README.md to install the wheel into your Deephaven environment.
+Then, follow the directions in the top-level README.md to install the wheel into your Deephaven environment.

plugins/plotly-express/README.md

@@ -19,23 +19,27 @@ To build:
 python -m build --wheel
 ```
 
-The wheel is stored in `dist/`. 
+The wheel is stored in `dist/`.
 
 To test within [deephaven-core](https://github.com/deephaven/deephaven-core), note where this wheel is stored (using `pwd`, for example).
 Then, follow the directions in the top-level README.md to install the wheel into your Deephaven environment.
 
 To unit test, run the following command from the root of the repo:
+
 ```sh
 tox -e py
 ```
 
 ## Usage
+
 Once you have the plugin installed and the server started, the recommended way to import the package mirrors plotly express:
+
 ```python
 import deephaven.plot.express as dx
 ```
 
 Then, you can create a table (or use an existing one) and start plotting
+
 ```python
 from deephaven.column import int_col, string_col
 import deephaven.plot.express as dx
@@ -49,4 +53,4 @@ source = new_table(
 )
 
 fig = dx.bar(table=source, x="Categories", y="Values")
-```
+```

plugins/plotly/README.md

@@ -4,6 +4,7 @@ The Deephaven Plugin for Plotly. Allows for opening Plotly plots in a Deephaven
 should be viewable by default. For example:
 
 ### Scatter Plot
+
 ```python
 import plotly.express as px
 
@@ -19,6 +20,7 @@ fig = px.scatter(
 ```
 
 ### Box Plot
+
 ```python
 import plotly.express as px
 
@@ -27,7 +29,9 @@ fig = px.box(df, x="time", y="total_bill")
 ```
 
 ### Multiple Series
+
 It's possible to have multiple kinds of series in the same figure. Here is an example driving a line and a bar plot:
+
 ```python
 from plotly.subplots import make_subplots
 import plotly.graph_objects as go
@@ -45,6 +49,7 @@ fig.update_layout(title_text="Side By Side Subplots", showlegend=False)
 ```
 
 ### Plot data from a Deephaven table
+
 ```python
 from deephaven import empty_table, numpy
 import plotly.express as px
@@ -71,8 +76,7 @@ To build:
 python -m build --wheel
 ```
 
-The wheel is stored in `dist/`. 
+The wheel is stored in `dist/`.
 
 To test within [deephaven-core](https://github.com/deephaven/deephaven-core), note where this wheel is stored (using `pwd`, for example).
 Then, follow the directions in the top-level README.md to install the wheel into your Deephaven environment.
-