feat(somatic): SKFP-1459 add saved set somatic in dashboard

kids-first · Feb 27, 2025 · aeb3457 · aeb3457
1 parent a4d0d1a
commit aeb3457
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 22 deletions.
diff --git a/src/common/queryBuilder.ts b/src/common/queryBuilder.ts
@@ -8,6 +8,7 @@ import {
   VARIANT_SOMATIC_REPO_QB_ID,
 } from 'views/VariantsSomatic/utils/constants';
 
+import { SetType } from 'services/api/savedSet/models';
 import { STATIC_ROUTES } from 'utils/routes';
 
 export const FILTER_TAG_PAGE_MAPPING: Record<string, string> = {
@@ -21,3 +22,11 @@ export const FILTER_TAG_QB_ID_MAPPING: Record<string, string> = {
   [VARIANT_FILTER_TAG]: VARIANT_REPO_QB_ID,
   [VARIANT_SOMATIC_FILTER_TAG]: VARIANT_SOMATIC_REPO_QB_ID,
 };
+
+export const SET_TYPE_QB_ID_MAPPING: Record<string, string> = {
+  [SetType.BIOSPECIMEN]: DATA_EXPLORATION_QB_ID,
+  [SetType.PARTICIPANT]: DATA_EXPLORATION_QB_ID,
+  [SetType.FILE]: DATA_EXPLORATION_QB_ID,
+  [SetType.VARIANT]: VARIANT_REPO_QB_ID,
+  [SetType.SOMATIC]: VARIANT_SOMATIC_REPO_QB_ID,
+};
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -973,6 +973,8 @@ const en = {
             files: 'Files',
             participants: 'Participants',
             variants: 'Variants',
+            germline: 'Germline',
+            somatic: 'Somatic',
           },
           title: 'Saved Sets',
           noSavedSets:

diff --git a/src/services/api/savedSet/models.ts b/src/services/api/savedSet/models.ts
@@ -51,4 +51,5 @@ export enum SetType {
   FILE = 'file',
   BIOSPECIMEN = 'biospecimen',
   VARIANT = 'variants',
+  SOMATIC = 'variants_somatic',
 }
diff --git a/src/store/savedSet/index.ts b/src/store/savedSet/index.ts
@@ -1,5 +1,6 @@
 import { useSelector } from 'react-redux';
 import { singularizeSetTypeIfNeeded } from 'views/DataExploration/components/SetsManagementDropdown';
+import { VARIANT_SOMATIC_SAVED_SETS_FIELD } from 'views/VariantsSomatic/utils/constants';
 
 import { SetType } from 'services/api/savedSet/models';
 
@@ -18,6 +19,10 @@ export const getSetFieldId = (type: SetType) => {
     return VARIANT_SAVED_SETS_FIELD;
   }
 
+  if (type === SetType.SOMATIC) {
+    return VARIANT_SOMATIC_SAVED_SETS_FIELD;
+  }
+
   if (type === SetType.BIOSPECIMEN_REQUEST || type === SetType.BIOSPECIMEN) {
     return BIOSPECIMENS_SAVED_SETS_FIELD;
   }

diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.module.css b/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.module.css
@@ -4,3 +4,13 @@
 .savedSetListItem .countDisplay .count {
   font-weight: 500;
 }
+
+.somaticTag {
+  margin-left: 16px;
+}
+
+.germlineTag {
+  margin-left: 16px;
+  color: var(--variant-tag-color);
+  background-color: var(--variant-tag-bg-color);
+}
diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.tsx
@@ -7,7 +7,7 @@ import ListItemWithActions from '@ferlab/ui/core/components/List/ListItemWithAct
 import { addQuery } from '@ferlab/ui/core/components/QueryBuilder/utils/useQueryBuilderState';
 import { SET_ID_PREFIX } from '@ferlab/ui/core/data/sqon/types';
 import { generateQuery, generateValueFilter } from '@ferlab/ui/core/data/sqon/utils';
-import { Col, Modal, Row, Typography } from 'antd';
+import { Col, Modal, Row, Tag, Typography } from 'antd';
 import { formatDistance } from 'date-fns';
 import { INDEXES } from 'graphql/constants';
 import { SetActionType } from 'views/DataExploration/components/SetsManagementDropdown';
@@ -17,8 +17,9 @@ import {
   PARTICIPANTS_SAVED_SETS_FIELD,
 } from 'views/DataExploration/utils/constant';
 
+import { SET_TYPE_QB_ID_MAPPING } from 'common/queryBuilder';
 import { trackSetActions } from 'services/analytics';
-import { IUserSetOutput } from 'services/api/savedSet/models';
+import { IUserSetOutput, SetType } from 'services/api/savedSet/models';
 import { getSetFieldId } from 'store/savedSet';
 import { deleteSavedSet } from 'store/savedSet/thunks';
 import { STATIC_ROUTES } from 'utils/routes';
@@ -32,7 +33,6 @@ import styles from './index.module.css';
 interface OwnProps {
   data: IUserSetOutput;
   icon: ReactElement;
-  queryBuilderId: string;
 }
 
 const { Text } = Typography;
@@ -47,6 +47,8 @@ const redirectToPage = (setType: string) => {
       return STATIC_ROUTES.DATA_EXPLORATION_BIOSPECIMENS;
     case INDEXES.VARIANTS:
       return STATIC_ROUTES.VARIANTS;
+    case INDEXES.VARIANTS_SOMATIC:
+      return STATIC_ROUTES.VARIANTS_SOMATIC;
     default:
       return STATIC_ROUTES.DATA_EXPLORATION;
   }
@@ -65,14 +67,28 @@ const getIdField = (setType: string) => {
   }
 };
 
-const ListItem = ({ data, icon, queryBuilderId }: OwnProps) => {
+const ListItem = ({ data, icon }: OwnProps) => {
   const [modalVisible, setModalVisible] = useState(false);
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const onCancel = () => {
     setModalVisible(false);
   };
 
+  let typeTag;
+  if (data.setType === SetType.VARIANT)
+    typeTag = (
+      <Tag className={styles.germlineTag}>
+        {intl.get('screen.dashboard.cards.savedSets.tabs.germline')}
+      </Tag>
+    );
+  else if (data.setType === SetType.SOMATIC)
+    typeTag = (
+      <Tag className={styles.somaticTag} color="cyan">
+        {intl.get('screen.dashboard.cards.savedSets.tabs.somatic')}
+      </Tag>
+    );
+
   return (
     <>
       <ListItemWithActions
@@ -110,7 +126,7 @@ const ListItem = ({ data, icon, queryBuilderId }: OwnProps) => {
         onClick={() => {
           const setValue = `${SET_ID_PREFIX}${data.id}`;
           addQuery({
-            queryBuilderId: queryBuilderId,
+            queryBuilderId: SET_TYPE_QB_ID_MAPPING[data.setType],
             query: generateQuery({
               newFilters: [
                 generateValueFilter({
@@ -125,7 +141,12 @@ const ListItem = ({ data, icon, queryBuilderId }: OwnProps) => {
 
           navigate(redirectToPage(data.setType));
         }}
-        title={data.tag}
+        title={
+          <>
+            {data.tag}
+            {typeTag && typeTag}
+          </>
+        }
         description={
           data.updated_date
             ? intl.get('screen.dashboard.cards.savedFilters.lastSaved', {

diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedSets/index.tsx
@@ -9,8 +9,6 @@ import cx from 'classnames';
 import CardErrorPlaceholder from 'views/Dashboard/components/CardErrorPlaceHolder';
 import CardHeader from 'views/Dashboard/components/CardHeader';
 import { DashboardCardProps } from 'views/Dashboard/components/DashboardCards';
-import { DATA_EXPLORATION_QB_ID } from 'views/DataExploration/utils/constant';
-import { VARIANT_REPO_QB_ID } from 'views/Variants/utils/constants';
 
 import LineStyleIcon from 'components/Icons/LineStyleIcon';
 import { IUserSetOutput, SetType } from 'services/api/savedSet/models';
@@ -25,12 +23,11 @@ import styles from './index.module.css';
 const { Text } = Typography;
 
 const getItemList = (
-  type: SetType,
+  types: SetType[],
   savedSets: IUserSetOutput[],
   fetchingError: boolean,
   isLoading: boolean,
   icon: ReactElement,
-  queryBuilderId = DATA_EXPLORATION_QB_ID,
 ) => (
   <List<IUserSetOutput>
     className={styles.savedSetsList}
@@ -67,9 +64,9 @@ const getItemList = (
         />
       ),
     }}
-    dataSource={fetchingError ? [] : savedSets.filter((s) => s.setType === type)}
+    dataSource={fetchingError ? [] : savedSets.filter((s) => types.includes(s.setType))}
     loading={isLoading}
-    renderItem={(item) => <ListItem data={item} icon={icon} queryBuilderId={queryBuilderId} />}
+    renderItem={(item) => <ListItem data={item} icon={icon} />}
   />
 );
 
@@ -119,7 +116,7 @@ const SavedSets = ({ id, key, className = '' }: DashboardCardProps) => {
               ),
               key: 'participants',
               children: getItemList(
-                SetType.PARTICIPANT,
+                [SetType.PARTICIPANT],
                 savedSets,
                 fetchingError,
                 isLoading,
@@ -136,7 +133,7 @@ const SavedSets = ({ id, key, className = '' }: DashboardCardProps) => {
               ),
               key: 'biospecimen',
               children: getItemList(
-                SetType.BIOSPECIMEN,
+                [SetType.BIOSPECIMEN],
                 savedSets,
                 fetchingError,
                 isLoading,
@@ -153,7 +150,7 @@ const SavedSets = ({ id, key, className = '' }: DashboardCardProps) => {
               ),
               key: 'files',
               children: getItemList(
-                SetType.FILE,
+                [SetType.FILE],
                 savedSets,
                 fetchingError,
                 isLoading,
@@ -165,17 +162,21 @@ const SavedSets = ({ id, key, className = '' }: DashboardCardProps) => {
                 <div>
                   <LineStyleIcon />
                   {intl.get('screen.dashboard.cards.savedSets.tabs.variants')} (
-                  {savedSets.filter((s) => s.setType === SetType.VARIANT).length})
+                  {
+                    savedSets.filter(
+                      (s) => s.setType === SetType.VARIANT || s.setType === SetType.SOMATIC,
+                    ).length
+                  }
+                  )
                 </div>
               ),
               key: 'variants',
               children: getItemList(
-                SetType.VARIANT,
+                [SetType.VARIANT, SetType.SOMATIC],
                 savedSets,
                 fetchingError,
                 isLoading,
                 <LineStyleIcon />,
-                VARIANT_REPO_QB_ID,
               ),
             },
           ]}

diff --git a/src/views/DataExploration/components/SetsManagementDropdown/index.tsx b/src/views/DataExploration/components/SetsManagementDropdown/index.tsx
@@ -96,8 +96,16 @@ export const itemIcon = (type: string) => {
   }
 };
 
-export const singularizeSetTypeIfNeeded = (type: string) =>
-  type === SetType.VARIANT ? type.slice(0, -1) : type;
+export const singularizeSetTypeIfNeeded = (type: string) => {
+  switch (type) {
+    case SetType.VARIANT:
+      return type.slice(0, -1);
+    case SetType.SOMATIC:
+      return intl.get('screen.variantsSomatic.table.variant').toLowerCase();
+    default:
+      return type;
+  }
+};
 
 const getSetCount = (selected: string[], total: number, allSelected: boolean) => {
   if (allSelected) {

diff --git a/src/views/VariantsSomatic/components/PageContent/VariantsTable/index.tsx b/src/views/VariantsSomatic/components/PageContent/VariantsTable/index.tsx
@@ -589,14 +589,13 @@ const VariantsTable = ({
                   setSelectedRows(selectedRows);
                 },
                 extra: [
-                  // TODO SKFP-1443
                   <SetsManagementDropdown
                     idField={VARIANT_SOMATIC_SAVED_SETS_FIELD}
                     results={results}
                     selectedKeys={selectedKeys}
                     selectedAllResults={selectedAllResults}
                     sqon={getCurrentSqon()}
-                    type={SetType.VARIANT}
+                    type={SetType.SOMATIC}
                     key="variants-somatic-set-management"
                     analyticsPage={intl.get('global.googleAnalytics.somatic')}
                   />,