Release 13.0.0 (#426)

* prepare next development version 12.0.1-SNAPSHOT

* Fix ref in replace views w/ `findOrAddObject()`

Fixes #402

See GitHub issue for in-depth analysis and testing results.

* Add missing dist files

* Use context to get current view name

Fixes #254

* Remove `nav.mainNavi` styles (#415)

I couldn't find any occurence or usage of the CSS class `mainNavi` in the TypeScript code of the phovea, Caleydo, or datavisyn organization, nor do know where this element would be. Hence, I would remove this code.

* Prepare github changes

* Remove circleci

* prepare next dev version

* Update fontawesome

* refactor: Improve Cypress setup and use Cypress commands.js (#354)

Co-authored-by: Florian Engertsberger <[email protected]>
Co-authored-by: Holger Stitz <[email protected]>

* feat: CLUE support for URL query parameter + refactor public session link (#419)

Co-authored-by: oltionchampari <[email protected]>

* Add Visyn Scripts (#421)

* Prepare visyn_script changes

* Update package.json

* Remove prepack script

* Removed phovea_registry.js from package.json files

* Update package.json

* Update package.json

* add depth

* Update package.json

* Update package.json

* Update package.json

* Update package.json

* Update package.json

* Update package.json

* Update engine and prepare script

* Add react resolutions and overrides

* Remove react and react-dom from deps

* add dist folder

* Added resolutions like overrides

* Fix wrongly formatted visyn_scripts git ssh link

* Remove .git from git+ssh link to visyn_script

* Add yarn-3.2.2

* Remove yarn-3.2.2 again

* Add .yarnrc.yml

* Add yarn-3.2.2

* Switch to visyn_scripts clean

* Change d3 to d3v3

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

* Add dist/ folder (#423)

* fix: Replace jQuery scrollTo plugin with custom implementation (#425)

Replace jquery scrollTo plugin with custom impl

* prepare release 13.0.0

Co-authored-by: Holger Stitz <[email protected]>
Co-authored-by: Champari Oltion <[email protected]>
Co-authored-by: Dominic Girardi <[email protected]>
Co-authored-by: anita-steiner <>
Co-authored-by: Florian Engertsberger <[email protected]>
Co-authored-by: oltionchampari <[email protected]>
Co-authored-by: datavisyn-bot <[email protected]>
Co-authored-by: Anita Steiner <[email protected]>
Co-authored-by: Michael Puehringer <[email protected]>
Co-authored-by: Thomas Schachinger <[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 });

.gitignore

@@ -29,3 +29,12 @@ node_modules/
 /.awcache
 /.cache-loader
 package-lock.json
+/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

@@ -7,20 +7,6 @@
     "modules": [
       "tdp_core"
     ],
-    "registry": {
-      "exclude": [
-        "dTiles",
-        "bob",
-        [
-          "datatype",
-          "(matrix|stratification|vector|atom)"
-        ],
-        [
-          "clue",
-          "multiform"
-        ]
-      ]
-    },
     "vendors": {
       "others": "phovea.*|tdp_.*|tdp-.*|datavisyn.*",
       "phovea": "phovea.*",
@@ -30,8 +16,7 @@
     "filesToLoad": {
       "file-loader": "404|robots"
     },
-    "extensions": [
-    ],
+    "extensions": [],
     "sextensions": [],
     "libraries": [
       "scrollTo"
@@ -46,18 +31,8 @@
       "redhatPackages": []
     },
     "app": "ordino",
-    "entries": {
-      "app": {
-        "js": "dist/initialize.js",
-        "template": "dist/index.template.ejs",
-        "html": "index.html",
-        "chunkName": "app"
-      }
-    },
     "libraryAliases": {
-      "d3": "d3/d3",
-      "scrollTo": "jquery.scrollto/jquery.scrollTo.js",
-      "jquery": "jquery/dist/jquery"
+      "d3": "d3/d3"
     },
     "libraryExternals": [],
     "ignores": [],

cypress.json

@@ -0,0 +1,11 @@
+{
+    "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/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,61 @@
+// ***********************************************
+// 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
+// ***********************************************
+//
+
+/**
+ * Count columns in the ranking and wait until the new column has been added
+ * Auxilary function for checkScoreColLoaded. Count columns in the ranking and wait until the new column has been added
+ * @param {number} rankingId - ID of the ranking to search in, e.g. 0 for the initial ranking, 1 for the first detail view etc.
+ * @param {string[]} totalNumColumns - total number of columns that are expected after adding them
+ */
+Cypress.Commands.add('checkColCountOrdino', (rankingId, totalNumColumns) => {
+    const colsSelector = `[data-testid=viewWrapper-${rankingId}] > .view > .inner > .tdp-view.lineup > div > main > header > article > section`;
+    cy.get(colsSelector).should('have.length', totalNumColumns);
+})
+
+/**
+ * Check if a score column has finished loading
+ * Finds score column by searching for input strings in title, label and sublabel of the columns
+ * @param {number} rankingId - ID of the ranking to search in, e.g. 0 for the initial ranking, 1 for the first detail view etc.
+ * @param {string[]} searchStrings - Array of strings containing the user input of the modal (if this does not work inspect the header element of the column and extract information from the title attribute)
+ * @param {string[]} totalNumColumns - total number of columns that are expected after adding them
+ */
+Cypress.Commands.add('checkScoreColLoadedOrdino', (rankingId, searchStrings, totalNumColumns) => {
+    const searchStringsLower = searchStrings.map((string) => string.toLowerCase());
+    cy.checkColCountOrdino(rankingId, totalNumColumns);
+    cy
+        .get(`[data-testid=viewWrapper-${rankingId}] .tdp-view.lineup > div > main > header > article`)
+        .children()
+        .filter((i, elem) => {
+            const label = elem.getElementsByClassName('lu-label')[0];
+            const sublabel = elem.getElementsByClassName('lu-sublabel')[0];
+            return searchStringsLower.every(
+                (s) => elem.title.toLowerCase().includes(s) || label.innerHTML.toLowerCase().includes(s) || sublabel.innerHTML.toLowerCase().includes(s),
+            );
+        })
+        // extract data-col-id and save it to variable column_id
+        .invoke('attr', 'data-col-id')
+        .as('column_id');
+
+    // use variable column_id and check if first row contains "Loading"
+    cy.get('@column_id').then((id) => {
+        return cy
+            .get(`[data-testid=viewWrapper-${rankingId}] .tdp-view.lineup > div > main > .le-body > [data-ranking="rank${0}"] > div:nth-child(1) > [data-id="${id}"]`)
+            .should('not.contain', 'Loading');
+    });
+})
+
+/**
+ * Wait for the lineup table rows to be visible
+ * @param {number} rankingId - ID of the ranking to search in, e.g. 0 for the initial ranking, 1 for the first detail view etc.
+ */
+Cypress.Commands.add('waitLineupReadyOrdino', (rankingId) => {
+    cy.get(`[data-testid=viewWrapper-${rankingId}] .le-tr`).should('be.visible');
+})

cypress/support/index.js

@@ -0,0 +1,46 @@
+// ***********************************************************
+// 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'
+
+// 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'],
+      })
+    }
+  },
+})