[fix] Remove global CSS rules to avoid conflicts #303 Refactored CSS to prevent global styling conflicts with downstream projects. Fixes #303

.github/dependabot.yml

@@ -11,6 +11,8 @@ updates:
       interval: "monthly"
     open-pull-requests-limit: 10
     versioning-strategy: increase-if-necessary
+    commit-message:
+      prefix: "[deps] "
   - package-ecosystem: "github-actions" # Check for GitHub Actions updates
     directory: "/" # The root directory where the Ansible role is located
     schedule:

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   qa-checks:
     name: QA-Checks
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
@@ -30,22 +30,21 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-yarn-
 
-      - name: Set up Python 3.7
+      - name: Set up Python
         uses: actions/setup-python@v5
-        with:
-          python-version: 3.7
 
       - name: Installing dependencies
         run: |
           yarn install
+          python --version
           pip install openwisp-utils[qa]
 
       - name: QA checks
         run: ./run-qa-checks
 
   build:
     name: Tests and Coverage
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
@@ -66,8 +65,31 @@ jobs:
         run: |
           yarn install
 
-      - name: Tests
-        run: yarn coverage
+      - name: Running Server
+        run: yarn start &
+
+      - name: Wait for server to be ready
+        run: npx wait-on http://localhost:8080
+
+      - name: Set up Chrome
+        uses: browser-actions/setup-chrome@v1
+
+      - name: Set up ChromeDriver
+        uses: nanasess/setup-chromedriver@v2
+
+      - name: Check chrome and chromedriver version
+        run: |
+          chrome --version
+          which chrome
+          chromedriver --version
+          which chromedriver
+
+      - name: Unit tests
+        run: yarn coverage --testPathIgnorePatterns=test/netjsongraph.browser.test.js
+
+      - name: Browser tests
+        # Test timeout set to 30 seconds in CI since it runs slower
+        run: yarn test --runInBand --testTimeout=30000 test/netjsongraph.browser.test.js
 
       - name: Coveralls
         uses: coverallsapp/github-action@master
@@ -76,7 +98,7 @@ jobs:
 
   build-and-deploy:
     name: Build and Deploy
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     if: ${{ github.event_name=='push' }}
     env:
       MAPBOX_URL_TEMPLATE: ${{ secrets.MAPBOX_URL_TEMPLATE }}

README.md

@@ -1,7 +1,7 @@
 # netjsongraph.js
 
-[![CI](https://github.com/openwisp/netjsongraph.js/workflows/netjsongraph.js%20CI%20BUILD/badge.svg?branch=master)](<[https://travis-ci.org/openwisp/netjsongraph.js](https://github.com/openwisp/netjsongraph.js/actions/workflows/ci.yml)>)
-[![Coverage Status](https://coveralls.io/repos/github/openwisp/netjsongraph.js/badge.svg?branch=gsoc2019)](https://coveralls.io/github/openwisp/netjsongraph.js?branch=gsoc2019)
+[![netjsongraph.js CI BUILD](https://github.com/openwisp/netjsongraph.js/actions/workflows/ci.yml/badge.svg)](https://github.com/openwisp/netjsongraph.js/actions/workflows/ci.yml)
+[![Coverage Status](https://coveralls.io/repos/github/openwisp/netjsongraph.js/badge.svg?branch=master)](https://coveralls.io/github/openwisp/netjsongraph.js?branch=master)
 ![Language](https://img.shields.io/badge/language-javascript-orange.svg)
 
 ![img](/docs/graph.png)
@@ -21,6 +21,29 @@ yarn install
 yarn start
 ```
 
+### Run Tests
+
+The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.
+
+Start the development server first:
+
+```
+# Required for Selenium browser tests
+yarn start
+```
+
+Then, in a separate terminal, run:
+
+```
+yarn test
+```
+
+To run a specific test suite:
+
+```
+yarn test test/netjsongraph.browser.test.js
+```
+
 ### Arguments
 
 netjsongraph.js accepts two arguments.

package.json

@@ -31,7 +31,10 @@
     "globalSetup": "./jest.global-setup.js",
     "moduleNameMapper": {
       "\\.(css)$": "identity-obj-proxy"
-    }
+    },
+    "coveragePathIgnorePatterns": [
+      "test/"
+    ]
   },
   "repository": "https://github.com/netjson/netjsongraph.js.git",
   "author": "Federico Capoano <[email protected]> (https://openwisp.io)",
@@ -51,13 +54,13 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@types/jest": "^29.5.12",
     "acorn": "^8.11.3",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "coveralls": "^3.1.1",
     "css-loader": "^7.1.2",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
@@ -68,18 +71,19 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
+    "selenium-webdriver": "^4.29.0",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.90.3",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.0.2"
   },
   "dependencies": {
-    "echarts": "^5.3.3",
-    "echarts-gl": "^2.0.8",
+    "echarts": "^5.6.0",
+    "echarts-gl": "^2.0.9",
     "kdbush": "^4.0.2",
     "leaflet": "^1.8.0",
     "leaflet.markercluster": "^1.5.3",
-    "zrender": "^5.3.2"
+    "zrender": "^5.6.1"
   }
 }

public/assets/css/example.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "iconfont";
+  src: url("../assets/fonts/iconfont.eot");
+  src: url("../assets/fonts/iconfont.eot?#iefix") format("embedded-opentype"),
+       url("../assets/fonts/iconfont.woff2") format("woff2"),
+       url("../assets/fonts/iconfont.woff") format("woff"),
+       url("../assets/fonts/iconfont.ttf") format("truetype"),
+       url("../assets/fonts/iconfont.svg#iconfont") format("svg");
+}

public/example_templates/netjson-clustering.html

@@ -13,6 +13,7 @@
     <!-- theme can be easily customized via css -->
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../assets/css/examples.css" rel="stylesheet" />
     <style type="text/css">
       #legend h4 {
         margin: 10px 0;
@@ -68,9 +69,14 @@
     </style>
   </head>
   <body>
+    <!-- Replace with the simplified container structure -->
+    <div id="njg"></div>
+
     <script type="text/javascript">
       const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
+        // Update to use the new container ID
+        el: "#njg",
         clustering: true,
         clusteringThreshold: 50,
         // set map initial state.
@@ -141,4 +147,4 @@
       map.render();
     </script>
   </body>
-</html>
+</html>

public/example_templates/netjson-dateParse.html

@@ -7,12 +7,12 @@
     <!-- theme can be easily customized via css -->
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../assets/css/examples.css" rel="stylesheet" />
     <style>
       .njg-date {
         height: fit-content;
         text-align: center;
       }
-
       @media only screen and (max-width: 850px) {
         .njg-date {
           width: 100vw;
@@ -21,16 +21,22 @@
       }
     </style>
   </head>
-
   <body>
+    <!-- Add the container structure as recommended -->
+    <div id="njg">
+      <!-- Graph will be rendered here -->
+    </div>
+
     <script type="text/javascript">
       /*
         The demo is used to show the use of the `dataParse` function.
         You can set the node or link property value `time`, we will call this function to parse the string in the element details defaultly.
         Of course you can also call directly.
-    */
+      */
       // `graph` render defaultly.
       const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
+        // Update the container target to use the new structure
+        el: "#njg",
         // Convert to internal json format，add `time` field.
         prepareData: (data) => {
           data.nodes.map((node) => {
@@ -46,9 +52,7 @@
           });
         },
       });
-
       graph.render();
-
       (function addDateParse(_this) {
         const dateNode = document.createElement("span"),
           // Try to call the function directly.
@@ -58,12 +62,11 @@
             parseRegular:
               /^([1-9]\d{3})-(\d{1,2})-(\d{1,2})T(\d{1,2}):(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?Z$/,
           });
-
         dateNode.setAttribute("title", dateResult);
         dateNode.setAttribute("class", "njg-date");
         dateNode.innerHTML = "Incoming Time: " + dateResult;
         _this.el.appendChild(dateNode);
       })(graph);
     </script>
   </body>
-</html>
+</html>

public/example_templates/netjson-multipleInterfaces.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>netjsongraph.js: basic example</title>
@@ -7,20 +7,33 @@
     <!-- theme can be easily customized via css -->
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../assets/css/examples.css" rel="stylesheet" />
   </head>
   <body>
+    <div id="njg">
+      <!-- This is the main container  -->
+      <div class="njg-relativePosition"></div>
+
+      <!-- Loading container  -->
+      <div id="loadingContainer">
+        <div class="loadingElement">
+          <div class="loadingSprite"></div>
+          <div class="loadingTip">Loading...</div>
+        </div>
+      </div>
+    </div>
+
     <script type="text/javascript">
       /*
-            The demo is used to show how to deal with the `multiple interfaces` in the NetJSON data.
-            We provide a work file to process the data before rendering. 
-            This file provides functions to remove dirty data, deduplicate, handle multiple interfaces, add node links, add flatNodes and so on.
-            You can also define related files yourself.
-        */
-      // `graph` render defaultly.
+        The demo is used to show how to deal with the `multiple interfaces` in the NetJSON data.
+        We provide a work file to process the data before rendering. 
+        This file provides functions to remove dirty data, deduplicate, handle multiple interfaces, 
+        add node links, add flatNodes and so on.
+      */
       const graph = new NetJSONGraph(
         "../assets/data/netjson-multipleInterfaces.json",
         {
-          // Asynchronous processing of incoming data formats using WebWorker file.
+          el: "#njg",
           dealDataByWorker: "../lib/js/netjsonWorker.js",
         },
       );