Release 13.0.0 (#145)

* add data-testid

* add data-testid

* add data-testid

* fix data-testid in footer for tabs

* add tourspage

* update dist

* compile

* update dist

* update dist

* update dist

* update dist

* update dist

* rename for consistency

* prepare next development version 12.0.1-SNAPSHOT

* Prepare github changes

* Remove circleci

* prepare next dev version

* Update release.yml

* Update publish.yml

* Update fontawesome

* feat: Improve Cypress setup and structure (#141)

* feat: Use URL search query for CLUE and rewrite hash parameters (#142)

Use URL search query for CLUE + rewrite hash props

Requires datavisyn/tdp_core@07ddf99

* Add Visyn Scripts (#144)

* Prepare visyn_script changes

* Moved phovea_registry to src/phovea_registry.ts

* Update workspace.scss

* Update engine and prepare script

* Remove react and react-dom from deps

* Fix wrongly formatted visyn_scripts git ssh link

* Add yarn-3.2.2

* Add _head import to templates

Co-authored-by: anita-steiner <>
Co-authored-by: Michael Puehringer <[email protected]>

* Fix robot.txt import

* prepare release 13.0.0

Co-authored-by: Florian Engertsberger <[email protected]>
Co-authored-by: Holger Stitz <[email protected]>
Co-authored-by: anita-steiner <>
Co-authored-by: Anita Steiner <[email protected]>
Co-authored-by: datavisyn-bot <[email protected]>
Co-authored-by: Michael Puehringer <[email protected]>

.eslintrc.js

@@ -1,71 +1 @@
-module.exports = {
-  root: true,
-  extends: [
-    "airbnb",
-    "airbnb-typescript",
-    "airbnb/hooks",
-    "eslint:recommended",
-    "plugin:import/recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:jest/recommended",
-    "plugin:prettier/recommended"
-  ],
-  plugins: ["react", "@typescript-eslint", "jest"],
-  ignorePatterns: ["*.js"],
-  env: {
-    browser: true,
-    es6: true,
-    jest: true
-  },
-  globals: {
-    Atomics: "readonly",
-    SharedArrayBuffer: "readonly",
-  },
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    // Make sure eslint and VS Code use the same path for the tsconfig.json:
-    // https://github.com/typescript-eslint/typescript-eslint/issues/251
-    tsconfigRootDir: __dirname,
-    project: "./tsconfig.eslint.json"
-  },
-  rules: {
-    // Disables jsx-a11y https://github.com/import-js/eslint-plugin-import/blob/v2.25.4/docs/rules/no-webpack-loader-syntax.md
-    ...Object.keys(require('eslint-plugin-jsx-a11y').rules).reduce((acc, rule) => { acc[`jsx-a11y/${rule}`] = 'off'; return acc }, {}),
-    "class-methods-use-this":"off",
-    "linebreak-style": "off",
-    "no-continue": "off",
-    "no-multi-assign": "warn",
-    "no-nested-ternary": "off",
-    "no-param-reassign": ["error", { "props": false }],
-    "no-return-assign": "warn", 
-    "no-restricted-syntax": "off",
-    "no-plusplus": "off",
-    "no-prototype-builtins": "warn",
-    "no-minusminus": "off",
-    "no-underscore-dangle": "off",
-    "max-classes-per-file": "off",
-    "no-param-reassign": "warn",
-    "import/no-extraneous-dependencies": "off",
-    // Disable the following 2 lines because to allow webpack file-loaders syntax
-    "import/no-webpack-loader-syntax": "off",
-    "import/no-unresolved": "off",
-    "import/prefer-default-export": "off",
-    "import/order": "error",
-    "prefer-destructuring": ["warn", {"object": true, "array": false}],
-    "prefer-promise-reject-errors": "warn",
-    "prefer-spread": "warn",
-    "@typescript-eslint/ban-ts-comment": "warn",
-    "react/destructuring-assignment": "warn",
-    "react/jsx-props-no-spreading": "off",
-    "react/no-unused-class-component-methods": "warn",
-    "react/prop-types": "off",
-    "react/require-default-props": "off",
-    "react/static-property-placement": ["warn", "property assignment", {
-      childContextTypes: "static getter",
-      contextTypes: "static public field",
-      contextType: "static public field",
-      displayName: "static public field",
-    }]
-  }
-};
+module.exports = require('visyn_scripts/config/eslintrc.template')({ tsconfigRootDir: __dirname });

.github/workflows/release.yml

@@ -5,4 +5,5 @@ on: workflow_dispatch
 jobs:
   release:
     uses: datavisyn/github-workflows/.github/workflows/release-source.yml@main
-    secrets: inherit      
+    secrets: 
+      DV_DEVOPS: ${{ secrets.DV_DEVOPS }}

.gitignore

@@ -12,4 +12,17 @@ node_modules/
 *.log
 /.awcache
 /.cache-loader
+# ignore local cypress artifacts
+/cypress/videos/
+/cypress/screenshots/
 package-lock.json
+/dist/
+/yarn.lock
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierrc.js

@@ -1,6 +1 @@
-module.exports = {
-  "endOfLine": "auto",
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 160
-};
+module.exports = require('visyn_scripts/config/prettierrc.template')

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-3.2.2.cjs
+nodeLinker: node-modules

.yo-rc.json

@@ -4,24 +4,6 @@
     "modules": [
       "phovea_server"
     ],
-    "registry": {
-      "exclude": [
-        "dTiles",
-        "bob",
-        [
-          "datatype",
-          "(table|matrix|stratification|vector|atom)"
-        ],
-        [
-          "clue",
-          "multiform"
-        ],
-        [
-          "tdpView",
-          "kegg"
-        ]
-      ]
-    },
     "vendors": {
       "others": "phovea.*|tdp_.*|tdp-.*|datavisyn.*"
     },
@@ -45,7 +27,9 @@
         "template": "dist/app.template.ejs",
         "html": "index.html",
         "chunkName": "app",
-        "excludeChunks": ["welcome"]
+        "excludeChunks": [
+          "welcome"
+        ]
       }
     },
     "__welcome_entries": {
@@ -55,32 +39,17 @@
         "template": "dist/welcome.template.ejs",
         "html": "index.html",
         "chunkName": "welcome",
-        "excludeChunks": ["app"]
-      }
-    },
-    "entries": {
-      "app": {
-        "js": "dist/initialize.app.js",
-        "template": "dist/app.template.ejs",
-        "html": "app/index.html",
-        "chunkName": "app",
-        "excludeChunks": ["welcome"]
-      },
-      "welcome": {
-        "js": "dist/initialize.welcome.js",
-        "template": "dist/welcome.template.ejs",
-        "html": "index.html",
-        "chunkName": "welcome",
-        "excludeChunks": ["app"]
+        "excludeChunks": [
+          "app"
+        ]
       }
     },
     "unknown": {
       "requirements": [],
       "dockerPackages": []
     },
     "ignores": [],
-    "extensions": [
-    ],
+    "extensions": [],
     "libraries": [
       "d3"
     ],

cypress.json

@@ -0,0 +1,10 @@
+{
+    "experimentalStudio": true,
+    "viewportWidth": 1920,
+    "viewportHeight": 1080,
+    "defaultCommandTimeout": 100000,
+    "responseTimeout": 100000,
+    "env": {
+        "host": "http://localhost:8080"
+    }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/index.js

@@ -0,0 +1 @@
+import 'tdp_publicdb/cypress/integration/';

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,37 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+
+
+// -- This is a parent command --
+Cypress.Commands.add('login', () => {
+
+    // Check if form is visible and the two inputs are not empty (so not to click too fast on the button)
+    cy.get('.form-signin').should('be.visible');
+    cy.get('.form-signin #login_username').invoke('val').should('not.be.empty');
+    cy.get('.form-signin #login_password').invoke('val').should('not.be.empty');
+    // Add a small wait just for safety
+    cy.wait(1000);
+    cy.get('.form-signin button[type="submit"]').click();
+    // Check that login disappears
+    cy.get('.form-signin button[type=submit]').should('not.be.visible');
+});
+
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,48 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+import 'tdp_core/cypress/support/commands';
+import 'ordino/cypress/support/commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+
+// Here we define the selector priority for cypress.
+// We use Cypress.SelectorPlayground.defaults within itself, in order to define two different selector priorities,
+// depending on whether the element has the data-testid attribute.
+// This is a little hacky, but works and is the most stable solution.
+// Why this works can be founde here: https://github.com/cypress-io/cypress/blob/b6c4ba144cd6ae3d210789bbb69b9aacc6a92094/packages/driver/src/cypress/selector_playground.ts
+// If in the future changes happen in cypress, that interfere with this approach, this solution must be changed.
+
+Cypress.SelectorPlayground.defaults({
+  // With onElement we can check whether the element has the data-testid attribute
+  onElement: (el) => {
+    if (el.attr('data-testid')) {
+      // If it has the data-testid attribute then it should only use it in the selector priority.
+      // This ensures that we get nice outputs in the cypress studio as we intended (hierarchy of data-testid elements).
+      Cypress.SelectorPlayground.defaults({
+        selectorPriority: ['data-testid'],
+      })
+    } else {
+      // If it does not have it (eg. line up) we use all the available selector types to ensure that a unique selector is returned.
+      Cypress.SelectorPlayground.defaults({
+        selectorPriority: ['data-testid', 'data-cy', 'data-test', 'class', 'tag', 'attributes', 'nth-child', 'id'],
+      })
+    }
+  },
+})