Minimal RetroLab support (#72)

.binder/environment.yml

@@ -77,6 +77,7 @@ dependencies:
   - pillow
   - pypdf2
   - requests_cache
+  - retrolab
   # building
   - pip
   - twine

.github/environment.yml

@@ -35,6 +35,7 @@ dependencies:
   - pillow
   - pypdf2
   - requests_cache
+  - retrolab
   # building
   - pip
   - twine

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 #### @deathbeds/ipydrawio 1.1.2
 
+- minimal support for RetroLab [#72]
+
 #### @deathbeds/ipydrawio-notebook 1.1.2
 
 #### @deathbeds/ipydrawio-webpack 15.7.300
@@ -18,6 +20,8 @@
 
 #### @deathbeds/ipydrawio-pdf 1.1.2
 
+[#72]: https://github.com/deathbeds/ipydrawio/issues/72
+
 ## Releases
 
 ### ipydrawio 1.1.1

README.md

@@ -25,12 +25,14 @@ pip install ipydrawio[all]
 ## Features
 
 - `ipydrawio`
+  - full support for JupyterLab
+  - best-effort support for JupyterLiteⓁ and RetroLabⓡ
   - Edit multi-page [documents][]
     - with nearly the same UI and features as [diagrams.net][drawio]
     - in many file formats
       - Drawio/mxgraph XML, SVG, PNG
-      - or Jupyter Notebooks
-    - with all the Drawio templates
+      - or Jupyter Notebooksⓡ
+    - with all the Drawio templatesⓡ
       - plus some Jupyter ones
   - Jupyter [rich display][] output
   - Jupyter [Widgets][]
@@ -40,7 +42,7 @@ pip install ipydrawio[all]
       known yet)
     - no presence indicators for other editors
 - `ipydrawio-export`
-  - Export print-quality PDF from diagrams
+  - Export print-quality PDF from diagramsⓁⓡ
     - optionally include editable Drawio XML as a PDF attachment
     - > _BEWARE: some **heavy**, maybe fragile dependencies, `mamba`
       > recommended_
@@ -50,6 +52,8 @@ pip install ipydrawio[all]
       pip install ipydrawio ipydrawio-export
       ```
 
+> ⓡ: unavailable in RetroLab Ⓛ: unavailable in JupyterLite
+
 ## Examples
 
 |                                                        Note | Screenshot/Example               |

atest/_Keywords.robot

@@ -268,7 +268,6 @@ Clean Up After Working With File
     [Arguments]    ${file}
     Remove File    ${OUTPUT DIR}${/}home${/}${file}
     Reset Application State
-    Lab Log Should Not Contain Known Error Messages
 
 Wait For Dialog
     Wait Until Page Contains Element    ${DIALOG WINDOW}    timeout=180s
@@ -331,3 +330,10 @@ Launch Custom Diagram
 Accept Custom Options
     Click Element    ${CSS ACCEPT CUSTOM}
     Wait Until Element is Visible    ${CSS DIO IFRAME}    timeout=20s
+
+Wait for a Diagram to be Ready
+    ${doc id} =    Get Element Attribute    ${CSS DIO READY}    id
+    Select Frame    ${CSS DIO IFRAME}
+    Double Click Element    ${CSS DIO BG}
+    Capture Page Screenshot    00-launched.png
+    [Return]    ${doc id}

atest/_Variables.robot

@@ -47,7 +47,8 @@ ${JLAB XP CLOSE SETTINGS}    ${JLAB XP DOCK TAB}\[contains(., 'Settings')]/*[con
 # launcher
 ${XP LAUNCH TAB}    ${JLAB XP DOCK TAB}//*[contains(text(), 'Launcher')]
 ${CSS LAUNCHER}    css:.jp-Launcher-body
-${CSS LAUNCH DIO}    css:.jp-LauncherCard[title='Create a blank .dio file'] svg
+${CREATE A BLANK}    Create a blank .dio file
+${CSS LAUNCH DIO}    css:.jp-LauncherCard[title='${CREATE A BLANK}'] svg
 ${CSS LAUNCH CUSTOM}    css:.jp-LauncherCard[title='Create a diagram with customized formats, templates, and UI'] svg
 # ipykernel 5 is "Python 3". ipykernel 6 is "Python 3 (ipykernel)"... but only works on python 3.7+
 # TODO: consider capturing this information as a tag
@@ -94,3 +95,5 @@ ${XP DIO FORMAT PANE VISIBLE}    ${XP DIO FORMAT PANE}\[not(contains(@style, 'di
 ${XP DIO PAGE SIZE}    //div[contains(@class, "geFormatSection")][contains(., "Paper Size")]//select
 # mime
 ${MIME STDERR}    application/vnd.jupyter.stderr
+# retro
+${CSS RETRO TREE DIO BTN}    css:button[title='${CREATE A BLANK}']

atest/lab/Formats.robot

@@ -83,10 +83,7 @@ Validate Export Format
 
 Prepare a Diagram for Export
     Launch Untitled Diagram
-    ${doc id} =    Get Element Attribute    ${CSS DIO READY}    id
-    Select Frame    ${CSS DIO IFRAME}
-    Double Click Element    ${CSS DIO BG}
-    Capture Page Screenshot    00-launched.png
+    ${doc id} =    Wait for a Diagram to be Ready
     [Return]    ${doc id}
 
 Add a Shape to a Diagram

atest/retro/Edit.robot

@@ -0,0 +1,25 @@
+# Copyright 2021 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     tree tests
+Resource          ./_Keywords.robot
+Resource          ../_Variables.robot
+
+*** Test Cases ***
+New Diagram
+    [Documentation]    Does the the tree button work?
+    Create a Diagram from Retro Tree
+    Open Retro Path    untitled.dio
+    Wait Until Keyword Succeeds    5x    5s    Wait for a Diagram to be Ready

atest/retro/Smoke.robot

@@ -0,0 +1,22 @@
+# Copyright 2021 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     smoke tests
+Resource          ./_Keywords.robot
+
+*** Test Cases ***
+Smoke
+    [Documentation]    Does the app even load?
+    Capture Page Screenshot    00-smoke.png

atest/retro/Tree.robot

@@ -0,0 +1,23 @@
+# Copyright 2021 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     tree tests
+Resource          ./_Keywords.robot
+Resource          ../_Variables.robot
+
+*** Test Cases ***
+New Diagram
+    [Documentation]    Does the the tree button work?
+    Create a Diagram from Retro Tree

atest/retro/_Keywords.robot

@@ -0,0 +1,39 @@
+# Copyright 2021 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     A work-in-progress set of keywords for RetroLab
+Library           SeleniumLibrary
+Resource          ../_Keywords.robot
+
+*** Keywords ***
+Setup Server and Retro Browser
+    Setup Server and Browser
+    Set Screenshot Directory    ${OUTPUT DIR}${/}retro
+    Open Retro Tree
+
+Open Retro Tree
+    Go To    ${URL}retro/tree
+    Wait Until Page Contains Element    css:#main
+    Sleep    1s
+
+Open Retro Path
+    [Arguments]    ${path}
+    Go To    ${URL}retro/edit/${path}
+
+Create a Diagram from Retro Tree
+    Wait Until Page Contains Element    ${CSS RETRO TREE DIO BTN}
+    Click Element    ${CSS RETRO TREE DIO BTN}
+    Switch Window    NEW
+    Wait Until Keyword Succeeds    5x    5s    Wait for a Diagram to be Ready

atest/retro/__init__.robot

@@ -0,0 +1,23 @@
+# Copyright 2021 ipydrawio contributors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#                 http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+*** Settings ***
+Documentation     Retro
+Force Tags        os:${OS.lower()}    py:${PY}    app:retro
+Resource          ../_Keywords.robot
+Resource          ./_Keywords.robot
+Resource          ../_Variables.robot
+Suite Setup       Setup Server and Retro Browser
+Suite Teardown    Tear Down Everything
+Test Setup        Open Retro Tree

demo/jupyter_lite_config.json

@@ -1,6 +1,5 @@
 {
   "LiteBuildConfig": {
-    "apps": ["lab"],
     "contents": ["."],
     "federated_extensions": [
       "../py_packages/ipydrawio/dist/ipydrawio-1.1.2-py3-none-any.whl",
@@ -13,7 +12,7 @@
       "https://github.com/conda-forge/releases/releases/download/noarch/wxyz_svg-0.5.1-pyhd8ed1ab_0.tar.bz2/wxyz_svg-0.5.1-pyhd8ed1ab_0.tar.bz2"
     ],
     "ignore_contents": [
-      "(lab/|_output|.gitignore|doit.db|\\.json$|jupyter_config|log$|\\.cache)"
+      "(lab/|_output|.gitignore|doit.db|\\.json$|jupyter_config|log$|\\.cache|\\.ipynb_checkpoints)"
     ],
     "ignore_sys_prefix": true,
     "lite_dir": ".",

docs/_templates/demo.html

@@ -9,10 +9,15 @@
     id="demo-room-button"
   >
     <i class="fas fa-lightbulb"></i>
-    Try <strong>IPyDrawio</strong> Now <span id="demo-room-label"></span>
+    Try <strong>IPyDrawio</strong> Now <span id="demo-room-label"></span> <span id="demo-app-label"></span>
   </a>
   <details>
-    <summary><i class="fas fa-users"></i>Collaboration...</summary>
+    <summary><i class="fas fa-flask"></i> App...</summary>
+    <input type="checkbox" id="demo-app"></input>
+    <em>Use RetroLab (some features disabled)</em>
+  </details>
+  <details>
+    <summary><i class="fas fa-users"></i> Collaboration...</summary>
     <input type="text" placeholder="room name" id="demo-room-name"></input><br/>
     <em>everyone who uses this room name will be able to edit all files</em>
   </details>
@@ -29,14 +34,20 @@
   <hr/>
   <em>Powered by <a href="https://jupyterlite.rtfd.io" target="_blank">JupyterLite</a></em>
   <script>$(function() {
-    $('[data-toggle="tooltip"]').tooltip();
-    $("#demo-room-name").on('input', () => {
+    const labUrl = `{{ pathto('demo/index') }}`;
+    const retroUrl = `{{ pathto('demo/retro/index') }}`;
+    function updateUrl() {
       const room = $("#demo-room-name").val().trim();
+      const useRetro = $("#demo-app").prop("value") === "on";
       $("#demo-room-button").attr(
         "href",
-        `{{ pathto('demo/index') }}` + (room ? `?room=${room}` : '')
+        (useRetro ? retroUrl : labUrl) + (room ? `?room=${room}` : '')
       );
+      $("#demo-app-label").text(useRetro ? ` in RetroLab` : '');
       $("#demo-room-label").text(room ? ` with ${room}` : '');
-    });
+    }
+    $('[data-toggle="tooltip"]').tooltip();
+    $('#demo-app').on('change', updateUrl);
+    $("#demo-room-name").on('input', updateUrl);
   });</script>
 </div>

docs/conf.py

@@ -67,7 +67,10 @@
 myst_heading_anchors = 3
 suppress_warnings = ["autosectionlabel.*"]
 
-rediraffe_redirects = {"demo/index": "_static/lab/index"}
+rediraffe_redirects = {
+    "demo/index": "_static/lab/index",
+    "demo/retro/index": "_static/retro/tree/index",
+}
 
 # files
 templates_path = ["_templates"]

docs/environment.yml

@@ -50,6 +50,7 @@ dependencies:
   - pillow
   - pypdf2
   - requests_cache
+  - retrolab
   # building
   - pip
   - twine

dodo.py

@@ -288,7 +288,10 @@ def task_lint():
         yield P._ok(
             dict(
                 name="prettier",
-                file_dep=[P.YARN_INTEGRITY, *P.ALL_PRETTIER],
+                file_dep=[
+                    P.YARN_INTEGRITY,
+                    *[p for p in P.ALL_PRETTIER if P != P.DEMO_CONFIG],
+                ],
                 actions=[[*prettier_args, *P.ALL_PRETTIER]],
             ),
             P.OK_PRETTIER,
@@ -384,15 +387,14 @@ def task_lint():
         P.OK_RFLINT,
     )
 
-    # TODO: try to get this back
-    # yield P._ok(
-    #     dict(
-    #         name="robot:dryrun",
-    #         file_dep=[*P.ALL_ROBOT, P.OK_RFLINT],
-    #         actions=[[*P.PYM, "scripts.atest", "--dryrun"]],
-    #     ),
-    #     P.OK_ROBOT_DRYRUN,
-    # )
+    yield P._ok(
+        dict(
+            name="robot:dryrun",
+            file_dep=[*P.ALL_ROBOT, P.OK_RFLINT],
+            actions=[[*P.PYM, "scripts.atest", "--dryrun"]],
+        ),
+        P.OK_ROBOT_DRYRUN,
+    )
 
 
 def task_build():
@@ -916,8 +918,7 @@ def task_test():
 
     if not P.TESTING_IN_CI:
         file_dep += [
-            # TODO: try to get this back
-            # P.OK_ROBOT_DRYRUN,
+            P.OK_ROBOT_DRYRUN,
             P.DEMO_HASHES,
             *P.OK_SERVEREXT.values(),
         ]

packages/ipydrawio-notebook/src/plugin.ts

@@ -16,6 +16,7 @@
 
 import { JupyterLab, JupyterFrontEndPlugin } from '@jupyterlab/application';
 
+import { PageConfig } from '@jupyterlab/coreutils';
 import { drawioPlainIcon, IDiagramManager } from '@deathbeds/ipydrawio';
 
 import { CommandIds, PLUGIN_ID } from './tokens';
@@ -39,6 +40,13 @@ function activate(
   diagrams: IDiagramManager,
   notebooks: INotebookTracker
 ) {
+  if (PageConfig.getOption('retroPage')) {
+    console.warn('Unavailable in', app.name, ':', ALL_FORMATS[0].factoryName);
+    console.info(
+      'Please open a full JupyterLab from View -> Open with JupyterLab'
+    );
+    return;
+  }
   for (const format of ALL_FORMATS) {
     diagrams.addFormat(format);
   }