refactor: #3322 remove react spinkit (#3341)

kids-first · Jun 21, 2021 · 8a8d969 · 8a8d969
1 parent dd33622
commit 8a8d969
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 229 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "scriptjs": "^2.5.9",
-    "slick-carousel": "^1.8.1",
     "tinygradient": "^1.1.2"
   },
   "scripts": {

diff --git a/src/components/CohortBuilder/Categories/Filter.js b/src/components/CohortBuilder/Categories/Filter.js
@@ -1,17 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { compose } from 'recompose';
-
 import FieldFilter from '@kfarranger/components/dist/AdvancedSqonBuilder/filterComponents';
 import { isReference } from '@kfarranger/components/dist/AdvancedSqonBuilder/utils';
 import ExtendedMappingProvider from '@kfarranger/components/dist/utils/ExtendedMappingProvider';
-import LoadingSpinner from 'uikit/LoadingSpinner';
+import { Spin } from 'antd';
+import PropTypes from 'prop-types';
+import { compose } from 'recompose';
 
-import { withApi } from 'services/api';
 import { arrangerProjectId as ARRANGER_PROJECT_ID } from 'common/injectGlobals';
+import { withApi } from 'services/api';
+import { sqonShape } from 'shapes';
+
 import { ARRANGER_API_PARTICIPANT_INDEX_NAME } from '../common';
 import { FieldFilterContainer } from '../FieldFilterContainer';
-import { sqonShape } from 'shapes';
 
 /**
  * This component also assumes we are only modifying the first level of sqon
@@ -41,12 +41,12 @@ const Filter = compose(withApi)(
         if (loading) {
           return (
             <FieldFilterContainer applyEnabled={false} onCancel={onCancel} onBack={onBack}>
-              <LoadingSpinner color="#a9adc0" size="30px" />
+              <Spin />
             </FieldFilterContainer>
           );
         }
         const { type } = extendedMapping[0] || {}; // assume extendedMapping[0] since `field` is provided to ExtendedMappingProvider.
-        const contentWithField = initialSqon.content.find(content => {
+        const contentWithField = initialSqon.content.find((content) => {
           if (!isReference(content)) {
             const {
               content: { field: _field },
@@ -94,7 +94,7 @@ const Filter = compose(withApi)(
             field={field}
             arrangerProjectId={arrangerProjectId}
             arrangerProjectIndex={arrangerProjectIndex}
-            ContainerComponent={props => <FieldFilterContainer {...props} onBack={onBack} />}
+            ContainerComponent={(props) => <FieldFilterContainer {...props} onBack={onBack} />}
           />
         );
       }}

diff --git a/src/components/CohortBuilder/ParticipantsTableView/ParticipantsTable.js b/src/components/CohortBuilder/ParticipantsTableView/ParticipantsTable.js
@@ -1,29 +1,32 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import union from 'lodash/union';
+import { connect } from 'react-redux';
+import { Tooltip } from 'antd';
+import autobind from 'auto-bind-es5';
 import compact from 'lodash/compact';
+import get from 'lodash/get';
+import union from 'lodash/union';
+import PropTypes from 'prop-types';
 import { compose, withState } from 'recompose';
-import autobind from 'auto-bind-es5';
-import ControlledDataTable from 'uikit/DataTable/ControlledDataTable';
+
+import { STUDIES_WITH_PEDCBIO } from 'common/constants';
+import FileIcon from 'icons/FileIcon';
+import { TRACKING_EVENTS, trackUserInteraction } from 'services/analyticsTracking';
+import { addTermToActiveIndex } from 'store/actionCreators/virtualStudies';
+import style from 'style/themes/default/colors.module.scss';
 import { Link } from 'uikit/Core';
+import ControlledDataTable from 'uikit/DataTable/ControlledDataTable';
 import { Toolbar, ToolbarGroup, ToolbarSelectionCount } from 'uikit/DataTable/TableToolbar/styles';
 import ColumnFilter from 'uikit/DataTable/ToolbarButtons/ColumnFilter';
 import Export from 'uikit/DataTable/ToolbarButtons/Export';
 import { configureCols } from 'uikit/DataTable/utils/columns';
-import { TRACKING_EVENTS, trackUserInteraction } from 'services/analyticsTracking';
-import { SORTABLE_FIELDS_MAPPING } from './queries';
-import FileIcon from 'icons/FileIcon';
+import ExternalLink from 'uikit/ExternalLink';
+import { externalLink } from 'uikit/ExternalLink.module.css';
+
 import { MONDOLink } from '../../Utils/DiagnosisAndPhenotypeLinks';
 
-import { connect } from 'react-redux';
-import { addTermToActiveIndex } from 'store/actionCreators/virtualStudies';
-import { Tooltip } from 'antd';
-import { externalLink } from 'uikit/ExternalLink.module.css';
+import { SORTABLE_FIELDS_MAPPING } from './queries';
+
 import './ParticipantTableView.css';
-import style from 'style/themes/default/colors.module.scss';
-import ExternalLink from 'uikit/ExternalLink';
-import get from 'lodash/get';
-import { STUDIES_WITH_PEDCBIO } from 'common/constants';
 
 const SelectionCell = ({ value: checked, onCellSelected, row }) => (
   <input
@@ -379,7 +382,7 @@ ParticipantsTable.propTypes = {
   allRowsSelected: PropTypes.bool.isRequired,
   api: PropTypes.func.isRequired,
   addSqonTermToActiveIndex: PropTypes.func,
-  sort: PropTypes.func,
+  sort: PropTypes.array,
   sqon: PropTypes.any,
 };
 

diff --git a/src/components/CohortBuilder/SearchAll/QueryResultsBody.js b/src/components/CohortBuilder/SearchAll/QueryResultsBody.js
@@ -1,8 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import TextHighlight from '@kfarranger/components/dist/TextHighlight';
-import LoadingSpinner from 'uikit/LoadingSpinner';
+import { Spin } from 'antd';
+import PropTypes from 'prop-types';
 
 const QueryResultsBody = ({
   filteredFields,
@@ -17,7 +16,7 @@ const QueryResultsBody = ({
     return null;
   }
 
-  const handleFieldNameClicked = evt => {
+  const handleFieldNameClicked = (evt) => {
     const field = filteredFields[evt.currentTarget.dataset.index];
     if (field && field.matchByDisplayName) {
       onSearchField(field.name);
@@ -43,7 +42,7 @@ const QueryResultsBody = ({
                   type="checkbox"
                   checked={selections[field.name] && selections[field.name].indexOf(key) > -1}
                   className="selection"
-                  onChange={evt => {
+                  onChange={(evt) => {
                     onSelectionChange(evt, field, key);
                   }}
                 />
@@ -55,7 +54,7 @@ const QueryResultsBody = ({
         </div>
       ))}
       <div className={`loader-container ${isLoading ? 'loading' : ''}`}>
-        <LoadingSpinner color="#a9adc0" size="50px" />
+        <Spin />
       </div>
     </div>
   );
@@ -79,6 +78,7 @@ QueryResultsBody.propTypes = {
   selections: PropTypes.object.isRequired,
   onSelectionChange: PropTypes.func.isRequired,
   onSearchField: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
 };
 
 export default QueryResultsBody;
diff --git a/src/components/CohortBuilder/SearchAll/index.js b/src/components/CohortBuilder/SearchAll/index.js
@@ -1,29 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import SearchIcon from 'react-icons/lib/fa/search';
-import { compose } from 'recompose';
+import FaTimesCircleO from 'react-icons/lib/fa/times-circle';
+import ExtendedMappingProvider from '@kfarranger/components/dist/utils/ExtendedMappingProvider';
+import { Spin } from 'antd';
 import autobind from 'auto-bind-es5';
-import memoizeOne from 'memoize-one';
+import Downshift from 'downshift';
 import debounce from 'lodash/debounce';
 import isObject from 'lodash/isObject';
 import mapKeys from 'lodash/mapKeys';
-import Downshift from 'downshift';
-import ExtendedMappingProvider from '@kfarranger/components/dist/utils/ExtendedMappingProvider';
-import FaTimesCircleO from 'react-icons/lib/fa/times-circle';
+import memoizeOne from 'memoize-one';
+import PropTypes from 'prop-types';
+import { compose } from 'recompose';
 
-import { SQONdiff } from '../../Utils';
+import { arrangerProjectId } from 'common/injectGlobals';
+import { TRACKING_EVENTS, trackUserInteraction } from 'services/analyticsTracking';
 import { withApi } from 'services/api';
+import { sqonShape } from 'shapes';
 import Column from 'uikit/Column';
-import LoadingSpinner from 'uikit/LoadingSpinner';
-import { arrangerProjectId } from 'common/injectGlobals';
-import { ARRANGER_API_PARTICIPANT_INDEX_NAME } from '../common';
-import Filter from '../Categories/Filter';
 
+import { SQONdiff } from '../../Utils';
+import Filter from '../Categories/Filter';
+import { ARRANGER_API_PARTICIPANT_INDEX_NAME } from '../common';
 import QueriesResolver from '../QueriesResolver';
+
 import { searchAllQueries } from './queries';
 import QueryResults from './QueryResults';
-import { trackUserInteraction, TRACKING_EVENTS } from 'services/analyticsTracking';
-import { sqonShape } from 'shapes';
 
 import './SearchAll.css';
 
@@ -361,7 +362,7 @@ class SearchAll extends React.Component {
               }
 
               if (extendedMappingIsLoading || isLoading) {
-                return <LoadingSpinner color="#a9adc0" size="30px" />;
+                return <Spin />;
               }
 
               return (

diff --git a/src/components/EntityPage/Participant/ParticipantClinical.js b/src/components/EntityPage/Participant/ParticipantClinical.js
@@ -1,33 +1,36 @@
-import * as React from 'react';
-import get from 'lodash/get';
+import React from 'react';
 import { withRouter } from 'react-router';
 import { Link } from 'react-router-dom';
 import flatMap from 'lodash/flatMap';
+import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import PropTypes from 'prop-types';
 
-import theme from 'theme/defaultTheme';
-import { EntityContentDivider, EntityContentSection } from '../';
-import FamilyTable from './Utils/FamilyTable';
-import sanitize from './Utils/sanitize';
-import ParticipantDataTable from './Utils/ParticipantDataTable';
-import graphql from 'services/arranger';
-import { initializeApi } from '../../../services/api';
-import { setSqons } from 'store/actionCreators/virtualStudies';
 import {
   getDefaultSqon,
   MERGE_OPERATOR_STRATEGIES,
   MERGE_VALUES_STRATEGIES,
   setSqonValueAtIndex,
-} from '../../../common/sqonUtils';
-import { resetVirtualStudy } from '../../../store/actionCreators/virtualStudies';
-import { store } from '../../../store';
-import prettifyAge from './Utils/prettifyAge';
-import { HPOLink, SNOMEDLink, MONDOLink, NCITLink } from '../../Utils/DiagnosisAndPhenotypeLinks';
-import ClinicalIcon from 'icons/ClinicalIcon';
+} from 'common/sqonUtils';
 import BiospecimenIcon from 'icons/BiospecimenIcon';
+import ClinicalIcon from 'icons/ClinicalIcon';
+import { initializeApi } from 'services/api';
+import graphql from 'services/arranger';
+import { store } from 'store';
+import { setSqons } from 'store/actionCreators/virtualStudies';
+import { resetVirtualStudy } from 'store/actionCreators/virtualStudies';
+import theme from 'theme/defaultTheme';
+import { Spinner } from 'uikit/Spinner';
 import Tooltip from 'uikit/Tooltip';
-import LoadingSpinner from 'uikit/LoadingSpinner';
-import PropTypes from 'prop-types';
+
+import { HPOLink, MONDOLink, NCITLink, SNOMEDLink } from '../../Utils/DiagnosisAndPhenotypeLinks';
+import { EntityContentDivider, EntityContentSection } from '../';
+
+import FamilyTable from './Utils/FamilyTable';
+import ParticipantDataTable from './Utils/ParticipantDataTable';
+import prettifyAge from './Utils/prettifyAge';
+import sanitize from './Utils/sanitize';
+
 import './ParticipantClinical.css';
 
 const cellBreak = (wrapper) => (
@@ -356,7 +359,7 @@ class ParticipantClinical extends React.Component {
   render() {
     if (!this.state.hasLoadedPhenotypes || !this.state.hasLoadedDxs) {
       //make sure all data is loaded before deciding what to display.
-      return <LoadingSpinner color="#a9adc0" size="50px" />;
+      return <Spinner size={'large'} />;
     }
     const participant = this.props.participant;
     const diagnoses = this.state.diagnoses;

diff --git a/src/components/EntityPage/Participant/index.js b/src/components/EntityPage/Participant/index.js
@@ -1,30 +1,29 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import isNull from 'lodash/isNull';
-import Spinner from 'react-spinkit';
+import PropTypes from 'prop-types';
 
-import { SecondaryNavMenu, SecondaryNavContent } from 'uikit/SecondaryNav';
 import Column from 'uikit/Column';
 import GenericErrorDisplay from 'uikit/GenericErrorDisplay';
+import { SecondaryNavContent, SecondaryNavMenu } from 'uikit/SecondaryNav';
+import { Spinner } from 'uikit/Spinner';
 
-import { EntityTitleBar, EntityTitle, EntityActionBar, EntityContent } from '../';
-
-import ParticipantSummary from './ParticipantSummary';
-import ParticipantClinical from './ParticipantClinical';
+import { EntityActionBar, EntityContent, EntityTitle, EntityTitleBar } from '../';
 
 import { fetchParticipant } from './actionCreators';
+import ParticipantClinical from './ParticipantClinical';
+import ParticipantSummary from './ParticipantSummary';
 
 import '../EntityPage.css';
 
-const getTags = participant => {
+const getTags = (participant) => {
   const probandTag = participant.is_proband ? 'Proband' : 'Family Member';
   const diagnosisCategories = get(participant, 'diagnoses.hits.edges', [])
-    .map(dc => get(dc, 'node.diagnosis_category', null))
-    .filter(x => x !== null);
+    .map((dc) => get(dc, 'node.diagnosis_category', null))
+    .filter((x) => x !== null);
   const diagnosisTags = new Set(diagnosisCategories);
-  return [...Array.from(diagnosisTags), probandTag].filter(item => !isNull(item));
+  return [...Array.from(diagnosisTags), probandTag].filter((item) => !isNull(item));
 };
 
 class ParticipantEntity extends React.Component {
@@ -60,20 +59,8 @@ class ParticipantEntity extends React.Component {
 
     if (isLoading) {
       return (
-        <div style={{ width: '100%', height: '100%', position: 'absolute', top: 0 }}>
-          <Spinner
-            fadeIn="none"
-            name="circle"
-            color="#a9adc0"
-            style={{
-              width: 50,
-              height: 60,
-              top: '50%',
-              position: 'absolute',
-              left: '50%',
-              transform: 'translate(-50%, -50%)',
-            }}
-          />
+        <div className="entityPage-container">
+          <Spinner size={'large'} />
         </div>
       );
     }
@@ -118,7 +105,7 @@ class ParticipantEntity extends React.Component {
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   const { isLoading, error, participant } = state.ui.participantEntityPage;
   return {
     isLoading,