Feat/2468 add new variant page

src/App.js

@@ -35,33 +35,25 @@ import ErrorBoundary from 'ErrorBoundary';
 import ROUTES from 'common/routes';
 import isPlainObject from 'lodash/isPlainObject';
 import isEmpty from 'lodash/isEmpty';
+import VariantDb from './components/VariantDb';
 
-const userIsRequiredToLogIn = loggedInUser => {
-  return (
-    (loggedInUser === null ||
-      loggedInUser === undefined ||
-      (isPlainObject(loggedInUser) && isEmpty(loggedInUser))) &&
-    requireLogin
-  );
-};
+const userIsRequiredToLogIn = (loggedInUser) =>
+  (loggedInUser === null ||
+    loggedInUser === undefined ||
+    (isPlainObject(loggedInUser) && isEmpty(loggedInUser))) &&
+  requireLogin;
 
-const userIsNotLoggedInOrMustCompleteJoinForm = loggedInUser => {
-  return (
-    !loggedInUser ||
-    isEmpty(loggedInUser) ||
-    !loggedInUser.roles ||
-    !loggedInUser.roles[0] ||
-    !loggedInUser.acceptedTerms
-  );
-};
+const userIsNotLoggedInOrMustCompleteJoinForm = (loggedInUser) =>
+  !loggedInUser ||
+  isEmpty(loggedInUser) ||
+  !loggedInUser.roles ||
+  !loggedInUser.roles[0] ||
+  !loggedInUser.acceptedTerms;
 
-const userIsLoggedInButMustCompleteJoinForm = loggedInUser => {
-  return (
-    isPlainObject(loggedInUser) &&
-    !isEmpty(loggedInUser) &&
-    (!loggedInUser.roles || !loggedInUser.roles[0] || !loggedInUser.acceptedTerms)
-  );
-};
+const userIsLoggedInButMustCompleteJoinForm = (loggedInUser) =>
+  isPlainObject(loggedInUser) &&
+  !isEmpty(loggedInUser) &&
+  (!loggedInUser.roles || !loggedInUser.roles[0] || !loggedInUser.acceptedTerms);
 
 const forceSelectRole = ({ loggedInUser, isLoadingUser, WrapperPage = Page, ...props }) => {
   if (isLoadingUser) {
@@ -99,7 +91,7 @@ const App = compose(
         <Route
           path={ROUTES.cohortBuilder}
           exact
-          render={props =>
+          render={(props) =>
             forceSelectRole({
               isLoadingUser,
               Component: CohortBuilder,
@@ -116,21 +108,35 @@ const App = compose(
         <Route
           path={ROUTES.searchMember}
           exact
-          render={props => {
-            return forceSelectRole({
+          render={(props) =>
+            forceSelectRole({
               isLoadingUser,
               Component: MemberSearchPage,
               loggedInUser,
               isAdmin: state.isAdmin,
               loggedInUserToken: state.loggedInUserToken,
               ...props,
-            });
-          }}
+            })
+          }
+        />
+        <Route
+          path={ROUTES.variantDb}
+          exact
+          render={(props) =>
+            forceSelectRole({
+              api,
+              isLoadingUser,
+              Component: VariantDb,
+              loggedInUser,
+              WrapperPage: FixedFooterPage,
+              ...props,
+            })
+          }
         />
         <Route
           path={`${ROUTES.file}/:fileId`}
           exact
-          render={props =>
+          render={(props) =>
             forceSelectRole({
               api,
               isLoadingUser,
@@ -144,7 +150,7 @@ const App = compose(
         <Route
           path={`${ROUTES.participant}/:participantId`}
           exact
-          render={props =>
+          render={(props) =>
             forceSelectRole({
               isLoadingUser,
               loggedInUser,
@@ -157,7 +163,7 @@ const App = compose(
         <Route
           path={`${ROUTES.search}/:index`}
           exact
-          render={props =>
+          render={(props) =>
             forceSelectRole({
               isLoadingUser,
               Component: FileRepo,
@@ -172,7 +178,7 @@ const App = compose(
         <Route
           path={ROUTES.dashboard}
           exact
-          render={props =>
+          render={(props) =>
             forceSelectRole({
               api,
               isLoadingUser,
@@ -185,7 +191,7 @@ const App = compose(
         <Route
           path={ROUTES.join}
           exact
-          render={props => {
+          render={(props) => {
             if (userIsNotLoggedInOrMustCompleteJoinForm(loggedInUser)) {
               return (
                 <ApiContext.Provider
@@ -214,7 +220,7 @@ const App = compose(
         <Route
           path="/"
           exact
-          render={props =>
+          render={(props) =>
             forceSelectRole({
               api,
               isLoadingUser,
@@ -228,7 +234,7 @@ const App = compose(
         <Route
           path={ROUTES.orcid}
           exact
-          render={props => (
+          render={(props) => (
             <SideImagePage
               logo={logo}
               backgroundImage={scienceBgPath}
@@ -246,7 +252,7 @@ const App = compose(
         <Route
           path={ROUTES.profile}
           exact
-          render={props =>
+          render={(props) =>
             forceSelectRole({
               api,
               isLoadingUser,
@@ -260,7 +266,7 @@ const App = compose(
         <Route
           path={`${ROUTES.user}/:userID`}
           exact
-          render={props => {
+          render={(props) => {
             const userIdUrlParam = props.match.params.userID;
             return forceSelectRole({
               api,

src/common/injectGlobals.ts

@@ -92,6 +92,7 @@ export const reactApiDataVersionApi: string = getApplicationEnvVar('DATA_VERSION
 export const reactApiDataVersionFallback: string =
   getApplicationEnvVar('DATA_VERSION_FALLBACK') || '';
 export const reactApiSearchMembersApi = getApplicationEnvVar('SEARCH_MEMBERS_API') || null;
+export const kfVariantClusterUrl = getApplicationEnvVar('VARIANT_CLUSTER_API') || null;
 
 // Public Stats
 export const publicStatsApiRoot = getApplicationEnvVar('PUBLIC_STATS_ROOT') || '';

src/common/profile.js

@@ -1,12 +1,12 @@
 import { ROLES } from './constants';
 
-export const extractInfoFromRoles = roles => {
+export const extractInfoFromRoles = (roles) => {
   if (!Array.isArray(roles) || roles.length === 0) {
     return null;
   }
 
   const role = roles[0];
-  const displayInfo = ROLES.find(r => r.type === role);
+  const displayInfo = ROLES.find((r) => r.type === role);
   const Icon = displayInfo.icon;
   const backgroundColor = displayInfo.color;
   const roleName = displayInfo.displayName;
@@ -17,3 +17,5 @@ export const extractInfoFromRoles = roles => {
     Icon,
   };
 };
+
+export const isPartOfGroup = (group, user) => (user?.egoGroups || []).includes(group);

src/common/routes.js

@@ -16,6 +16,7 @@ const ROUTES = {
   search: '/search',
   searchMember: '/memberPage',
   user: '/user',
+  variantDb: '/variantDb',
   profile: '/profile',
 };
 

src/components/CohortBuilder/ParticipantsTableView/ParticipantsTable.js

@@ -20,7 +20,7 @@ import FileIcon from 'icons/FileIcon';
 import { MONDOLink } from '../../Utils/DiagnosisAndPhenotypeLinks';
 import SaveSetModal from './SaveSetModal';
 import './ParticipantTableView.css';
-import { isFeatureEnabled } from 'common/featuresToggles';
+import { isPartOfGroup } from 'common/profile';
 
 const SelectionCell = ({ value: checked, onCellSelected, row }) => {
   return (
@@ -30,15 +30,15 @@ const SelectionCell = ({ value: checked, onCellSelected, row }) => {
       onChange={
         row
           ? () => onCellSelected(!checked, row)
-          : evt => {
+          : (evt) => {
               onCellSelected(evt.currentTarget.checked);
             }
       }
     />
   );
 };
 
-const isMondo = datum => typeof datum === 'string' && datum.includes('MONDO');
+const isMondo = (datum) => typeof datum === 'string' && datum.includes('MONDO');
 
 const enhance = compose(withState('collapsed', 'setCollapsed', true));
 
@@ -121,7 +121,7 @@ const ParticipantIdLink = compose(({ value: idParticipant }) => {
 
 const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHack) => [
   {
-    Header: props => {
+    Header: (props) => {
       return (
         <SelectionCell
           {...props}
@@ -130,7 +130,7 @@ const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHac
         />
       );
     },
-    Cell: props => {
+    Cell: (props) => {
       return <SelectionCell value={props.value} row={props.row} onCellSelected={onRowSelected} />;
     },
     accessor: 'selected',
@@ -143,7 +143,7 @@ const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHac
   {
     Header: 'Participant ID',
     accessor: 'participantId',
-    Cell: props => <ParticipantIdLink value={props.value} />,
+    Cell: (props) => <ParticipantIdLink value={props.value} />,
   },
   {
     Header: 'Study Name',
@@ -155,7 +155,7 @@ const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHac
   {
     Header: 'Diagnosis Category',
     accessor: 'diagnosisCategories',
-    Cell: props => (
+    Cell: (props) => (
       <CollapsibleMultiLineCell
         value={props.value}
         collapsed={props.collapsed}
@@ -168,7 +168,7 @@ const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHac
   {
     Header: 'Diagnosis (Mondo)',
     accessor: 'diagnosisMondo',
-    Cell: props => (
+    Cell: (props) => (
       <CollapsibleMultiLineCell
         value={props.value}
         collapsed={props.collapsed}
@@ -182,7 +182,7 @@ const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHac
   {
     Header: 'Age at Diagnosis (days)',
     accessor: 'ageAtDiagnosis',
-    Cell: props => (
+    Cell: (props) => (
       <CollapsibleMultiLineCell
         value={props.value}
         collapsed={props.collapsed}
@@ -197,7 +197,7 @@ const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHac
   {
     Header: 'Family Composition',
     accessor: 'familyCompositions',
-    Cell: props => (
+    Cell: (props) => (
       <CollapsibleMultiLineCell
         value={props.value}
         collapsed={props.collapsed}
@@ -210,7 +210,7 @@ const participantsTableViewColumns = (onRowSelected, onAllRowsSelected, dirtyHac
   {
     Header: 'Files',
     accessor: 'filesCount',
-    Cell: props => <NbFilesCell value={props.value} row={props.row} />,
+    Cell: (props) => <NbFilesCell value={props.value} row={props.row} />,
     field: 'files',
     sortable: false,
   },
@@ -231,7 +231,7 @@ class ParticipantsTable extends Component {
     this.state = {
       columns: configureCols(
         participantsTableViewColumns(props.onRowSelected, props.onAllRowsSelected, this.dirtyHack),
-      ).map(field =>
+      ).map((field) =>
         field.sortable !== false && SORTABLE_FIELDS_MAPPING.has(field.accessor)
           ? { ...field, sortable: true }
           : { ...field, sortable: false },
@@ -311,7 +311,7 @@ class ParticipantsTable extends Component {
                       <span>{`\u00A0participant${
                         selectedRowsCount > 1 ? 's are' : ' is'
                       } selected\u00A0`}</span>
-                      <button onClick={evt => onClearSelected()} className="clearSelection">
+                      <button onClick={() => onClearSelected()} className="clearSelection">
                         {'clear selection'}
                       </button>
                     </Fragment>
@@ -320,7 +320,7 @@ class ParticipantsTable extends Component {
               </Fragment>
             </ToolbarGroup>
             <div className={'action-btns-layout'}>
-              {isFeatureEnabled('variantsDb') && (
+              {isPartOfGroup('kf-investigator', loggedInUser) && (
                 <Button
                   className={'save-set-btn'}
                   onClick={() =>