From c063612341955543bc275caf29154a6eea3e36e9 Mon Sep 17 00:00:00 2001 From: "Gustavo A. Salazar" Date: Thu, 10 Feb 2022 12:34:54 +0000 Subject: [PATCH 1/9] fixing conflicts - removing shoeAllSpecies --- src/components/Related/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Related/index.js b/src/components/Related/index.js index f798a3476..a7d51a198 100644 --- a/src/components/Related/index.js +++ b/src/components/Related/index.js @@ -305,8 +305,7 @@ class Related extends PureComponent /*:: */ { }; render() { - const { data, focusType, hasSecondary, hash, showAllSpecies, ...props } = - this.props; + const { data, focusType, hasSecondary, hash, ...props } = this.props; if (data.loading) return ; let RelatedComponent = RelatedSimple; if (hasSecondary) { @@ -331,7 +330,6 @@ const mapStateToPropsDefault = createSelector( focusType, hash, hasSecondary: filter && (!!filter.db || !!filter.integration), - showAllSpecies, }), ); From 17ad726625961de27f6fc2d6b89aedbf2b667d45 Mon Sep 17 00:00:00 2001 From: "Gustavo A. Salazar" Date: Thu, 5 May 2022 14:56:06 +0100 Subject: [PATCH 2/9] using the TS clanviewer --- package-lock.json | 328 ++++++++++++++++++---------- package.json | 19 +- src/components/Set/Summary/index.js | 2 +- src/styles/interpro-new.css | 3 +- webpack.config.js | 2 +- 5 files changed, 230 insertions(+), 124 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8558c24cd..a9f40ddcf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,12 +4,18 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "1.0.1": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/1.0.1/-/1.0.1-1.0.0.tgz", + "integrity": "sha1-789KKTiYkqYfqRLSbmu+4ViuhGk=" + }, "@ampproject/remapping": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", - "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", "requires": { - "@jridgewell/trace-mapping": "^0.3.0" + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" } }, "@apideck/better-ajv-errors": { @@ -36,20 +42,20 @@ "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==" }, "@babel/core": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.9.tgz", - "integrity": "sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==", + "version": "7.17.10", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.10.tgz", + "integrity": "sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==", "requires": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.17.9", - "@babel/helper-compilation-targets": "^7.17.7", + "@babel/generator": "^7.17.10", + "@babel/helper-compilation-targets": "^7.17.10", "@babel/helper-module-transforms": "^7.17.7", "@babel/helpers": "^7.17.9", - "@babel/parser": "^7.17.9", + "@babel/parser": "^7.17.10", "@babel/template": "^7.16.7", - "@babel/traverse": "^7.17.9", - "@babel/types": "^7.17.0", + "@babel/traverse": "^7.17.10", + "@babel/types": "^7.17.10", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -58,28 +64,28 @@ }, "dependencies": { "@babel/compat-data": { - "version": "7.17.7", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz", - "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==" + "version": "7.17.10", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz", + "integrity": "sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==" }, "@babel/generator": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz", - "integrity": "sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==", + "version": "7.17.10", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.10.tgz", + "integrity": "sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==", "requires": { - "@babel/types": "^7.17.0", - "jsesc": "^2.5.1", - "source-map": "^0.5.0" + "@babel/types": "^7.17.10", + "@jridgewell/gen-mapping": "^0.1.0", + "jsesc": "^2.5.1" } }, "@babel/helper-compilation-targets": { - "version": "7.17.7", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz", - "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==", + "version": "7.17.10", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz", + "integrity": "sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==", "requires": { - "@babel/compat-data": "^7.17.7", + "@babel/compat-data": "^7.17.10", "@babel/helper-validator-option": "^7.16.7", - "browserslist": "^4.17.5", + "browserslist": "^4.20.2", "semver": "^6.3.0" } }, @@ -116,27 +122,53 @@ } }, "@babel/parser": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz", - "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==" + "version": "7.17.10", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.10.tgz", + "integrity": "sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==" }, "@babel/traverse": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz", - "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==", + "version": "7.17.10", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz", + "integrity": "sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==", "requires": { "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.17.9", + "@babel/generator": "^7.17.10", "@babel/helper-environment-visitor": "^7.16.7", "@babel/helper-function-name": "^7.17.9", "@babel/helper-hoist-variables": "^7.16.7", "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/parser": "^7.17.9", - "@babel/types": "^7.17.0", + "@babel/parser": "^7.17.10", + "@babel/types": "^7.17.10", "debug": "^4.1.0", "globals": "^11.1.0" } }, + "@babel/types": { + "version": "7.17.10", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.10.tgz", + "integrity": "sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==", + "requires": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + } + }, + "browserslist": { + "version": "4.20.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz", + "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==", + "requires": { + "caniuse-lite": "^1.0.30001332", + "electron-to-chromium": "^1.4.118", + "escalade": "^3.1.1", + "node-releases": "^2.0.3", + "picocolors": "^1.0.0" + } + }, + "caniuse-lite": { + "version": "1.0.30001336", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001336.tgz", + "integrity": "sha512-/YxSlBmL7iKXTbIJ48IQTnAOBk7XmWsxhBF1PZLOko5Dt9qc4Pl+84lfqG3Tc4EuavurRn1QLoVJGxY2iSycfw==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -145,6 +177,11 @@ "ms": "2.1.2" } }, + "electron-to-chromium": { + "version": "1.4.134", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.134.tgz", + "integrity": "sha512-OdD7M2no4Mi8PopfvoOuNcwYDJ2mNFxaBfurA6okG3fLBaMcFah9S+si84FhX+FIWLKkdaiHfl4A+5ep/gOVrg==" + }, "json5": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", @@ -155,15 +192,15 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "node-releases": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz", + "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==" + }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -2622,20 +2659,34 @@ "regenerator-runtime": "^0.13.3" } }, + "@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "requires": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, "@jridgewell/resolve-uri": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz", - "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==" + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.6.tgz", + "integrity": "sha512-R7xHtBSNm+9SyvpJkdQl+qrM3Hm2fea3Ef197M3mUug+v+yR+Rhfbs7PBtcBUVnIWJ4JcAdjvij+c8hXS9p5aw==" + }, + "@jridgewell/set-array": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.0.tgz", + "integrity": "sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==" }, "@jridgewell/sourcemap-codec": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz", - "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==" + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.12.tgz", + "integrity": "sha512-az/NhpIwP3K33ILr0T2bso+k2E/SLf8Yidd8mHl0n6sCQ4YdyC8qDhZA6kOPDNDBA56ZnIjngVl0U3jREA0BUA==" }, "@jridgewell/trace-mapping": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz", - "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==", + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", + "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", "requires": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -11765,16 +11816,61 @@ "dev": true }, "clanviewer": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/clanviewer/-/clanviewer-0.2.5.tgz", - "integrity": "sha512-6R7oRbIleaZ0/s+c/sEc697lUenVY2UP5GNPFFrcqrXZZB2LCGa0SQGCpzsyHz8F72esqcJQQTT8VkZu1axtQg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/clanviewer/-/clanviewer-1.0.1.tgz", + "integrity": "sha512-zl5fwYzL8ahfoBrZxEL8ob07+FhNljlYCtnUfjSulhjSycLAgXcoJU2M1/VYOniuNSjwicNlYb00T0L9w91gxA==", "requires": { - "d3-drag": "1.2.5", - "d3-force": "2.0.1", - "d3-scale": "3.2.1", - "d3-selection": "1.4.1", - "d3-zoom": "1.8.3", - "resize-observer-polyfill": "1.5.1" + "d3-drag": "3.0.0", + "d3-force": "3.0.0", + "d3-path": "^3.0.1", + "d3-scale": "4.0.2", + "d3-selection": "3.0.0", + "d3-zoom": "3.0.0" + }, + "dependencies": { + "d3-drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz", + "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-selection": "3" + } + }, + "d3-path": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz", + "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==" + }, + "d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==" + }, + "d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "requires": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + } + }, + "d3-zoom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", + "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "2 - 3", + "d3-transition": "2 - 3" + } + } } }, "class-utils": { @@ -11960,9 +12056,9 @@ "dev": true }, "clipboard": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.10.tgz", - "integrity": "sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==", + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz", + "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==", "requires": { "good-listener": "^1.2.2", "select": "^1.1.2", @@ -12601,9 +12697,9 @@ } }, "core-js": { - "version": "3.22.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.1.tgz", - "integrity": "sha512-l6CwCLq7XgITOQGhv1dIUmwCFoqFjyQ6zQHUCQlS0xKmb9d6OHIg8jDiEoswhaettT21BSF5qKr6kbvE+aKwxw==" + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.4.tgz", + "integrity": "sha512-1uLykR+iOfYja+6Jn/57743gc9n73EWiOnSJJ4ba3B4fOEYDBv25MagmEZBxTp5cWq4b/KPx/l77zgsp28ju4w==" }, "core-js-compat": { "version": "3.21.0", @@ -13254,11 +13350,11 @@ } }, "d3-array": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", - "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.6.tgz", + "integrity": "sha512-DCbBBNuKOeiR9h04ySRBMW52TFVc91O9wJziuyXw6Ztmy8D3oZbmCkOO3UHKC7ceNJsN2Mavo9+vwV8EAEUXzA==", "requires": { - "internmap": "^1.0.0" + "internmap": "1 - 2" } }, "d3-axis": { @@ -13357,13 +13453,13 @@ } }, "d3-force": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.0.1.tgz", - "integrity": "sha512-zh73/N6+MElRojiUG7vmn+3vltaKon7iD5vB/7r9nUaBeftXMzRo5IWEG63DLBCto4/8vr9i3m9lwr1OTJNiCg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz", + "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==", "requires": { - "d3-dispatch": "1", - "d3-quadtree": "1", - "d3-timer": "1" + "d3-dispatch": "1 - 3", + "d3-quadtree": "1 - 3", + "d3-timer": "1 - 3" } }, "d3-format": { @@ -13420,15 +13516,25 @@ "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==" }, "d3-scale": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz", - "integrity": "sha512-huz5byJO/6MPpz6Q8d4lg7GgSpTjIZW/l+1MQkzKfu2u8P6hjaXaStOpmyrD6ymKoW87d2QVFCKvSjLwjzx/rA==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", "requires": { - "d3-array": "1.2.0 - 2", - "d3-format": "1", - "d3-interpolate": "^1.2.0", - "d3-time": "1", - "d3-time-format": "2" + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "dependencies": { + "d3-time": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz", + "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==", + "requires": { + "d3-array": "2 - 3" + } + } } }, "d3-scale-chromatic": { @@ -17972,9 +18078,9 @@ } }, "internmap": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", - "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==" }, "interpret": { "version": "2.2.0", @@ -21452,9 +21558,9 @@ "dev": true }, "nanoid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz", - "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==" + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" }, "nanomatch": { "version": "1.2.13", @@ -22969,11 +23075,11 @@ "dev": true }, "postcss": { - "version": "8.4.12", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", - "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", + "version": "8.4.13", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.13.tgz", + "integrity": "sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA==", "requires": { - "nanoid": "^3.3.1", + "nanoid": "^3.3.3", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -24810,9 +24916,9 @@ } }, "react-redux": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.0.tgz", - "integrity": "sha512-zBwWgosy/MD2KKr1CtZyAzAaUa1xifJNt2mNszaBF7TtNlst5dooofVz7Djo7cxxkYZn+010Fqef/O4yxlW3cA==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz", + "integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==", "requires": { "@babel/runtime": "^7.12.1", "@types/hoist-non-react-statics": "^3.3.1", @@ -24823,9 +24929,9 @@ }, "dependencies": { "react-is": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.0.0.tgz", - "integrity": "sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==" + "version": "18.1.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz", + "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==" } } }, @@ -24877,13 +24983,13 @@ } }, "react-select": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.0.tgz", - "integrity": "sha512-GM6Fbv1+X+kb3e5Fc4oNeyOJkCIesY/D4NBiReKlGY4RxoeztFYm3J0KREgwMaIKQqwTiuLqTlpUBY3SYw5goQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.1.tgz", + "integrity": "sha512-Y195MmhDoDAj/8gTDyYZU1Raf7tmZd81wxM6RkFko4pqJ4Xv0/ilqUMtSn+GYkwmSlTWeMlzh+e+t7PJgtuXPw==", "requires": { "@babel/runtime": "^7.12.0", "@emotion/cache": "^11.4.0", - "@emotion/react": "^11.1.1", + "@emotion/react": "^11.8.1", "@types/react-transition-group": "^4.4.0", "memoize-one": "^5.0.0", "prop-types": "^15.6.0", @@ -24996,9 +25102,9 @@ } }, "react-to-print": { - "version": "2.14.6", - "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.6.tgz", - "integrity": "sha512-LlhbfNAzPm6AOGmCcsVzgyDIBFs5lTXOMpRL+IUmZRZU04i79rujEj5nXKmbRTPTZV8ezLIHSY6ecj4y0lD5iA==", + "version": "2.14.7", + "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.7.tgz", + "integrity": "sha512-lWVVAs9Co25uyE0toxcWeFsmaZObwUozXrJD9WMpDPclpBgk+WIzxlt3Q3omL/BCBG/cpf0XNvhayUWa+99YGw==", "requires": { "prop-types": "^15.8.1" }, @@ -28427,9 +28533,9 @@ } }, "typescript": { - "version": "4.6.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", - "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", + "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", "dev": true }, "ua-parser-js": { @@ -29031,9 +29137,9 @@ } }, "use-sync-external-store": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.0.0.tgz", - "integrity": "sha512-AFVsxg5GkFg8GDcxnl+Z0lMAz9rE8DGJCc28qnBuQF7lac57B5smLcT37aXpXIIPz75rW4g3eXHPjhHwdGskOw==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz", + "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==" }, "utif": { "version": "2.0.1", diff --git a/package.json b/package.json index ac0ecb700..05e7fceee 100644 --- a/package.json +++ b/package.json @@ -86,13 +86,14 @@ "threshold": 20 }, "dependencies": { + "1.0.1": "^1.0.0", "@tippy.js/react": "3.1.1", "@webcomponents/webcomponentsjs": "2.6.0", "EBI-Icon-fonts": "1.3.1", - "clanviewer": "0.2.5", - "clipboard": "2.0.10", + "clanviewer": "^1.0.1", + "clipboard": "2.0.11", "color-hash": "2.0.1", - "core-js": "3.22.1", + "core-js": "3.22.4", "d3": "5.16.0", "details-element-polyfill": "2.4.0", "dompurify": "2.3.6", @@ -114,7 +115,7 @@ "pako": "2.0.4", "papaparse": "5.3.2", "popper.js": "1.16.1", - "postcss": "8.4.12", + "postcss": "8.4.13", "prop-types": "15.7.2", "protvista-coloured-sequence": "3.5.1", "protvista-interpro-track": "3.4.0", @@ -133,10 +134,10 @@ "react-dom": "18.0.0", "react-helmet-async": "1.3.0", "react-html-parser": "^2.0.2", - "react-redux": "8.0.0", - "react-select": "5.3.0", + "react-redux": "8.0.1", + "react-select": "5.3.1", "react-syntax-highlighter": "15.5.0", - "react-to-print": "2.14.6", + "react-to-print": "2.14.7", "redux": "4.2.0", "regenerator-runtime": "0.13.9", "reselect": "4.1.5", @@ -155,7 +156,7 @@ "workbox-window": "6.5.3" }, "devDependencies": { - "@babel/core": "7.17.9", + "@babel/core": "7.17.10", "@babel/eslint-parser": "7.17.0", "@babel/plugin-proposal-class-properties": "7.16.7", "@babel/plugin-proposal-optional-chaining": "7.16.7", @@ -228,7 +229,7 @@ "style-loader": "3.3.1", "to-string-loader": "1.2.0", "ts-loader": "9.2.8", - "typescript": "4.6.3", + "typescript": "4.6.4", "url-loader": "4.1.1", "webpack": "5.72.0", "webpack-cli": "4.9.2", diff --git a/src/components/Set/Summary/index.js b/src/components/Set/Summary/index.js index 24b813023..a57b76c63 100644 --- a/src/components/Set/Summary/index.js +++ b/src/components/Set/Summary/index.js @@ -12,7 +12,7 @@ import { setDBs } from 'utils/processDescription/handlers'; import Literature from 'components/Entry/Literature'; import ClanViewer from 'clanviewer'; -import 'clanviewer/css/clanviewer.css'; +import 'clanviewer/build/main.css'; import ZoomOverlay from 'components/ZoomOverlay'; import { foundationPartial } from 'styles/foundation'; diff --git a/src/styles/interpro-new.css b/src/styles/interpro-new.css index 320200873..d36ce802b 100644 --- a/src/styles/interpro-new.css +++ b/src/styles/interpro-new.css @@ -1281,11 +1281,10 @@ details.option-style > summary { } .clanviewer g.node circle { fill: #1f77b4; - stroke: #186092; stroke-width: 1px; } .clanviewer g.node:hover circle { - stroke: #2199e8; + stroke: lightgray; fill: #2199e8; cursor: pointer; } diff --git a/webpack.config.js b/webpack.config.js index aa48a3630..3765040fc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -157,7 +157,7 @@ const getConfigFor = (env, mode, module = false) => { /react-msa-viewer/, path.resolve('node_modules', 'd3'), path.resolve('node_modules', 'idb'), - path.resolve('node_modules', 'clanviewer'), + // path.resolve('node_modules', 'clanviewer'), path.resolve('node_modules', 'interpro-components'), path.resolve('node_modules', 'lit-html'), ], From 7e48d8e1ffd3e7c7e22cff74a8b9778674536bf8 Mon Sep 17 00:00:00 2001 From: "Gustavo A. Salazar" Date: Fri, 6 May 2022 09:30:11 +0100 Subject: [PATCH 3/9] selector for label in clanviewer --- src/components/Set/Summary/index.js | 38 +++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/src/components/Set/Summary/index.js b/src/components/Set/Summary/index.js index a57b76c63..dafc110e4 100644 --- a/src/components/Set/Summary/index.js +++ b/src/components/Set/Summary/index.js @@ -159,11 +159,24 @@ class SummarySet extends PureComponent /*:: */ { this.props.data.metadata.relationships.nodes.length <= MAX_NUMBER_OF_NODES ) this.setState({ showClanViewer: true }); - this._ref.current.addEventListener('click', this._handleClick); + this._ref.current.addEventListener('click', (evt) => + this._handleClick(evt), + ); } componentDidUpdate(prevProps) { if (prevProps.data !== this.props.data) this.loaded = false; + this.repaint(); + } + + componentWillUnmount() { + if (this._ref.current) { + this._ref.current.removeEventListener('click', this._handleClick); + } + // TODO: Update clanviewer to clean SVG + this._vis.clear(); + } + repaint() { if ( (this.state.showClanViewer || this.props.data.metadata.relationships.nodes.length <= @@ -177,14 +190,6 @@ class SummarySet extends PureComponent /*:: */ { } } - componentWillUnmount() { - if (this._ref.current) { - this._ref.current.removeEventListener('click', this._handleClick); - } - // TODO: Update clanviewer to clean SVG - this._vis.clear(); - } - _handleClick = (event) => { const g = event .composedPath() @@ -199,7 +204,12 @@ class SummarySet extends PureComponent /*:: */ { }); } }; - + _handleSelectChange = (evt) => { + if (this._vis.nodeLabel === evt.target.value) return; + this.loaded = false; + this._vis.nodeLabel = evt.target.value; + this.repaint(); + }; render() { const metadata = this.props.loading || !this.props.data.metadata @@ -307,6 +317,14 @@ class SummarySet extends PureComponent /*:: */ { )} +
+
Label Content
+ +
Date: Fri, 6 May 2022 16:16:38 +0100 Subject: [PATCH 4/9] shortname label for sets with local state --- package-lock.json | 145 +++++++++++++--------------- package.json | 2 +- src/components/Set/Summary/index.js | 3 +- 3 files changed, 68 insertions(+), 82 deletions(-) diff --git a/package-lock.json b/package-lock.json index a9f40ddcf..ea91b94c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3164,8 +3164,7 @@ "dependencies": { "ansi-regex": { "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "resolved": "", "dev": true } } @@ -10216,9 +10215,9 @@ "dev": true }, "async": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", - "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=" + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz", + "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==" }, "async-each": { "version": "1.0.3", @@ -11650,7 +11649,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -11660,7 +11658,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "requires": { "color-convert": "^2.0.1" } @@ -11669,7 +11666,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "requires": { "color-name": "~1.1.4" } @@ -11677,20 +11673,17 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "requires": { "has-flag": "^4.0.0" } @@ -11816,9 +11809,9 @@ "dev": true }, "clanviewer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/clanviewer/-/clanviewer-1.0.1.tgz", - "integrity": "sha512-zl5fwYzL8ahfoBrZxEL8ob07+FhNljlYCtnUfjSulhjSycLAgXcoJU2M1/VYOniuNSjwicNlYb00T0L9w91gxA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/clanviewer/-/clanviewer-1.1.0.tgz", + "integrity": "sha512-eOOebHJkXd3ispRgsWdT4H2TRY92EnayzIOYyqWnO6+Orvyo6MAgTWQSG2e/cw6jxjM8l3bFW0F0llPoowBCrw==", "requires": { "d3-drag": "3.0.0", "d3-force": "3.0.0", @@ -14247,11 +14240,11 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "ejs": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", - "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.7.tgz", + "integrity": "sha512-BIar7R6abbUxDA3bfXrO4DSgwo8I+fB5/1zgujl3HLLjwd6+9iOnrT+t3grn2qbk9vOgBubXOFwX2m9axoFaGw==", "requires": { - "jake": "^10.6.1" + "jake": "^10.8.5" } }, "electron-to-chromium": { @@ -15798,11 +15791,29 @@ "optional": true }, "filelist": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", - "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.3.tgz", + "integrity": "sha512-LwjCsruLWQULGYKy7TX0OPtrL9kLpojOFKc5VCTxdFTV7w5zbsgqVKfnkKG7Qgjtq50gKfO56hJv88OfcGb70Q==", "requires": { - "minimatch": "^3.0.4" + "minimatch": "^5.0.1" + }, + "dependencies": { + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "requires": { + "balanced-match": "^1.0.0" + } + }, + "minimatch": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz", + "integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==", + "requires": { + "brace-expansion": "^2.0.1" + } + } } }, "filesize": { @@ -15913,8 +15924,7 @@ }, "ansi-regex": { "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "resolved": "", "dev": true }, "argparse": { @@ -18739,26 +18749,14 @@ } }, "jake": { - "version": "10.8.2", - "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz", - "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==", + "version": "10.8.5", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", + "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==", "requires": { - "async": "0.9.x", - "chalk": "^2.4.2", + "async": "^3.2.3", + "chalk": "^4.0.2", "filelist": "^1.0.1", "minimatch": "^3.0.4" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - } } }, "javascript-stringify": { @@ -20099,9 +20097,9 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "linkify-it": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", - "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz", + "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==", "requires": { "uc.micro": "^1.0.1" } @@ -20732,29 +20730,21 @@ "dev": true }, "markdown-it": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz", - "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==", + "version": "12.3.2", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz", + "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==", "requires": { - "argparse": "^1.0.7", - "entities": "~2.0.0", - "linkify-it": "^2.0.0", + "argparse": "^2.0.1", + "entities": "~2.1.0", + "linkify-it": "^3.0.1", "mdurl": "^1.0.1", "uc.micro": "^1.0.5" }, "dependencies": { - "argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "requires": { - "sprintf-js": "~1.0.2" - } - }, "entities": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz", - "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz", + "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==" } } }, @@ -21258,9 +21248,9 @@ } }, "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" }, "minimist-options": { "version": "4.1.0", @@ -21406,14 +21396,14 @@ "dev": true }, "modernizr": { - "version": "3.11.8", - "resolved": "https://registry.npmjs.org/modernizr/-/modernizr-3.11.8.tgz", - "integrity": "sha512-mIgcvCgEgjqG+w6a/wicWBWPDSGkyEwd9aBaeBS6XWOcr2MLT8lzZi7HUECZMqlCOyQ/o7eSX4l6yWDDDBA4Ig==", + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/modernizr/-/modernizr-3.12.0.tgz", + "integrity": "sha512-i5f5xfnxMOb3cePoBpwk4bWjVAyIB3hgm7QrDvZx/R7zUUS8PO9zlyQF7vJKn8kCVxEvL0nRWeZ0PPqVbY31sw==", "requires": { "doctrine": "^3.0.0", "file": "^0.2.2", "lodash": "^4.17.21", - "markdown-it": "^10.0.0", + "markdown-it": "^12.3.2", "mkdirp": "0.5.5", "requirejs": "^2.3.6", "yargs": "^15.4.1" @@ -24130,8 +24120,7 @@ }, "prismjs": { "version": "1.26.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", - "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==", + "resolved": "", "dev": true }, "private": { @@ -25275,8 +25264,7 @@ }, "refractor": { "version": "3.5.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz", - "integrity": "sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==", + "resolved": "", "dev": true, "requires": { "hastscript": "^6.0.0", @@ -27063,7 +27051,8 @@ "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", + "dev": true }, "sshpk": { "version": "1.17.0", @@ -27652,8 +27641,7 @@ "dependencies": { "ansi-regex": { "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "resolved": "", "dev": true }, "emoji-regex": { @@ -28849,8 +28837,7 @@ "dependencies": { "ansi-regex": { "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "resolved": "", "dev": true }, "boxen": { diff --git a/package.json b/package.json index 05e7fceee..60307e446 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "@tippy.js/react": "3.1.1", "@webcomponents/webcomponentsjs": "2.6.0", "EBI-Icon-fonts": "1.3.1", - "clanviewer": "^1.0.1", + "clanviewer": "^1.1.0", "clipboard": "2.0.11", "color-hash": "2.0.1", "core-js": "3.22.4", diff --git a/src/components/Set/Summary/index.js b/src/components/Set/Summary/index.js index dafc110e4..7bcb75ab6 100644 --- a/src/components/Set/Summary/index.js +++ b/src/components/Set/Summary/index.js @@ -207,8 +207,7 @@ class SummarySet extends PureComponent /*:: */ { _handleSelectChange = (evt) => { if (this._vis.nodeLabel === evt.target.value) return; this.loaded = false; - this._vis.nodeLabel = evt.target.value; - this.repaint(); + this._vis.updateNodeLabel(evt.target.value); }; render() { const metadata = From 834640f253e1368dd4d2e9d1f8af744902f67001 Mon Sep 17 00:00:00 2001 From: "Gustavo A. Salazar" Date: Mon, 9 May 2022 12:17:55 +0100 Subject: [PATCH 5/9] dispaying details of node hovered in clan viewer --- src/components/ProtVista/index.js | 2 +- src/components/Set/Summary/index.js | 57 +++++++++++++++++++++------- src/components/Set/Summary/style.css | 17 +++++++++ 3 files changed, 62 insertions(+), 14 deletions(-) create mode 100644 src/components/Set/Summary/style.css diff --git a/src/components/ProtVista/index.js b/src/components/ProtVista/index.js index 8283884b2..17136504c 100644 --- a/src/components/ProtVista/index.js +++ b/src/components/ProtVista/index.js @@ -454,7 +454,7 @@ export class ProtVista extends Component /*:: */ { if (label.accession) text += entry.accession; if (text.length > 0 && label.name) text += ': '; if (label.name) text += entry.name; - if (text.length == 0) text += entry.accession; + if (text.length === 0) text += entry.accession; return ( <> {type} diff --git a/src/components/Set/Summary/index.js b/src/components/Set/Summary/index.js index 7bcb75ab6..315fca6a2 100644 --- a/src/components/Set/Summary/index.js +++ b/src/components/Set/Summary/index.js @@ -15,15 +15,16 @@ import ClanViewer from 'clanviewer'; import 'clanviewer/build/main.css'; import ZoomOverlay from 'components/ZoomOverlay'; -import { foundationPartial } from 'styles/foundation'; -import ebiGlobalStyles from 'ebi-framework/css/ebi-global.css'; - -const f = foundationPartial(ebiGlobalStyles); - import loadable from 'higherOrder/loadable'; import config from 'config'; import descriptionToPath from 'utils/processDescription/descriptionToPath'; +import { foundationPartial } from 'styles/foundation'; +import ebiGlobalStyles from 'ebi-framework/css/ebi-global.css'; +import style from './style.css'; + +const f = foundationPartial(ebiGlobalStyles, style); + /*:: type Props = { data: { metadata: Object, @@ -140,7 +141,7 @@ class SummarySet extends PureComponent /*:: */ { super(props); this._ref = React.createRef(); - this.state = { showClanViewer: false }; + this.state = { showClanViewer: false, nodeHovered: null }; this.loaded = false; } @@ -165,7 +166,10 @@ class SummarySet extends PureComponent /*:: */ { } componentDidUpdate(prevProps) { - if (prevProps.data !== this.props.data) this.loaded = false; + if ( + prevProps.data.metadata.accession !== this.props.data.metadata.accession + ) + this.loaded = false; this.repaint(); } @@ -187,6 +191,14 @@ class SummarySet extends PureComponent /*:: */ { this._vis.clear(); this._vis.paint(data, false); this.loaded = true; + for (const node of this._ref.current.querySelectorAll('g.node')) { + node.addEventListener('mouseenter', (evt) => { + this.setState({ nodeHovered: evt.target.__data__ }); + }); + node.addEventListener('mouseleave', () => { + this.setState({ nodeHovered: null }); + }); + } } } @@ -206,7 +218,6 @@ class SummarySet extends PureComponent /*:: */ { }; _handleSelectChange = (evt) => { if (this._vis.nodeLabel === evt.target.value) return; - this.loaded = false; this._vis.updateNodeLabel(evt.target.value); }; render() { @@ -324,11 +335,31 @@ class SummarySet extends PureComponent /*:: */ {
-
+
+
+
+
    +
  • + Accession: {this.state?.nodeHovered?.accession} +
    • +
  • + Name: {this.state?.nodeHovered?.name} +
    • +
  • + Short name: {this.state?.nodeHovered?.short_name} +
    • +
+
+
diff --git a/src/components/Set/Summary/style.css b/src/components/Set/Summary/style.css new file mode 100644 index 000000000..01c7e2ef4 --- /dev/null +++ b/src/components/Set/Summary/style.css @@ -0,0 +1,17 @@ +.clanviewer-container { + position: relative; + & .legends { + position: absolute; + top: 0; + border: 1px solid rgba(50, 50, 50, 0.5); + width: 50%; + pointer-events: none; + background-color: rgba(255, 255, 255, 0.8); + opacity: 1; + transition: opacity 0.4s ease; + & ul { + padding: 0.5em; + margin: 0; + } + } +} From 0931b7619cea9b6c42287a63c85d20e7375864e0 Mon Sep 17 00:00:00 2001 From: "Gustavo A. Salazar" Date: Mon, 9 May 2022 12:55:28 +0100 Subject: [PATCH 6/9] fixing storybook to deal with clanviewer ts --- .storybook/main.js | 17 ++++++++++++++--- stories/ClanViewer.stories.js | 1 - 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 490b5cf2f..a6b7a4ef9 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -12,7 +12,7 @@ module.exports = { '@storybook/addon-knobs', '@storybook/addon-postcss', ], - + typescript: { reactDocgen: 'none' }, webpackFinal: async (config) => { // do mutation to the config config.resolve.modules.push(path.resolve('.', 'src')); @@ -20,16 +20,27 @@ module.exports = { test.toString().includes('.css') ); - cssRule.exclude = /tippy.css$/i; + cssRule.exclude = /((tippy)|(clanviewer))\.css$/i; config.module.rules.push({ - test: /tippy.css$/i, + test: /((tippy)|(clanviewer))\.css$/i, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], }); config.module.rules.push({ test: /\.yml$/i, use: [{ loader: 'yaml-loader' }], }); + config.module.rules.push({ + test: /\.ts$/, + use: [ + { + loader: 'ts-loader', + options: { + transpileOnly: true, + }, + }, + ], + }); config.module.rules.push({ test: /\.avif$/i, use: [ diff --git a/stories/ClanViewer.stories.js b/stories/ClanViewer.stories.js index dccc4a0fd..f4cd6e71f 100644 --- a/stories/ClanViewer.stories.js +++ b/stories/ClanViewer.stories.js @@ -1,7 +1,6 @@ import React, { useEffect, useRef } from 'react'; import ClanViewer from 'clanviewer'; -import 'clanviewer/css/clanviewer.css'; export default { title: 'InterPro UI/ClanViewer', From f0ba0b133009e352c39fd716e26d21875ca6f9c5 Mon Sep 17 00:00:00 2001 From: "Gustavo A. Salazar" Date: Mon, 9 May 2022 16:18:01 +0100 Subject: [PATCH 7/9] updating the overlay --- package-lock.json | 24 +++++++++++++++--------- package.json | 2 +- src/components/Set/Summary/index.js | 5 +++-- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea91b94c2..492a8d8a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3164,7 +3164,8 @@ "dependencies": { "ansi-regex": { "version": "4.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true } } @@ -15924,7 +15925,8 @@ }, "ansi-regex": { "version": "4.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, "argparse": { @@ -24120,7 +24122,8 @@ }, "prismjs": { "version": "1.26.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==", "dev": true }, "private": { @@ -24287,9 +24290,9 @@ } }, "protvista-overlay": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/protvista-overlay/-/protvista-overlay-3.0.0.tgz", - "integrity": "sha512-hyh4ZzXKYNUuP0kisVHyYhzHl+JV8eDVPn7u01fzCB2itP9Qv6f1FaCs8TV74MMO4GFmII2INLBislNm9EqFIw==", + "version": "3.5.10", + "resolved": "https://registry.npmjs.org/protvista-overlay/-/protvista-overlay-3.5.10.tgz", + "integrity": "sha512-QWGF2pSarpfuhWuo62A80cN4GA3qFSqamBBuJsputduS2XblmG+NK0bfkpzhgs0PS4ChVeWq/GRk7pU/aHiAjg==", "requires": { "resize-observer-polyfill": "^1.5.0" } @@ -25264,7 +25267,8 @@ }, "refractor": { "version": "3.5.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz", + "integrity": "sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==", "dev": true, "requires": { "hastscript": "^6.0.0", @@ -27641,7 +27645,8 @@ "dependencies": { "ansi-regex": { "version": "4.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, "emoji-regex": { @@ -28837,7 +28842,8 @@ "dependencies": { "ansi-regex": { "version": "4.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, "boxen": { diff --git a/package.json b/package.json index 60307e446..49b57e55f 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "protvista-manager": "3.4.0", "protvista-msa": "3.4.0", "protvista-navigation": "3.5.1", - "protvista-overlay": "3.0.0", + "protvista-overlay": "^3.5.10", "protvista-saver": "3.1.2", "protvista-sequence": "3.5.1", "protvista-track": "3.4.0", diff --git a/src/components/Set/Summary/index.js b/src/components/Set/Summary/index.js index 315fca6a2..4b811419b 100644 --- a/src/components/Set/Summary/index.js +++ b/src/components/Set/Summary/index.js @@ -167,7 +167,8 @@ class SummarySet extends PureComponent /*:: */ { componentDidUpdate(prevProps) { if ( - prevProps.data.metadata.accession !== this.props.data.metadata.accession + prevProps.data?.metadata?.accession !== + this.props?.data?.metadata?.accession ) this.loaded = false; this.repaint(); @@ -326,7 +327,6 @@ class SummarySet extends PureComponent /*:: */ { )} -
Label Content
+
Date: Tue, 10 May 2022 13:03:07 +0100 Subject: [PATCH 8/9] using the redux state for the content of the set labels --- src/components/ProtVista/Options/LabelBy.js | 93 +++++++++++++++++++++ src/components/ProtVista/Options/index.js | 59 +------------ src/components/ProtVista/index.js | 13 +-- src/components/Set/Summary/index.js | 89 ++++++++++++++------ src/utils/text/index.js | 84 ++++++++++++------- 5 files changed, 215 insertions(+), 123 deletions(-) create mode 100644 src/components/ProtVista/Options/LabelBy.js diff --git a/src/components/ProtVista/Options/LabelBy.js b/src/components/ProtVista/Options/LabelBy.js new file mode 100644 index 000000000..26004857e --- /dev/null +++ b/src/components/ProtVista/Options/LabelBy.js @@ -0,0 +1,93 @@ +// @flow +import React from 'react'; +import T from 'prop-types'; + +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; + +import { changeSettingsRaw } from 'actions/creators'; + +import { foundationPartial } from 'styles/foundation'; + +import protvistaCSS from '../style.css'; + +const f = foundationPartial(protvistaCSS); + +const LabelBy = ( + { labelContent, changeSettingsRaw } /*: { + labelContent: { + accession: boolean, + name: boolean, + short: boolean, + }, + changeSettingsRaw:function } */, +) => { + const updateLabel = (evt) => { + const opt = evt.target.value; + const next = { + ...labelContent, + [opt]: !labelContent[opt], + }; + if (!next.accession && !next.name && !next.short) { + next.accession = true; + } + changeSettingsRaw('ui', 'labelContent', next); + }; + return ( +
  • + Label by +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    • + ); +}; +LabelBy.propTypes = { + labelContent: T.shape({ + accession: T.bool, + name: T.bool, + short: T.bool, + }), + changeSettingsRaw: T.func, +}; + +const mapStateToProps = createSelector( + (state) => state.settings.ui, + (ui) => ({ + labelContent: ui.labelContent, + }), +); + +export default connect(mapStateToProps, { changeSettingsRaw })(LabelBy); diff --git a/src/components/ProtVista/Options/index.js b/src/components/ProtVista/Options/index.js index 7ddbfe9c8..29ef8d594 100644 --- a/src/components/ProtVista/Options/index.js +++ b/src/components/ProtVista/Options/index.js @@ -18,6 +18,8 @@ import { getUrlForMeta } from 'higherOrder/loadData/defaults'; import { changeSettingsRaw } from 'actions/creators'; import { createSelector } from 'reselect'; +import LabelBy from './LabelBy'; + import { foundationPartial } from 'styles/foundation'; import fonts from 'EBI-Icon-fonts/fonts.css'; @@ -42,11 +44,6 @@ const ONE_SEC = 1000; webTracks: Object, expandedTrack: Object, colorDomainsBy: string, - labelContent: { - accession: boolean, - name: boolean, - short: boolean, - }, changeSettingsRaw: function, updateTracksCollapseStatus: function, toggleTooltipStatus: function, @@ -173,18 +170,6 @@ class ProtVistaOptions extends Component /*:: */ { this.props.changeSettingsRaw('ui', 'colorDomainsBy', colorMode); }; - updateLabel = (evt) => { - const opt = evt.target.value; - const next = { - ...this.props.labelContent, - [opt]: !this.props.labelContent[opt], - }; - if (!next.accession && !next.name && !next.short) { - next.accession = true; - } - this.props.changeSettingsRaw('ui', 'labelContent', next); - }; - toggleTooltipStatus = () => { this.setState({ enableTooltip: !this.state.enableTooltip, @@ -289,44 +274,7 @@ class ProtVistaOptions extends Component /*:: */ {
    -
  • - Label by -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    • +
  • Snapshot @@ -412,7 +360,6 @@ const mapStateToProps = createSelector( (state) => state.settings.ui, (ui) => ({ colorDomainsBy: ui.colorDomainsBy || EntryColorMode.DOMAIN_RELATIONSHIP, - labelContent: ui.labelContent, }), ); diff --git a/src/components/ProtVista/index.js b/src/components/ProtVista/index.js index 17136504c..a0892d4ab 100644 --- a/src/components/ProtVista/index.js +++ b/src/components/ProtVista/index.js @@ -5,8 +5,6 @@ import T from 'prop-types'; import { createSelector } from 'reselect'; import { isEqual } from 'lodash-es'; -import id from 'utils/cheap-unique-id'; - import ProtVistaOptions from './Options'; import ProtVistaPopup from './Popup'; import Tooltip from 'components/SimpleCommonComponents/Tooltip'; @@ -31,6 +29,8 @@ import spinner from 'components/SimpleCommonComponents/Loading/style.css'; import PopperJS from 'popper.js'; import loadWebComponent from 'utils/load-web-component'; +import { getTextForLabel } from 'utils/text'; +import id from 'utils/cheap-unique-id'; import loadData from 'higherOrder/loadData'; import { goToCustomLocation } from 'actions/creators'; @@ -449,16 +449,11 @@ export class ProtVista extends Component /*:: */ { ) : null; if (entry.accession.startsWith('residue:')) return entry.accession.split('residue:')[1]; - let text = label.short ? entry.short_name || '' : ''; - if (text.length > 0 && label.accession) text += ' - '; - if (label.accession) text += entry.accession; - if (text.length > 0 && label.name) text += ': '; - if (label.name) text += entry.name; - if (text.length === 0) text += entry.accession; + return ( <> {type} - {text} + {getTextForLabel(entry, label)} ); } diff --git a/src/components/Set/Summary/index.js b/src/components/Set/Summary/index.js index 4b811419b..4010939b8 100644 --- a/src/components/Set/Summary/index.js +++ b/src/components/Set/Summary/index.js @@ -1,3 +1,4 @@ +// @flow import React, { PureComponent } from 'react'; import T from 'prop-types'; import { connect } from 'react-redux'; @@ -7,8 +8,10 @@ import { goToCustomLocation } from 'actions/creators'; import Accession from 'components/Accession'; import Description from 'components/Description'; +import DropDownButton from 'components/SimpleCommonComponents/DropDownButton'; import { BaseLink } from 'components/ExtLink'; import { setDBs } from 'utils/processDescription/handlers'; +import { getTextForLabel } from 'utils/text'; import Literature from 'components/Entry/Literature'; import ClanViewer from 'clanviewer'; @@ -22,21 +25,35 @@ import descriptionToPath from 'utils/processDescription/descriptionToPath'; import { foundationPartial } from 'styles/foundation'; import ebiGlobalStyles from 'ebi-framework/css/ebi-global.css'; import style from './style.css'; +import LabelBy from '../../ProtVista/Options/LabelBy'; const f = foundationPartial(ebiGlobalStyles, style); -/*:: type Props = { +/*:: +type Props = { data: { metadata: Object, }, db: string, goToCustomLocation: function, customLocation: Object, - loading: boolean -}; */ -/*:: type State = { - showClanViewer: boolean -}; */ + loading: boolean, + label: { + accession: boolean, + name: boolean, + short: boolean, + }, +}; + +type State = { + showClanViewer: boolean, + nodeHovered: null | { + accession:string, + name:string, + short_name:string, + } +}; + */ const SchemaOrgData = loadable({ loader: () => import(/* webpackChunkName: "schemaOrg" */ 'schema_org'), loading: () => null, @@ -124,7 +141,7 @@ SetAuthors.propTypes = { class SummarySet extends PureComponent /*:: */ { /*:: _ref: { current: null | React$ElementRef<'div'> }; - _vis: ClanViewer; + _vis: typeof ClanViewer; loaded: boolean; */ static propTypes = { @@ -135,6 +152,11 @@ class SummarySet extends PureComponent /*:: */ { goToCustomLocation: T.func.isRequired, customLocation: T.object.isRequired, loading: T.bool.isRequired, + label: T.shape({ + accession: T.bool, + name: T.bool, + short: T.bool, + }), }; constructor(props /*: Props */) { @@ -151,6 +173,10 @@ class SummarySet extends PureComponent /*:: */ { element: this._ref.current, useCtrlToZoom: true, height: 600, + nodeLabel: (node) => { + console.log(node); + return getTextForLabel(node, this.props.label); + }, }); if ( this.props.data && @@ -160,12 +186,13 @@ class SummarySet extends PureComponent /*:: */ { this.props.data.metadata.relationships.nodes.length <= MAX_NUMBER_OF_NODES ) this.setState({ showClanViewer: true }); - this._ref.current.addEventListener('click', (evt) => + this._ref.current?.addEventListener('click', (evt /*: Event */) => this._handleClick(evt), ); } componentDidUpdate(prevProps) { + if (prevProps.label !== this.props.label) this._refreshLabels(); if ( prevProps.data?.metadata?.accession !== this.props?.data?.metadata?.accession @@ -176,7 +203,7 @@ class SummarySet extends PureComponent /*:: */ { componentWillUnmount() { if (this._ref.current) { - this._ref.current.removeEventListener('click', this._handleClick); + this._ref.current?.removeEventListener('click', this._handleClick); } // TODO: Update clanviewer to clean SVG this._vis.clear(); @@ -192,9 +219,11 @@ class SummarySet extends PureComponent /*:: */ { this._vis.clear(); this._vis.paint(data, false); this.loaded = true; - for (const node of this._ref.current.querySelectorAll('g.node')) { - node.addEventListener('mouseenter', (evt) => { - this.setState({ nodeHovered: evt.target.__data__ }); + for (const node /*: HTMLElement */ of this._ref.current?.querySelectorAll( + 'g.node', + ) || []) { + node.addEventListener('mouseenter', (evt /*: Event */) => { + this.setState({ nodeHovered: (evt.target /*: any */).__data__ }); }); node.addEventListener('mouseleave', () => { this.setState({ nodeHovered: null }); @@ -203,23 +232,27 @@ class SummarySet extends PureComponent /*:: */ { } } - _handleClick = (event) => { + _handleClick = (event /*: Event */) => { const g = event .composedPath() - .filter((e) => e.nodeName === 'g') - .filter((e) => e.classList.contains('node'))?.[0]; + .filter((e /*: any */) => e.nodeName === 'g') + .filter((e /*: any */) => e.classList.contains('node'))?.[0]; if (g) { this.props.goToCustomLocation({ description: { main: { key: 'entry' }, - entry: { db: this.props.db, accession: g.dataset.accession }, + entry: { + db: this.props.db, + accession: (g /*: any */).dataset.accession, + }, }, }); } }; - _handleSelectChange = (evt) => { - if (this._vis.nodeLabel === evt.target.value) return; - this._vis.updateNodeLabel(evt.target.value); + _refreshLabels = () => { + this._vis.updatingLabels = true; + if (this._vis.tick) this._vis.tick(); + this._vis.updatingLabels = false; }; render() { const metadata = @@ -228,6 +261,9 @@ class SummarySet extends PureComponent /*:: */ { accession: '', description: '', id: '', + source_database: '', + authors: null, + literature: null, } : this.props.data.metadata; let currentSet = null; @@ -328,12 +364,12 @@ class SummarySet extends PureComponent /*:: */ {
    • )}
    -
    Label Content
    - + + +
    @@ -370,7 +406,8 @@ class SummarySet extends PureComponent /*:: */ { const mapStateToProps = createSelector( (state) => state.customLocation.description.set.db, - (db) => ({ db }), + (state) => state.settings.ui, + (db, ui) => ({ db, label: ui.labelContent }), ); export default connect(mapStateToProps, { goToCustomLocation })(SummarySet); diff --git a/src/utils/text/index.js b/src/utils/text/index.js index fdcb60dcb..639090491 100644 --- a/src/utils/text/index.js +++ b/src/utils/text/index.js @@ -2,14 +2,11 @@ export const transformFormatted = (txt /*: string */) => txt .split(/<\/?p>/i) - .map(t => t.trim()) + .map((t) => t.trim()) .filter(Boolean); export const unescape = (txt /*: string */) => - txt - .replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>'); + txt.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); export const subsetText = ( text /*: string */, @@ -23,31 +20,33 @@ export const subsetText = ( return output; }; -export const findStart = (centerOfHighlight /*: number */) => ( - text /*: string */, - textToHighlight /*:: ?: ?string */, - maxLength /*: number */, -) => { - // No text to highlight? Just use 0 as start - if (!textToHighlight) return 0; - // If the text is shorter than the maxLength, just use 0 - if (text.length <= maxLength) return 0; - // find index of first letter of first match of highlighted text in text - const index = text.toLowerCase().indexOf(textToHighlight.toLowerCase()); - // if no match, start at the beginning - if (index === -1) return 0; - // if the full match is within the maximum length of text to display, - // start at the beginning - if (index + textToHighlight.length <= maxLength) return 0; - // center the index, to use the middle of the highlight as a reference - const centeredIndex = index + textToHighlight.length / 2; - // find start, using previous index as center, center of highlight to adjust - const start = Math.round(centeredIndex - maxLength * centerOfHighlight); - // if start position is too close to the end of the text, move the start - if (start + maxLength > text.length) return text.length - maxLength; - // after all those checks, if we're still here, return this start position - return start; -}; +export const findStart = + (centerOfHighlight /*: number */) => + ( + text /*: string */, + textToHighlight /*:: ?: ?string */, + maxLength /*: number */, + ) => { + // No text to highlight? Just use 0 as start + if (!textToHighlight) return 0; + // If the text is shorter than the maxLength, just use 0 + if (text.length <= maxLength) return 0; + // find index of first letter of first match of highlighted text in text + const index = text.toLowerCase().indexOf(textToHighlight.toLowerCase()); + // if no match, start at the beginning + if (index === -1) return 0; + // if the full match is within the maximum length of text to display, + // start at the beginning + if (index + textToHighlight.length <= maxLength) return 0; + // center the index, to use the middle of the highlight as a reference + const centeredIndex = index + textToHighlight.length / 2; + // find start, using previous index as center, center of highlight to adjust + const start = Math.round(centeredIndex - maxLength * centerOfHighlight); + // if start position is too close to the end of the text, move the start + if (start + maxLength > text.length) return text.length - maxLength; + // after all those checks, if we're still here, return this start position + return start; + }; export const location2html = ( locations /*: Array */, @@ -62,12 +61,33 @@ export const location2html = ( if (locations) { text += `${locations .map( - loc => + (loc) => `

    ${loc.fragments - .map(f => `${f.start}-${f.end}`) + .map((f) => `${f.start}-${f.end}`) .join('
    ')}

    `, ) .join('')}`; } return text; }; + +export const getTextForLabel = ( + entry /*: { + accession: string; + name: string; + short_name: string; + } */, + label /*: { + accession: boolean; + name: boolean; + short: boolean; + } */, +) /*: string */ => { + let text = label.short ? entry.short_name || '' : ''; + if (text.length > 0 && label.accession) text += ' - '; + if (label.accession) text += entry.accession; + if (text.length > 0 && label.name) text += ': '; + if (label.name) text += entry.name; + if (text.length === 0) text += entry.accession; + return text; +}; From 804011e408af84b8bb6f4586a79804a1bf995eb7 Mon Sep 17 00:00:00 2001 From: "Gustavo A. Salazar" Date: Mon, 23 May 2022 14:24:47 +0100 Subject: [PATCH 9/9] remove todo --- src/components/Set/Summary/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Set/Summary/index.js b/src/components/Set/Summary/index.js index 4010939b8..41790341d 100644 --- a/src/components/Set/Summary/index.js +++ b/src/components/Set/Summary/index.js @@ -205,7 +205,6 @@ class SummarySet extends PureComponent /*:: */ { if (this._ref.current) { this._ref.current?.removeEventListener('click', this._handleClick); } - // TODO: Update clanviewer to clean SVG this._vis.clear(); } repaint() {