Rework stylesheet and add gulp task for generate icons.ts and update yaml file

Author: anamone26

.github/workflows/publish.yml

@@ -71,7 +71,6 @@ jobs:
           name: ${{ matrix.id }}
           path: |
             src-tauri/target/**/release/bundle/dmg/*.dmg
-            src-tauri/target/**/release/bundle/macos/*.app
           if-no-files-found: warn
 
       - name: Upload Linux bundles
@@ -113,6 +112,27 @@ jobs:
       - name: Show collected files
         run: find release-assets -type f | sort
 
+      - name: Sort files into OS folders
+        run: |
+          mkdir -p \
+            release-assets/by-os/macos \
+            release-assets/by-os/linux \
+            release-assets/by-os/windows
+
+          find release-assets/macos-aarch64 -type f \( -name '*.dmg' \) -exec cp {} release-assets/by-os/macos/ \;
+          find release-assets/linux -type f \( -name '*.AppImage' -o -name '*.deb' -o -name '*.rpm' \) -exec cp {} release-assets/by-os/linux/ \;
+          find release-assets/windows -type f \( -name '*.msi' -o -name '*.exe' \) -exec cp {} release-assets/by-os/windows/ \;
+
+      - name: Show sorted files
+        run: find release-assets/by-os -type f | sort
+
+      - name: Create per-OS archives
+        run: |
+          cd release-assets/by-os
+          zip -r ../spcd3-macos.zip macos
+          zip -r ../spcd3-linux.zip linux
+          zip -r ../spcd3-windows.zip windows
+
       - name: Create or update draft release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -139,4 +159,4 @@ jobs:
         run: |
           VERSION=$(node -p "require('./package.json').version")
           TAG="app-v$VERSION"
-          find release-assets -type f -print0 | xargs -0 gh release upload "$TAG" --clobber
+          find release-assets -maxdepth 1 -type f -name 'spcd3-*.zip' -print0 | xargs -0 gh release upload "$TAG" --clobber

README.md

@@ -1,4 +1,3 @@
-
 # Steerable Parallel Coordinates in D3 (SPCD3)
 
 SPCD3 is an open-source JavaScript library which implements a
@@ -17,6 +16,7 @@ deployment can be found at
 ## Dependencies
 
 The SPCD3 library uses the following D3v7 modules:
+
 - d3-dsv
 - d3-selection
 - d3-drag
@@ -26,25 +26,23 @@ The SPCD3 library uses the following D3v7 modules:
 - d3-transition
 
 In addition to D3, the following JavaScript libraries are used:
- - [Mini SVG data: URI](https://github.com/tigt/mini-svg-data-uri#readme):
-   To convert SVGs into data URIs.
- - [xml-formatter](https://github.com/chrisbottin/xml-formatter#readme):
-   To prettify the SVG file of the parallel coordinate plot for download.
+
+- [Mini SVG data: URI](https://github.com/tigt/mini-svg-data-uri#readme):
+  To convert SVGs into data URIs.
+- [xml-formatter](https://github.com/chrisbottin/xml-formatter#readme):
+  To prettify the SVG file of the parallel coordinate plot for download.
 
 The task runner [Gulp](https://gulpjs.com/) is used to automate
 repeatable tasks and [Rollup](https://rollupjs.org/)
 is used to bundle and build the library.
 
-
-
 ## Getting Started
 
 ### Prerequisites
 
 Open terminal and execute the following command to install all the dependencies:
 
-
-``` 
+```
 yarn
 ```
 
@@ -57,6 +55,7 @@ defines four public tasks:
 
 `clean` removes the existing `dist/` directory in
 order to enable a clean rebuild of the project:
+
 ```
 npx gulp clean
 ```
@@ -66,6 +65,7 @@ npx gulp clean
 `cleanAll` restores the project folder to its virgin state,
 by deleting the existing `dist/`, `package/` and `node_modules/` directories
 and the `yarn.lock` file:
+
 ```
 npx gulp cleanAll
 ```
@@ -75,16 +75,19 @@ npx gulp cleanAll
 `build` creates a new build of the library in three formats (CJS, ESM, IIFE)
 and stores the generated library packages into the `dist/library/` folder.
 Additionally, the example folder is copied to `dist/example/`:
+
 ```
 npx gulp build
 ```
+
 To run the example, a live web server must be started in the
 folder `dist/example/`.
 
 <br/>
 
 `dev` executes the build task, and then additionally executes a private task
 called watcher, which starts a live web server in the `dist/example/` folder:
+
 ```
 npx gulp dev
 ```
@@ -94,18 +97,16 @@ npx gulp dev
 Each of the public Gulp tasks can also be invoked by running the
 equivalent yarn script defined in `package.json`.
 
-
-
 ### Build a native desktop app
 
 Prerequisites: To build a native desktop app, Rust, Cargo and Tauri 2.0 needs to be installed.
 
 `tauri` builds a native desktop app with Tauri 2.0 and copies the executable to `package/`:
+
 ```
 npx gulp tauri
 ```
 
-
 ## Usage
 
 As mentioned in the beginning, an example was implemented to show how
@@ -119,8 +120,10 @@ An example application was built to illustrate the use of the SPCD3
 library. It is described in the [Example Application
 Guide](./README-EXAMPLE.md).
 
-
-
+Note: SPCD3 includes its own [`reset.css`](./src/lib/reset.css), which is
+imported by the library together with [`stylesheet.css`](./src/lib/stylesheet.css).
+This means the library also applies baseline reset styles to standard HTML
+elements.
 
 ## Data-Handling
 
@@ -131,16 +134,11 @@ numerical. Three example datasets can be found in folder
 [data](./src/example/data/). Other datasets should have the same
 structure.
 
-
-
 ## License
 
 SPCD3 is distributed under the MIT License. See [LICENSE](LICENSE) for
 more information.
 
-
-
-
 ## Contributors
 
 - Keith Andrews [kandrews@iicm.edu](mailto:kandrews@iicm.edu?subject=Rslidy)  
@@ -151,5 +149,3 @@ more information.
 
 - Philipp Drescher, Jeremias Kleinschuster, Sebastian Schreiner, Burim Vrella  
   InfoVis SS 2023 G1
-
-

gulp-tasks/generate-icons.js

@@ -0,0 +1,63 @@
+const fs = require("fs");
+const path = require("path");
+
+const ICON_SVG_DIR = path.resolve(__dirname, "../src/lib/icons/svg");
+const OUTPUT_FILE = path.resolve(__dirname, "../src/lib/icons/icons.ts");
+
+const ICON_MANIFEST = [
+  ["getArrowBottomCursor", "arrow-bottom-cursor.svg"],
+  ["getArrowBottom", "arrow-bottom.svg"],
+  ["getArrowBottomActive", "arrow-bottom-active.svg"],
+  ["getArrowDown", "arrow-down.svg"],
+  ["getArrowDownCursor", "arrow-down-cursor.svg"],
+  ["getArrowLeftAndRight", "arrow-left-and-right.svg"],
+  ["getArrowLeft", "arrow-left.svg"],
+  ["getArrowRight", "arrow-right.svg"],
+  ["getArrowTopAndBottom", "arrow-top-and-bottom.svg"],
+  ["getArrowTopCursor", "arrow-top-cursor.svg"],
+  ["getArrowTop", "arrow-top.svg"],
+  ["getArrowTopActive", "arrow-top-active.svg"],
+  ["getArrowUp", "arrow-up.svg"],
+  ["getArrowUpCursor", "arrow-up-cursor.svg"],
+  ["getRefreshIcon", "refresh.svg"],
+  ["getTableIcon", "table.svg"],
+  ["getExpandToolbarIcon", "toolbar_expand.svg"],
+  ["getCollapseToolbarIcon", "toolbar_collapse.svg"],
+  ["getResetIcon", "reset.svg"],
+  ["getDownloadButton", "download.svg"],
+];
+
+function readSvg(filename) {
+  const filePath = path.join(ICON_SVG_DIR, filename);
+  const svg = fs.readFileSync(filePath, "utf8").replace(/\r\n/g, "\n").trim();
+
+  if (filename === "toolbar_expand.svg" || filename === "toolbar_collapse.svg") {
+    return svg.replace('viewBox="0 0 6 6"', 'viewBox="0 -0.5 6 6"');
+  }
+
+  return svg;
+}
+
+function createIconModule() {
+  const lines = [
+    "// This file is auto-generated by `gulp icons`.",
+    "// Edit the SVG files in `src/lib/icons/svg` instead.",
+    "",
+  ];
+
+  ICON_MANIFEST.forEach(([exportName, filename]) => {
+    lines.push(`export function ${exportName}(): string {`);
+    lines.push(`  return ${JSON.stringify(readSvg(filename))};`);
+    lines.push("}");
+    lines.push("");
+  });
+
+  return `${lines.join("\n").trimEnd()}\n`;
+}
+
+function generateIcons(done) {
+  fs.writeFileSync(OUTPUT_FILE, createIconModule());
+  done();
+}
+
+module.exports = { generateIcons };

gulpfile.js

@@ -3,6 +3,7 @@ const del = require("del");
 const { bundle } = require("./gulp-tasks/bundle");
 const { watcher } = require("./gulp-tasks/watch");
 const { tauriBuild } = require("./gulp-tasks/tauri");
+const { generateIcons } = require("./gulp-tasks/generate-icons");
 const path = require("path");
 const fs = require("fs");
 const ts = require("gulp-typescript");
@@ -45,6 +46,7 @@ function copyLibFileToExample() {
 }
 
 exports.clean = cleanDistFolder;
+exports.icons = generateIcons;
 
 exports.cleanAll = parallel(
   cleanDistFolder,
@@ -55,6 +57,7 @@ exports.cleanAll = parallel(
 
 exports.build = series(
   cleanDistFolder,
+  generateIcons,
   buildExampleTS,
   copyExampleFolder,
   bundle,

package.json

@@ -12,6 +12,7 @@
     "clean": "npx gulp clean",
     "build": "npx gulp build",
     "dev": "npx gulp dev",
+    "icons": "npx gulp icons",
     "tauri": "npx gulp tauri"
   },
   "repository": "git+https://github.com/tugraz-isds/spcd3",

src/example/index.html

@@ -22,9 +22,11 @@
 
   <body>
     <header>
-      <h1>Steerable Parallel Coordinates</h1>
-      <div id="repolink">
-        An Example of <a href="https://github.com/tugraz-isds/spcd3">SPCD3</a>
+      <div class="page-header-row">
+        <h1>Steerable Parallel Coordinates</h1>
+        <div id="repolink">
+          An Example of <a href="https://github.com/tugraz-isds/spcd3">SPCD3</a>
+        </div>
       </div>
     </header>
 
@@ -66,8 +68,7 @@ <h1>Steerable Parallel Coordinates</h1>
       </button>
     </div>
 
-    <div id="parallelcoords"></div>
-    <div id="border"></div>
+    <div id="spcd3-parallelcoords"></div>
 
     <div id="bottom-controls">
       <div id="hideDimensionContainer" class="item1"></div>

src/example/main.ts

@@ -1245,7 +1245,7 @@ function generateDropdownForSelectRecords() {
 }
 
 function clearPlot() {
-  const parentElement = elementById<HTMLElement>("parallelcoords");
+  const parentElement = elementById<HTMLElement>("spcd3-parallelcoords");
   const invertContainer = elementById<HTMLElement>("invDimensionContainer");
   const hideContainer = elementById<HTMLElement>("hideDimensionContainer");
   const moveContainer = elementById<HTMLElement>("moDimensionContainer");