Merge pull request #212 from JuliaDynamics/hw/inspector

improve NetworkDynamicsInspector

Author: hexaeder

.github/workflows/CompatHelper.yml

@@ -37,7 +37,14 @@ jobs:
       - name: "Run CompatHelper"
         run: |
           import CompatHelper
-          CompatHelper.main(; subdirs=["", "docs", "test", "benchmark", "NetworkDynamicsInspector"])
+          CompatHelper.main(; subdirs=[
+            "",
+            "docs",
+            "test",
+            "benchmark",
+            "NetworkDynamicsInspector",
+            "NetworkDynamicsInspector/test",
+          ])
         shell: julia --color=yes {0}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/Documentation.yaml

@@ -19,6 +19,10 @@ jobs:
       contents: write
       statuses: write
     steps:
+      - name: Install xvfb
+        run: |
+          sudo apt update
+          sudo apt install -y xvfb mesa-utils mesa-vulkan-drivers dbus x11-xserver-utils
       - uses: actions/checkout@v4
       - uses: julia-actions/setup-julia@v2
         with:
@@ -31,10 +35,26 @@ jobs:
           Pkg.develop(PackageSpec(path=pwd()))
           Pkg.instantiate()
       - uses: julia-actions/julia-buildpkg@v1
-      - uses: julia-actions/julia-docdeploy@v1
+      # - uses: julia-actions/julia-docdeploy@v1
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      #     DOCUMENTER_KEY: ${{ secrets.DOCUMENTER_KEY }}
+      #     LIBGL_ALWAYS_SOFTWARE: "1"
+      #     MESA_GL_VERSION_OVERRIDE: "4.5"
+      #     MESA_GLSL_VERSION_OVERRIDE: "450"
+      #   with:
+      #     prefix: xvfb-run
+      - name: Build docs
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           DOCUMENTER_KEY: ${{ secrets.DOCUMENTER_KEY }}
+          LIBGL_ALWAYS_SOFTWARE: "1"
+          MESA_GL_VERSION_OVERRIDE: "4.5"
+          MESA_GLSL_VERSION_OVERRIDE: "450"
+        shell: xvfb-run -a julia --project=docs --color=yes {0}
+        run: |
+          using NetworkDynamics
+          include(pkgdir(NetworkDynamics)*"/docs/make.jl")
       - name: Run doctests
         shell: julia --project=docs --color=yes {0}
         run: |

.github/workflows/tests.yml

@@ -48,10 +48,25 @@ jobs:
   Inspector-tests:
     name: NetworkDynamicsInspector.jl Tests
     runs-on: ubuntu-latest
+    env:
+      DISPLAY: ":99"
+      LIBGL_ALWAYS_SOFTWARE: "1"
+      MESA_GL_VERSION_OVERRIDE: "4.5"
+      MESA_GLSL_VERSION_OVERRIDE: "450"
     permissions: # needed to allow julia-actions/cache to proactively delete old caches that it has created
       actions: write
       contents: read
     steps:
+      - name: Install Dependencies
+        run: |
+          sudo apt update
+          sudo apt install -y xvfb mesa-utils mesa-vulkan-drivers dbus
+      - name: Start Virtual Display
+        run: |
+          Xvfb :99 -screen 0 1920x1080x24 &
+          eval $(dbus-launch)
+          export DBUS_SESSION_BUS_ADDRESS
+          export DBUS_SESSION_BUS_PID
       - uses: actions/checkout@v4
       - uses: julia-actions/setup-julia@v2
         with:
@@ -60,9 +75,11 @@ jobs:
       - uses: julia-actions/julia-buildpkg@v1
         with:
           project: NetworkDynamicsInspector
-      - uses: julia-actions/julia-runtest@v1
+      - name: Run headless test
+        uses: GabrielBB/xvfb-action@v1
         with:
-          project: NetworkDynamicsInspector
+          run: |
+            julia --project=NetworkDynamicsInspector  --color=yes -e "using Pkg; Pkg.test(coverage=false)"
       # - uses: julia-actions/julia-processcoverage@v1
       # - uses: codecov/codecov-action@v4
       #   with:

.gitignore

@@ -17,6 +17,6 @@ benchmark/*.txt
 /docs/src/assets/.auctex-auto/
 
 # ignore downloadable assets
-/NetworkDynamicsInspector/assets/jquery.js
-/NetworkDynamicsInspector/assets/select2.css
-/NetworkDynamicsInspector/assets/select2.js
+/NetworkDynamicsInspector/assets/tomselect.css
+/NetworkDynamicsInspector/assets/tomselect.js
+/NetworkDynamicsInspector/assets/tomselect.bundled.js

NetworkDynamicsInspector/Project.toml

@@ -1,12 +1,13 @@
 name = "NetworkDynamicsInspector"
 uuid = "0a4713f2-d58f-43f2-b63b-1b5d5ee4e65a"
 authors = ["Hans Würfel <git@wuerfel.io>"]
-version = "0.1.2"
+version = "0.1.3"
 
 [deps]
 Bonito = "824d6782-a2ef-11e9-3a09-e5662e0c26f8"
 ColorSchemes = "35d6a980-a343-548e-a6ea-1d62b119f2f4"
 Colors = "5ae59095-9a9b-59fe-a467-6f913c188581"
+Downloads = "f43a241f-c20a-4ad4-852c-f6b1247861c6"
 GraphMakie = "1ecd5474-83a3-4783-bb4f-06765db800d2"
 Graphs = "86223c79-3864-5bf0-83f7-82e725a168b6"
 NetworkDynamics = "22e9dc34-2a0d-11e9-0de0-8588d035468b"
@@ -15,29 +16,26 @@ OrderedCollections = "bac558e1-5e72-5ebc-8fee-abe8a469f55d"
 SciMLBase = "0bca4576-84f4-4d90-8ffe-ffa030f20462"
 WGLMakie = "276b4fcb-3e11-5398-bf8b-a0c2d153d008"
 
+[weakdeps]
+Electron = "a1bb12fb-d4d1-54b4-b10a-ee7951ef7ad3"
+
 [sources]
 NetworkDynamics = {path = ".."}
 
+[extensions]
+ElectronExt = ["Electron"]
+
 [compat]
-Aqua = "0.8.9"
 Bonito = "4.0.0"
 ColorSchemes = "3.29.0"
 Colors = "0.13.0"
-ExplicitImports = "1.10.1"
+Downloads = "1.6.0"
+Electron = "6"
 GraphMakie = "0.5.14"
 Graphs = "1.12.0"
 NetworkDynamics = "0.9.13"
 Observables = "0.5.5"
 OrderedCollections = "1.8.0"
 SciMLBase = "2.75.1"
 WGLMakie = "0.11"
-Test = "1"
 julia = "1.10"
-
-[extras]
-Aqua = "4c88cf16-eb10-579e-8560-4a9242c79595"
-ExplicitImports = "7d51a73a-1435-4ff3-83d9-f097790105c7"
-Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
-
-[targets]
-test = ["Aqua", "ExplicitImports", "Test"]

NetworkDynamicsInspector/assets/app.css

@@ -1,44 +1,58 @@
-html, body {
+html {
+    margin:0px;
+    padding:0px;
+    height: 100%;
+    width:100%;
+}
+body {
     font-family: sans-serif;
     font-size: 12px;
     height: 100%;
-    /* width: 100%; */
+    margin:0px;
+    padding:5px;
+    box-sizing: border-box;
 }
 
-.select2-container .select2-selection .select2-selection__rendered,
-.select2-container .select2-selection--single .select2-selection__rendered,
-.select2-container .select2-results__option{
-    font-family: monospace;
-    /* font-size: 20px; */
-}
-.select2-results__group {
-    font-family: sans-serif;
-    /* font-size: 12px; */
-    /* color: blue; */
+span {
+    font-size: 12px;
 }
 
 .maingrid {
     display: grid;
     grid-template-columns: min-content auto;
     width: 100%;
-    gap: 5px;
+    gap: 0px;
+}
+
+/* to keep shadows visible  at overflow hidden*/
+/* https://stackoverflow.com/questions/70802682/parents-overflowhidden-doesnt-show-childs-box-shadow */
+/* to the sides we only go +- 5 px (padding of body)*/
+.graphplot-col{
+    /* overflow: hidden; /\* otherwise axis won't shrink *\/ */
+    margin:-10px -10px -10px -5px; /* t r b l */
+    padding:10px  10px  10px  5px;
+}
+.timeseries-col{
+    overflow: hidden; /* otherwise axis won't shrink */
+    margin:-10px -5px -10px -10px; /* t r b l */
+    padding:10px  5px  10px  10px;
 }
 
 .graphplot-col, .timeseries-col, .timeseries-stack{
     display: flex;
     flex-direction: column;
-    gap: 5px;
-    /* to keep shadows visible */
-    /* https://stackoverflow.com/questions/70802682/parents-overflowhidden-doesnt-show-childs-box-shadow */
-    overflow: hidden; /* otherwise it won't shrink */
-    margin:-10px;
-    padding:10px
+    gap: 0px;
+}
+
+.bonito-card {
+    margin: 5px !important;
+    position:relative;
 }
 
 .graphplot-card {
-    height:400px; /* initial widht and height */
-    width: 400px;
-    min-width:250px;
+    height:350px; /* initial widht and height */
+    width: 350px;
+    min-width:200px;
     resize: both;
     overflow: hidden;
 }
@@ -53,7 +67,7 @@ html, body {
 .timeseries-card {
     resize: vertical;
     overflow: hidden;
-    /* grid-column: 2; */
+    position: relative; /* for close button */
 }
 .timeseries-card.active-tseries {
     box-shadow: 0 4px 8px rgba(0.0, 0.0, 51.0, 0.65);
@@ -71,6 +85,25 @@ html, body {
     flex-grow: 1;
     overflow:hidden;
 }
+button.close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    min-width: 0;
+    min-height: 0;
+    border-width: 0;
+    box-shadow: none;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+}
+button.close-button:hover{
+    box-shadow: none;
+    background-color: transparent;
+    text-shadow: 0 0 1px #000;
+}
 
 .tooltip {
     position: absolute;
@@ -110,3 +143,100 @@ button{
     font-weight: normal !important;
     font-family: sans-serif !important;;
 }
+
+
+/* Style for TomSelect elements */
+.ts-dropdown .optgroup-header{
+    font-weight: bolder;
+}
+.ts-dropdown .option{
+    font-family: monospace !important;
+}
+.ts-dropdown .option.selected{
+    background-color: #dddd;
+}
+.ts-control .item {
+    font-family: monospace;
+}
+
+.ts-control .item::before {
+    display: inline-block;
+    margin-right: 6px;
+}
+
+.ts-control {
+    padding: 5px !important;
+    padding-bottom: 3px !important;
+}
+
+
+.help-icon {
+    position: absolute;
+    /* text-shadow: 0 0 1px #999999; */
+    color: #999999;
+    top: 0px;
+    left: 0px;
+    width: 20px;
+    height: 20px;
+    min-width: 0;
+    min-height: 0;
+    border-width: 0;
+    box-shadow: none;
+    /* background-color: #333; */
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    font-size: 10px;
+    cursor: pointer;
+    display: flex; /* Use flexbox for centering */
+    align-items: center; /* Vertically center */
+    justify-content: center; /* Horizontally center */
+}
+
+.timeseries-card .help-icon {
+    display:none;
+}
+.timeseries-card.active-tseries .help-icon {
+    display:flex;
+}
+
+.tooltip.help-text {
+    position: absolute;
+    top: 5px; /* Adjust based on the size of the icon */
+    left: 5px;
+    width: 200px; /* Adjust as needed */
+    white-space: normal; /* Allow text to wrap */
+    word-wrap: break-word; /* Break long words if necessary */
+}
+
+.tooltip {
+    display: none; /* Initially hidden */
+    position: absolute;
+    background-color: rgba(51, 51, 51, 0.99); /* Slightly transparent */
+    color: white;
+    padding: 5px 5px;
+    border-radius: 5px;
+    font-size: 12px;
+    white-space: normal; /* Allow text to wrap */
+    z-index: 1000; /* Ensure it's above other elements */
+}
+
+.tooltip ul {
+    margin: 0; /* Remove extra padding for list items */
+    padding-left: 10px; /* Adjust as needed for bullet alignment */
+}
+
+.tooltip li {
+    padding-left: 0; /* Remove extra padding for list items */
+}
+
+.tooltip.gp-tooltip {
+    font-family: monospace;
+    pointer-events: none;
+    transform: translate(12px, 12px); /* Offset from cursor */
+    white-space: normal; /* Allow text to wrap */
+}
+
+.help-icon:hover + .help-text {
+    display: block; /* Show on hover */
+}