Merge pull request #388 from ProteinsWebTeam/shortname_set

Shortname set

.storybook/main.js

@@ -12,24 +12,35 @@ 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'));
     const cssRule = config.module.rules.find(({ test }) =>
       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: [

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.1.0",
+    "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,15 +115,15 @@
     "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",
     "protvista-links": "3.4.0",
     "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",
@@ -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",

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 (
+    <li>
+      Label by
+      <ul className={f('nested-list')}>
+        <li key={'accession'}>
+          <label>
+            <input
+              type="checkbox"
+              onChange={updateLabel}
+              value={'accession'}
+              checked={labelContent.accession}
+            />{' '}
+            Accession
+          </label>
+        </li>
+        <li key={'name'}>
+          <label>
+            <input
+              type="checkbox"
+              onChange={updateLabel}
+              value={'name'}
+              checked={labelContent.name}
+            />{' '}
+            Name
+          </label>
+        </li>
+        <li key={'shortname'}>
+          <label>
+            <input
+              type="checkbox"
+              onChange={updateLabel}
+              value={'short'}
+              checked={labelContent.short}
+            />{' '}
+            Short Name
+          </label>
+        </li>
+      </ul>
+    </li>
+  );
+};
+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);

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 /*:: <Props, State> */ {
     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 /*:: <Props, State> */ {
                   </ul>
                 </li>
                 <hr />
-                <li>
-                  Label by
-                  <ul className={f('nested-list')}>
-                    <li key={'accession'}>
-                      <label>
-                        <input
-                          type="checkbox"
-                          onChange={this.updateLabel}
-                          value={'accession'}
-                          checked={this.props.labelContent.accession}
-                        />{' '}
-                        Accession
-                      </label>
-                    </li>
-                    <li key={'name'}>
-                      <label>
-                        <input
-                          type="checkbox"
-                          onChange={this.updateLabel}
-                          value={'name'}
-                          checked={this.props.labelContent.name}
-                        />{' '}
-                        Name
-                      </label>
-                    </li>
-                    <li key={'shortname'}>
-                      <label>
-                        <input
-                          type="checkbox"
-                          onChange={this.updateLabel}
-                          value={'short'}
-                          checked={this.props.labelContent.short}
-                        />{' '}
-                        Short Name
-                      </label>
-                    </li>
-                  </ul>
-                </li>
+                <LabelBy />
                 <hr />
                 <li>
                   Snapshot
@@ -412,7 +360,6 @@ const mapStateToProps = createSelector(
   (state) => state.settings.ui,
   (ui) => ({
     colorDomainsBy: ui.colorDomainsBy || EntryColorMode.DOMAIN_RELATIONSHIP,
-    labelContent: ui.labelContent,
   }),
 );
 

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 /*:: <Props, State> */ {
       ) : 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)}
       </>
     );
   }