Normalize and test transformer handling of custom properties

CHANGELOG.md

@@ -1,13 +1,15 @@
 # Changelog
 
-> ## @jupyrdf/jupyter-elk 0.2.1
->
-> TBD
+## @jupyrdf/jupyter-elk 0.2.1
+
+- fix `ElkTransformer` handling of custom properties ([#46][])
+
+## ipyelk 0.2.1
 
-> ## ipyelk 0.2.1
->
 > TBD
 
+[#46]: https://github.com/jupyrdf/ipyelk/pull/46
+
 ---
 
 ## @jupyrdf/jupyter-elk 0.2.0

atest/Notebooks/Examples.robot

@@ -18,25 +18,30 @@ ${SCREENS}        ${SCREENS ROOT}${/}notebook-examples
     Example Should Restart-and-Run-All    ${INTRODUCTION}
     Elk Counts Should Be    &{SIMPLE COUNTS}
     Linked Elk Output Counts Should Be    &{SIMPLE COUNTS}
+    Custom Elk Selectors Should Exist    @{SIMPLE CUSTOM}
 
 01_Linking
     [Tags]    data:simple.json
     Example Should Restart-and-Run-All    ${LINKING}
     ${counts} =    Create Dictionary    n=${2}    &{SIMPLE COUNTS}
     Elk Counts Should Be    &{counts}
     Linked Elk Output Counts Should Be    &{counts}
+    Custom Elk Selectors Should Exist    @{SIMPLE CUSTOM}
 
 02_Transformer
     [Tags]    data:flat_graph.json    data:hier_tree.json    data:hier_ports.json
     Example Should Restart-and-Run-All    ${TRANSFORMER}
     Elk Counts Should Be    &{FLAT AND HIER COUNTS}
     Linked Elk Output Counts Should Be    &{FLAT COUNTS}
+    Custom Elk Selectors Should Exist    @{FLAT CUSTOM}
+    Custom Elk Selectors Should Exist    @{HIER PORT CUSTOM}
 
 03_App
     [Tags]    data:hier_tree.json    data:hier_ports.json    foo:bar
     Example Should Restart-and-Run-All    ${APP}
     Elk Counts Should Be    n=${5}    &{HIER COUNTS}
     Linked Elk Output Counts Should Be    &{HIER COUNTS}
+    Custom Elk Selectors Should Exist    @{HIER PORT CUSTOM}
 
 04_Interactive
     Example Should Restart-and-Run-All    ${INTERACTIVE}
@@ -48,13 +53,15 @@ ${SCREENS}        ${SCREENS ROOT}${/}notebook-examples
     Elk Counts Should Be    &{SIMPLE COUNTS}
     Exported SVG should be valid XML    untitled_example.svg
     Linked Elk Output Counts Should Be    &{SIMPLE COUNTS}
+    Custom Elk Selectors Should Exist    @{SIMPLE CUSTOM}
 
 06_SVG_App_Exporter
     [Tags]    data:hier_tree.json    data:hier_ports.json    feature:svg
     Example Should Restart-and-Run-All    ${APP EXPORTER}
     Elk Counts Should Be    &{HIER COUNTS}
     Exported SVG should be valid XML    untitled_stylish_example.svg
     Linked Elk Output Counts Should Be    &{HIER COUNTS}
+    Custom Elk Selectors Should Exist    @{HIER PORT CUSTOM}
 
 07_Simulation
     Example Should Restart-and-Run-All    ${SIM PLUMBING}

atest/_resources/keywords/IPyElk.robot

@@ -60,6 +60,12 @@ Exported SVG should be valid XML
     Wait Until Created    ${path}
     [Return]    XML.Parse XML    ${file}
 
+Custom Elk Selectors Should Exist
+    [Arguments]    @{selectors}
+    FOR    ${selector}    IN    @{selectors}
+        Page Should Contain Element    ${selector}
+    END
+
 Elk Counts Should Be
     [Arguments]    ${nodes}=${0}    ${edges}=${0}    ${labels}=${0}    ${ports}=${0}    ${prefix}=${EMPTY}    ${n}=${1}    ${screen}=20-counted.png
     ${found nodes} =    Get Elk Node Count    prefix=${prefix}

atest/_resources/variables/IPyElk.robot

@@ -27,12 +27,19 @@ ${CSS ELK PORT}    .elkport
 ${SIMPLE NODE COUNT}    ${10}
 ${SIMPLE EDGE COUNT}    ${14}
 ${SIMPLE LABEL COUNT}    ${SIMPLE NODE COUNT}
+@{SIMPLE CUSTOM}
+...               css:.example-data-node-class-from-simple
+...               css:.example-data-edge-class-from-simple
 #
 # from flat_graph.json
 #
 ${FLAT NODE COUNT}    ${3}
 ${FLAT EDGE COUNT}    ${3}
 ${FLAT LABEL COUNT}    ${FLAT NODE COUNT}
+${FLAT PORT COUNT}    ${1}
+@{FLAT CUSTOM}
+...               css:.example-data-node-class-from-flat
+...               css:.example-data-edge-class-from-flat
 #
 # from hier_graph.json
 #
@@ -43,6 +50,9 @@ ${HIER LABEL COUNT}    ${HIER NODE COUNT}
 # from hier_ports.json
 #
 ${HIER PORT COUNT}    ${8}
+@{HIER PORT CUSTOM}
+...               css:.example-data-node-class-from-ports
+...               css:.example-data-edge-class-from-ports
 #
 # convenience roll-ups
 #
@@ -59,8 +69,9 @@ ${HIER PORT COUNT}    ${8}
 ...               nodes=${FLAT NODE COUNT}
 ...               edges=${FLAT EDGE COUNT}
 ...               labels=${FLAT LABEL COUNT}
+...               ports=${FLAT PORT COUNT}
 &{FLAT AND HIER COUNTS}
 ...               nodes=${FLAT NODE COUNT.__add__(${HIER NODE COUNT})}
 ...               edges=${FLAT EDGE COUNT.__add__(${HIER EDGE COUNT})}
 ...               labels=${FLAT LABEL COUNT.__add__(${HIER LABEL COUNT})}
-...               ports=${HIER PORT COUNT}
+...               ports=${FLAT PORT COUNT.__add__(${HIER PORT COUNT})}

dodo.py

@@ -259,6 +259,7 @@ def _test():
             file_dep=[
                 *P.ALL_PY_SRC,
                 *P.EXAMPLE_IPYNB,
+                *P.EXAMPLE_JSON,
                 P.OK_ENV["default"],
                 P.OK_PIP_INSTALL,
                 P.OK_PREFLIGHT_KERNEL,
@@ -283,6 +284,7 @@ def _pabot_logs():
             *P.ALL_ROBOT,
             *P.ALL_PY_SRC,
             *P.EXAMPLE_IPYNB,
+            *P.EXAMPLE_JSON,
             P.OK_ROBOT_LINT,
             P.OK_PREFLIGHT_LAB,
             P.SCRIPTS / "atest.py",

examples/07_Simulation.ipynb

@@ -135,7 +135,7 @@
     "sprout_season = W.SelectionRangeSlider(description=\"🌱📆\", value=(3, 10), options=months)\n",
     "sprout_rate = W.IntSlider(10, description=\"🌱📶\")\n",
     "knobs |= {sprout_season, sprout_rate}\n",
-    "behaviors |= {(earth, \"grows\", grass)}"
+    "behaviors |= {(earth, \"grows\", grass, \"up\")}"
    ]
   },
   {
@@ -169,10 +169,10 @@
     "fawn_rate = W.FloatSlider(0.25, description=\"🦌🍼\")\n",
     "knobs |= {deer_appetite, fawn_season, fawn_rate}\n",
     "behaviors |= {\n",
-    "    (grass, \"eaten by\", deer),\n",
-    "    (deer, \"make\", poop),\n",
-    "    (deer, \"becomes\", corpses),\n",
-    "    (deer, \"reproduce\", deer),\n",
+    "    (grass, \"eaten by\", deer, \"down\"),\n",
+    "    (deer, \"make\", poop, \"up\"),\n",
+    "    (deer, \"becomes\", corpses, \"up\"),\n",
+    "    (deer, \"reproduce\", deer, \"up\"),\n",
     "}"
    ]
   },
@@ -220,11 +220,11 @@
     "pack_size = W.IntSlider(6, description=\"🐺🐺\", min_value=1)\n",
     "knobs |= {wolf_appetite, pup_season, pup_rate, pack_size}\n",
     "behaviors |= {\n",
-    "    (deer, \"eaten by\", wolves),\n",
-    "    (wolves, \"make\", poop),\n",
-    "    (corpses, \"eaten by\", wolves),\n",
-    "    (wolves, \"becomes\", corpses),\n",
-    "    (wolves, \"reproduce\", wolves),\n",
+    "    (deer, \"eaten by\", wolves, \"down\"),\n",
+    "    (wolves, \"make\", poop, \"up\"),\n",
+    "    (corpses, \"eaten by\", wolves, \"down\"),\n",
+    "    (wolves, \"becomes\", corpses, \"up\"),\n",
+    "    (wolves, \"reproduce\", wolves, \"up\"),\n",
     "}"
    ]
   },
@@ -273,7 +273,7 @@
    "outputs": [],
    "source": [
     "behaviors |= {\n",
-    "    (corpses, \"decomposes into\", earth),\n",
+    "    (corpses, \"decomposes into\", earth, \"up\"),\n",
     "}"
    ]
   },
@@ -305,7 +305,7 @@
    "outputs": [],
    "source": [
     "behaviors |= {\n",
-    "    (poop, \"decomposes into\", earth),\n",
+    "    (poop, \"decomposes into\", earth, \"up\"),\n",
     "}"
    ]
   },
@@ -379,6 +379,16 @@
     "    return re.sub(f\"(.{{,{d}}})\", r\"\\1\\n\", txt).strip().splitlines()"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def make_edge_properties(direction):\n",
+    "    return dict(properties=dict(cssClasses=direction))"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -413,8 +423,9 @@
     "                    **edge_label_options,\n",
     "                )\n",
     "            ],\n",
+    "            **make_edge_properties(direction),\n",
     "        )\n",
-    "        for eaten, text, eater in behaviors\n",
+    "        for eaten, text, eater, direction in behaviors\n",
     "        # hide a behavior if either party is empty\n",
     "        if eater.value and eaten.value\n",
     "    ]\n",
@@ -453,6 +464,11 @@
     "            \"fill\": \"transparent !important\",\n",
     "        },\n",
     "        \" .sprotty-edge\": {\"font-weight\": \"bold\"},\n",
+    "        \" .up path\": {\"stroke\": \"blue !important\", \"opacity\": \"0.7\"},\n",
+    "        \" .up .arrow\": {\"fill\": \"blue !important\", \"opacity\": \"0.7\"},\n",
+    "        \" .down path\": {\"stroke\": \"red !important\", \"opacity\": \"0.7\"},\n",
+    "        \" .down .elkedge\": {\"stroke-dasharray\": \"4\", \"opacity\": \"0.7\"},\n",
+    "        \" .down .arrow\": {\"fill\": \"red !important\", \"opacity\": \"0.7\"},\n",
     "    },\n",
     ")\n",
     "fit = ipyelk.tools.tools.FitBtn(app=elk_app)\n",

examples/flat_graph.json

@@ -10,7 +10,18 @@
       "id": "n2"
     },
     {
-      "id": "n3"
+      "id": "n3",
+      "properties": {
+        "cssClasses": "example-data-node-class-from-flat"
+      },
+      "ports": [
+        {
+          "id": "p1",
+          "properties": {
+            "cssClasses": "example-data-port-class-from-flat"
+          }
+        }
+      ]
     }
   ],
   "links": [
@@ -27,7 +38,10 @@
     {
       "source": "n2",
       "target": "n3",
-      "key": 0
+      "key": 0,
+      "properties": {
+        "cssClasses": "example-data-edge-class-from-flat"
+      }
     }
   ]
-}
+}

examples/hier_ports.json

@@ -4,7 +4,10 @@
   "graph": {},
   "nodes": [
     {
-      "id": "n0"
+      "id": "n0",
+      "properties": {
+        "cssClasses": "example-data-node-class-from-ports"
+      }
     },
     {
       "id": "n1"
@@ -47,7 +50,10 @@
       "targetPort": "x",
       "source": "n2",
       "target": "n3",
-      "key": 0
+      "key": 0,
+      "properties": {
+        "cssClasses": "example-data-edge-class-from-ports"
+      }
     },
     {
       "port": "x",
@@ -57,4 +63,4 @@
       "key": 1
     }
   ]
-}
+}

examples/hier_tree.json

@@ -4,7 +4,10 @@
   "graph": {},
   "nodes": [
     {
-      "id": "n0"
+      "id": "n0",
+      "properties": {
+        "cssClasses": "example-data-node-class-from-tree"
+      }
     },
     {
       "hidden": false,