Merge pull request #1 from w-gao/feat/use-preact

feat: new UI system

.eslintrc.json

@@ -14,7 +14,7 @@
     ],
     "rules": {
         "prettier/prettier": "warn",
-        "@typescript-eslint/naming-convention": "warn",
+        "@typescript-eslint/naming-convention": "off",
         "curly": "warn",
         "eqeqeq": "warn",
         "no-throw-literal": "warn"

.github/workflows/deploy.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Run prebuild script
-        run: ./prebuild.sh
+        run: ./scripts/prebuild.sh
       - name: Build core
         run: yarn core:build
       - name: Build web

.stylelintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "selector-class-pattern": null,
+    "custom-property-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "scss/at-function-pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
+    "scss/at-mixin-pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
+    "scss/dollar-variable-pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
+    "scss/no-duplicate-dollar-variables": true,
+    "scss/selector-no-redundant-nesting-selector": true,
+    "scss/no-global-function-names": null
+  }
+}

Dockerfile

@@ -28,8 +28,8 @@ RUN wget -O /usr/local/bin/vg "https://github.com/vgteam/vg/releases/download/${
 EXPOSE 8000
 
 # Set up nginx
-COPY docker/nginx.conf /etc/nginx/sites-enabled/default
-COPY docker/start.sh start.sh
+COPY scripts/docker/nginx.conf /etc/nginx/sites-enabled/default
+COPY scripts/docker/start.sh start.sh
 
 # Copy over build files
 COPY ./packages/web/dist ./ui

README.md

@@ -81,7 +81,7 @@ requirements:
 
 ```
 - Node.js >= 16
-- Yarn
+- Yarn < 2
 - Python >= 3.8
 ```
 
@@ -96,7 +96,7 @@ Then, build the project:
 
 ```console
 # Run the prebuild script.
-# Note: this requires curl and ed, which might not be available on Windows.
+# Note: this script requires curl.
 ./prebuild.sh
 
 # Build core package.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgv",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -15,7 +15,8 @@
     "web:preview": "yarn workspace @pgv/web preview --port 8000",
     "core:dev": "yarn workspace @pgv/core dev",
     "core:build": "yarn workspace @pgv/core build",
-    "lint": "eslint 'packages/**/{src,__tests__}/**/*.{js,jsx,ts,tsx}'",
+    "lint:ts": "eslint 'packages/**/{src,__tests__}/**/*.{js,jsx,ts,tsx}'",
+    "lint:css": "stylelint --allow-empty-input 'packages/**/src/**/*.{css,scss}'",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },
@@ -27,6 +28,8 @@
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.3",
+    "stylelint": "^15.4.0",
+    "stylelint-config-standard-scss": "^7.0.1",
     "typescript": "^4.9.4",
     "vitest": "^0.27.3"
   }

packages/web/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@pgv/web",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "author": "William Gao <wlgao@ucsc.edu>",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "postbuild": "node ../../scripts/postbuild.js",
     "preview": "vite preview"
   },
   "devDependencies": {
     "@pgv/core": "0.0.1",
+    "@preact/preset-vite": "^2.5.0",
+    "@preact/signals-core": "^1.2.3",
     "@types/three": "^0.148.0",
     "d3": "^5.9.2",
     "d3-selection-multi": "^1.0.1",
+    "preact": "^10.13.2",
+    "sass": "^1.60.0",
     "three": "^0.148.0",
-    "vite": "^4.0.0"
+    "vite": "^4.2.0"
   }
 }

packages/web/src/config.ts

@@ -0,0 +1,62 @@
+export type RepoConfig = {
+    type: "demo" | "api"
+    id: string
+    name: string
+    config?: any
+}
+
+export type Config = {
+    /**
+     * Enable debug logging, etc.
+     */
+    debug: boolean
+
+    /**
+     * Whether the app is embedded in another webpage or not. Set to true to
+     * hide components like the footer.
+     */
+    embedded: boolean
+
+    /**
+     * List of repository configurations.
+     */
+    repos: RepoConfig[]
+
+    /**
+     * The layout engine.
+     */
+    layout: "tubemap"
+
+    /**
+     * The renderer.
+     */
+    renderer: "three"
+}
+
+export function setDefaultOptions(config?: Partial<Config>): Config {
+    if (config === undefined) {
+        config = {}
+    }
+
+    if (config.debug === undefined) {
+        config.debug = false
+    }
+
+    if (config.embedded === undefined) {
+        config.embedded = false
+    }
+
+    if (config.repos === undefined) {
+        config.repos = []
+    }
+
+    if (config.layout === undefined) {
+        config.layout = "tubemap"
+    }
+
+    if (config.renderer === undefined) {
+        config.renderer = "three"
+    }
+
+    return config as Config
+}

packages/web/src/layout/index.ts

@@ -1,15 +1,5 @@
-import { Graph } from "@pgv/core/src/model/vg"
-import { PGVGraph } from "@pgv/core/src/model/pgv"
-
 /**
- * An interface for the graph layout algorithm.
+ * Variation graph layout algorithms.
  */
-export interface ILayout {
-    name: string
-
-    // Apply layout to the input graph.
-    apply(g: Graph): PGVGraph
-
-    // If applicable, reset layout.
-    reset(): void
-}
+export * from "./layout"
+export * from "./tubemap"

packages/web/src/layout/layout.ts

@@ -0,0 +1,15 @@
+import { Graph } from "@pgv/core/src/model/vg"
+import { PGVGraph } from "@pgv/core/src/model/pgv"
+
+/**
+ * An interface for the graph layout algorithm.
+ */
+export interface ILayout {
+    name: string
+
+    // Apply layout to the input graph.
+    apply(g: Graph): PGVGraph
+
+    // If applicable, reset layout.
+    reset(): void
+}

packages/web/src/layout/tubemap.ts

@@ -2,14 +2,18 @@ import { Graph } from "@pgv/core/src/model/vg"
 import { PGVGraph, PGVNode } from "@pgv/core/src/model"
 import { ILayout } from "."
 import { createLayout, vgExtractNodes, vgExtractTracks } from "../lib/tubemap"
+import { UI } from "../ui"
 
 /**
  * Use sequence-tube-map as the underlying layout structure.
  */
 export class TubeMapLayout implements ILayout {
     name: string
 
-    constructor(parent: HTMLElement) {
+    /**
+     * @param ui Take in the UI to display the tube-map as a track.
+     */
+    constructor(ui: UI) {
         this.name = "tubemap"
 
         const svgElement = document.createElementNS(
@@ -18,7 +22,7 @@ export class TubeMapLayout implements ILayout {
         )
         svgElement.id = "tubeMapSVG"
         svgElement.setAttribute("style", "width: 100%;")
-        parent.appendChild(svgElement)
+        ui.addTrack(svgElement)
     }
 
     apply(g: Graph): PGVGraph {

packages/web/src/lib/inject.js

@@ -39,7 +39,9 @@ export function generateLayout() {
 
     // early exit is necessary when visualization options such as colors are
     // changed before any graph has been rendered
-    if (inputNodes.length === 0 || inputTracks.length === 0) return
+    if (inputNodes.length === 0 || inputTracks.length === 0) {
+        return
+    }
 
     straightenTrack(0)
     nodes = JSON.parse(JSON.stringify(inputNodes)) // deep copy (can add stuff to copy and leave original unchanged)
@@ -63,29 +65,39 @@ export function generateLayout() {
             trackForRuler = tracks[i].name
         }
     }
-    if (tracks.length === 0) return
+    if (tracks.length === 0) {
+        return
+    }
 
     nodeMap = generateNodeMap(nodes)
     generateTrackIndexSequences(tracks)
-    if (reads && config.showReads) generateTrackIndexSequences(reads)
+    if (reads && config.showReads) {
+        generateTrackIndexSequences(reads)
+    }
     generateNodeWidth()
 
     if (config.mergeNodesFlag) {
         generateNodeSuccessors() // requires indexSequence
         generateNodeOrder() // requires successors
-        if (reads && config.showReads) reverseReversedReads()
+        if (reads && config.showReads) {
+            reverseReversedReads()
+        }
         mergeNodes()
         nodeMap = generateNodeMap(nodes)
         generateNodeWidth()
         generateTrackIndexSequences(tracks)
-        if (reads && config.showReads) generateTrackIndexSequences(reads)
+        if (reads && config.showReads) {
+            generateTrackIndexSequences(reads)
+        }
     }
 
     numberOfNodes = nodes.length
     numberOfTracks = tracks.length
     generateNodeSuccessors()
     generateNodeDegree()
-    if (DEBUG) console.log(`${numberOfNodes} nodes.`)
+    if (DEBUG) {
+        console.log(`${numberOfNodes} nodes.`)
+    }
     generateNodeOrder()
     maxOrder = getMaxOrder()
 
@@ -98,7 +110,9 @@ export function generateLayout() {
     calculateTrackWidth(tracks)
     generateLaneAssignment()
 
-    if (config.showExonsFlag === true && bed !== null) addTrackFeatures()
+    if (config.showExonsFlag === true && bed !== null) {
+        addTrackFeatures()
+    }
     generateNodeXCoords()
 
     if (reads && config.showReads) {
@@ -125,9 +139,9 @@ export function generateLayout() {
         console.log("Lane assignment:")
         console.log(assignments)
     }
-    getImageDimensions();
-    alignSVG(nodes, tracks);
-    defineSVGPatterns();
+    getImageDimensions()
+    alignSVG(nodes, tracks)
+    defineSVGPatterns()
 
     drawTrackRectangles(trackRectangles)
     drawTrackCurves()
@@ -140,9 +154,13 @@ export function generateLayout() {
     const dNodes = removeUnusedNodes(nodes)
     drawReversalsByColor(trackCorners, trackVerticalRectangles, "read")
     drawNodes(dNodes)
-    if (config.nodeWidthOption === 0) drawLabels(dNodes)
+    if (config.nodeWidthOption === 0) {
+        drawLabels(dNodes)
+    }
     // if (trackForRuler !== undefined) drawRuler()
-    if (config.nodeWidthOption === 0) drawMismatches() // TODO: call this before drawLabels and fix d3 data/append/enter stuff
+    if (config.nodeWidthOption === 0) {
+        drawMismatches()
+    } // TODO: call this before drawLabels and fix d3 data/append/enter stuff
     if (DEBUG) {
         console.log(`number of tracks: ${numberOfTracks}`)
         console.log(`number of nodes: ${numberOfNodes}`)

packages/web/src/main.ts

@@ -1,5 +1,4 @@
 import { PGV } from "./pgv"
-import "./style.css"
 
 /**
  * Main entry.
@@ -12,6 +11,7 @@ import "./style.css"
     }
 
     const app = new PGV(root, {
+        debug: true,
         repos: [
             {
                 type: "demo",
@@ -27,6 +27,9 @@ import "./style.css"
             //     name: "local server",
             // },
         ],
+        layout: "tubemap",
+        renderer: "three",
     })
+
     console.log(app)
 })()