Release v4.6.1

.stylelintrc

@@ -1,17 +1,20 @@
 {
-  "plugins": [
-    "stylelint-scss",
-    "stylelint-prettier",
+  "extends": [
+    "stylelint-config-prettier-scss",
+    "stylelint-config-standard-scss"
   ],
-  "extends": "stylelint-config-standard",
   "rules": {
-    "prettier/prettier": true,
+    "string-quotes": "single",
+    "keyframes-name-pattern": null,
+    "no-descending-specificity": null,
     "value-list-comma-newline-after": null,
     "declaration-colon-newline-after": null,
     "at-rule-no-unknown": null,
     "at-rule-empty-line-before": null,
     "block-closing-brace-newline-after": null,
+    "selector-id-pattern": null,
     "scss/at-rule-no-unknown": true,
+    "scss/no-global-function-names": null,
     "scss/at-extend-no-missing-placeholder": true,
     "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
     "scss/at-else-closing-brace-space-after": "always-intermediate",
@@ -41,7 +44,6 @@
     "scss/operator-no-unspaced": true,
     "scss/percent-placeholder-pattern": null,
     "scss/partial-no-import": null,
-    "scss/selector-no-redundant-nesting-selector": true,
-    "no-invalid-position-at-import-rule": null,
+    "scss/selector-no-redundant-nesting-selector": true
   }
 }

.yarnrc.yml

@@ -3,4 +3,4 @@ packageExtensions:
     dependencies:
       typescript: ~4.1.5
 
-yarnPath: .yarn/releases/yarn-3.1.1.cjs
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

README.md

@@ -687,6 +687,8 @@ Otherwise follow the steps to setup a local development environment.
 
 **Installation**
 
+The setup requires [Node.js v16 or higher](https://nodejs.org/en/download/).
+
 ```bash
 git clone https://github.com/lineupjs/lineupjs.git -b develop
 cd lineupjs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lineupjs",
   "description": "LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "author": {
     "name": "Samuel Gratzl",
     "email": "sam@sgratzl.com",
@@ -71,17 +71,18 @@
     "clean:compile": "rimraf build/src \"build/*.tsbuildinfo\" \"*.tsbuildinfo\" ",
     "compile": "tsc -b ./tsconfig.json",
     "compile:dev": "tsc -b ./tsconfig.dev.json",
-    "fix": "npm run eslint:fix && npm run prettier:write",
+    "fix": "npm run eslint:fix && npm run prettier:write && npm run stylelint:fix",
     "prettier:write": "prettier \"*\" \"*/**\" --write",
     "prettier": "prettier \"*\" \"*/**\" --check",
     "eslint": "eslint src --ext .ts,.tsx",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"src/**/*.scss\"",
+    "stylelint:fix": "npm run stylelint -- --fix",
     "lint": "npm run eslint && npm run prettier && npm run stylelint",
     "docs": "npm run clean:compile && typedoc --tsconfig tsconfig.dev.json --out ./docs/ src tsd.d.ts",
-    "test": "jest --passWithNoTests",
-    "test:watch": "jest --passWithNoTests --watch",
-    "test:coverage": "jest --passWithNoTests --coverage",
+    "test": "jest --passWithNoTests --detectOpenHandles --forceExit",
+    "test:watch": "npm run test -- --watch",
+    "test:coverage": "npm run test -- --coverage",
     "build:dev": "webpack --mode development --devtool source-map",
     "build": "webpack --mode production --devtool source-map",
     "dev": "npm run clean && npm run compile:dev && npm run build:dev",
@@ -97,59 +98,62 @@
     "cy:junit": "npm run cy:compile && cypress run --reporter junit --reporter-options 'mochaFile=junit-results/my-test-output.xml'"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@types/jest": "^27.4.0",
-    "@types/lodash": "4.14.178",
-    "@types/node": "^17.0.12",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "@yarnpkg/sdks": "^2.6.0-rc.4",
-    "css-loader": "^6.5.1",
-    "cypress": "^9.3.1",
-    "eslint": "^8.7.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^7.0.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@types/jest": "^27.5.0",
+    "@types/lodash": "4.14.182",
+    "@types/node": "^17.0.31",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "@yarnpkg/sdks": "^2.6.0",
+    "css-loader": "^6.7.1",
+    "cypress": "^9.6.0",
+    "eslint": "^8.15.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.5.0",
-    "jest": "^27.4.7",
-    "mini-css-extract-plugin": "^2.5.3",
+    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "jest": "^27.5.1",
+    "jest-environment-jsdom": "^27.5.1",
+    "mini-css-extract-plugin": "^2.6.0",
     "mkdirp": "^1.0.4",
     "mocha-junit-reporter": "^2.0.2",
-    "prettier": "^2.5.1",
+    "postcss": "^8.4.13",
+    "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.0",
-    "sass-loader": "^12.4.0",
+    "sass": "^1.51.0",
+    "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^13",
-    "stylelint-config-standard": "^22",
-    "stylelint-prettier": "^1",
-    "stylelint-scss": "^3",
+    "stylelint": "^14.8.2",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.2.0",
     "thread-loader": "^3.0.4",
-    "ts-jest": "^27.1.3",
-    "ts-loader": "^9.2.6",
-    "typedoc": "^0.22.11",
-    "typescript": "~4.5",
+    "ts-jest": "^28.0.1",
+    "ts-loader": "^9.3.0",
+    "typedoc": "^0.22.15",
+    "typescript": "^4.6.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.67.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.3"
+    "webpack-dev-server": "^4.9.0"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
+    "@popperjs/core": "^2.11.5",
     "@types/d3-color": "^2.0.1",
     "@types/d3-dispatch": "^2.0.0",
     "@types/d3-format": "^2.0.0",
     "@types/d3-scale": "^3.2.3",
     "@types/d3-scale-chromatic": "^2.0.0",
     "@types/d3-time": "^2.0.0",
     "@types/d3-time-format": "^3.0.0",
-    "@types/lodash.get": "4.4.6",
+    "@types/lodash.get": "4.4.7",
     "d3-color": "^2.0.0",
     "d3-dispatch": "^2.0.0",
     "d3-format": "^2.0.0",
@@ -159,9 +163,9 @@
     "d3-time-format": "^3.0.0",
     "detect-browser": "^5.3.0",
     "fast-deep-equal": "^3.1.3",
-    "lineupengine": "^2.4.0",
+    "lineupengine": "^2.4.2",
     "lodash.get": "^4.4.2",
     "reflect-metadata": "^0.1.13"
   },
-  "packageManager": "yarn@3.1.1"
+  "packageManager": "yarn@3.2.0"
 }

src/styles/_common.scss

@@ -7,8 +7,7 @@
 
 .#{$lu_css_prefix}-dragable {
   cursor: pointer;
-  cursor: -moz-grab;
-  cursor: -webkit-grab; // indicate grab able
+  cursor: grab; // indicate grab able
 }
 
 .#{$lu_css_prefix}-dragover {

src/styles/_dialogs.scss

@@ -31,7 +31,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgb(0 0 0 / 10%);
   animation: #{$lu_css_prefix}-dialogs-fade-in 0.2s;
 }
 

src/styles/_mappingeditor.scss

@@ -57,7 +57,7 @@ div.#{$lu_css_prefix}-dialog-mapper-script {
 }
 
 svg.#{$lu_css_prefix}-dialog-mapper-details {
-  shape-rendering: geometricPrecision;
+  shape-rendering: geometricprecision;
   z-index: 1;
   height: math.div(25em * 6, 10);
   background: transparent;

src/styles/_slope_graph.scss

@@ -7,7 +7,7 @@ section.#{$lu-css_prefix}-slopegraph {
 }
 
 section.#{$lu-css_prefix}-slopegraph > svg {
-  shape-rendering: geometricPrecision;
+  shape-rendering: geometricprecision;
   height: 100%;
   width: 100%;
   background: white;

src/styles/_vars.scss

@@ -16,7 +16,7 @@ $lu_hover_header_color: #f3f3f3 !default;
 $lu_selected_color: #ffa500 !default;
 $lu_filtered_opacity: 0.2 !default;
 
-$lu_drag_over: rgba(151, 151, 151, 0.8) !default;
+$lu_drag_over: rgb(151 151 151 / 80%) !default;
 
 $lu_header_background: #6d6c6c !default;
 
@@ -25,8 +25,8 @@ $lu_body_text_hover_color: darkblue !default;
 
 $lu_slope_width: 200px !default;
 $lu_slope_color: darkgray !default;
-$lu_slope_group_color: rgba(169, 169, 169, 0.5) !default;
-$lu_slope_group_selected_color: rgba(255, 165, 0, 0.5) !default;
+$lu_slope_group_color: rgb(169 169 169 / 50%) !default;
+$lu_slope_group_selected_color: rgb(255 165 0 / 50%) !default;
 $lu_slope_stroke_width: 1 !default;
 
 $lu_renderer_boxplot_box: #e0e0e0 !default;
@@ -100,8 +100,5 @@ $lu_include_font_awesome: false !default;
 $lu_histogram_drag_hint_width: 7em !default;
 
 @mixin user_select_none() {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }

src/styles/icons/_custom_font.scss

@@ -3,7 +3,7 @@
 @if $lu_use_font_awesome == false {
   @at-root {
     @font-face {
-      font-family: 'lu-font';
+      font-family: lu-font;
       src: url('#{$lu_assets}/font/lu-font.eot');
       src: url('#{$lu_assets}/font/lu-font.eot') format('embedded-opentype'),
         url('#{$lu_assets}/font/lu-font.woff2') format('woff2'), url('#{$lu_assets}/font/lu-font.woff') format('woff'),

src/styles/icons/_font_awesome.scss

@@ -1,4 +1,5 @@
 $fa-font-path: '~@fortawesome/fontawesome-free/webfonts' !default;
+@import '~@fortawesome/fontawesome-free/scss/functions';
 @import '~@fortawesome/fontawesome-free/scss/variables';
 
 @mixin lu_fontawesome_var_icons() {

src/styles/panel/_hierarchy.scss

@@ -48,7 +48,7 @@
 
 .#{$lu_css_prefix}-hierarchy-entry,
 .#{$lu_css_prefix}-hierarchy-adder {
-  padding: 6px 0.5em 0 0.5em;
+  padding: 6px 0.5em 0;
   display: flex;
   color: $lu_toolbar_color_base2;
   border-top: 1px solid $lu_side_panel_separator_color;

src/styles/renderer/_histogram.scss

@@ -125,8 +125,8 @@ span.#{$lu_css_prefix}-mapping-hint {
   height: 100%;
   background: repeating-linear-gradient(
     -45deg,
-    rgba(255, 255, 255, 0.7),
-    rgba(255, 255, 255, 0.7) 7px,
+    rgb(255 255 255 / 70%),
+    rgb(255 255 255 / 70%) 7px,
     #bababa 7px,
     #bababa 10px
   );

src/styles/renderer/_violin.scss

@@ -12,8 +12,8 @@
 }
 
 .#{$lu_css_prefix}-violin-path {
-  fill: currentColor;
-  stroke: currentColor;
+  fill: currentcolor;
+  stroke: currentcolor;
   vector-effect: non-scaling-stroke;
 }
 
@@ -24,6 +24,6 @@
 .#{$lu_css_prefix}-violin-median,
 .#{$lu_css_prefix}-violin-mean,
 .#{$lu_css_prefix}-violin-iqr {
-  stroke: currentColor;
+  stroke: currentcolor;
   vector-effect: non-scaling-stroke;
 }