[Platform]: Long id ellipsis (#637)

* fix: long id ellipsis * feat: ui feedback and summary fix * fix: min width for id
opentargets · Feb 4, 2025 · 9b8d013 · 9b8d013
1 parent 1be955e
commit 9b8d013
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 21 deletions.
diff --git a/apps/platform/src/components/Search/SearchQuery.gql b/apps/platform/src/components/Search/SearchQuery.gql
@@ -21,8 +21,12 @@ query SearchQuery($queryString: String!) {
           id
           hasSumstats
           traitFromSource
+          nSamples
+          publicationDate
+          publicationFirstAuthor
+          # studyType
           credibleSets {
-            count
+            credibleSetsCount: count
           }
         }
 
@@ -80,6 +84,7 @@ query SearchQuery($queryString: String!) {
           id
           hasSumstats
           traitFromSource
+          nSamples
           credibleSets {
             credibleSetsCount: count
           }

diff --git a/apps/platform/src/pages/SearchPage/SearchPageQuery.gql b/apps/platform/src/pages/SearchPage/SearchPageQuery.gql
@@ -23,6 +23,10 @@ query SearchPageQuery($queryString: String!, $index: Int!, $entityNames: [String
           id
           hasSumstats
           traitFromSource
+          nSamples
+          publicationDate
+          publicationFirstAuthor
+          studyType
           credibleSets {
             credibleSetsCount: count
           }

diff --git a/apps/platform/src/pages/SearchPage/StudyResult.jsx b/apps/platform/src/pages/SearchPage/StudyResult.jsx
@@ -2,7 +2,7 @@ import { makeStyles, useTheme } from "@mui/styles";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChartBar } from "@fortawesome/free-solid-svg-icons";
 import { Highlights, Link } from "ui";
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -24,11 +24,25 @@ function StudyResult({ data, highlights }) {
   return (
     <div className={classes.container}>
       <Link to={`/variant/${data.id}`} className={classes.subtitle}>
-        <FontAwesomeIcon icon={faChartBar} className={classes.icon} /> <>{data.id}</>
+        <FontAwesomeIcon icon={faChartBar} className={classes.icon} /> <>{data.traitFromSource}</>
       </Link>
       <Typography className={classes.subtitle} variant="subtitle1">
         {data.credibleSets.credibleSetsCount > -1 && (
-          <>Credible sets count: {data.credibleSets.credibleSetsCount}</>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Box sx={{ display: "flex", flexDirection: "row", gap: 1 }}>
+              <div>Credible sets count: {data.credibleSets.credibleSetsCount}</div>
+              <div> • N Study: {data.nSamples}</div>
+            </Box>
+            <Box sx={{ display: "flex", flexDirection: "row", gap: 1 }}>
+              <div>
+                {" "}
+                {data.publicationFirstAuthor &&
+                  `Publication author: ${data.publicationFirstAuthor}`}
+              </div>
+              <div> {data.publicationDate && ` •  Publication date: ${data.publicationDate}`}</div>
+            </Box>
+            <div>Study Type: {data.studyType}</div>
+          </Box>
         )}
       </Typography>
       <Highlights highlights={highlights} />

diff --git a/apps/platform/src/pages/StudyPage/Profile.tsx b/apps/platform/src/pages/StudyPage/Profile.tsx
@@ -26,7 +26,7 @@ const summaries = [GWASCredidbleSetsSummary, QTLCredibleSetsSummary];
 const STUDY = "study";
 const STUDY_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(
   summaries,
-  "Gwas",
+  "Study",
   "StudyProfileSummaryFragment"
 );
 const STUDY_PROFILE_QUERY = gql`

diff --git a/apps/platform/src/pages/StudyPage/StudyProfileHeader.gql b/apps/platform/src/pages/StudyPage/StudyProfileHeader.gql
@@ -1,4 +1,4 @@
-fragment StudyProfileHeaderFragment on Gwas {
+fragment StudyProfileHeaderFragment on Study {
   studyType
   publicationFirstAuthor
   publicationDate

diff --git a/packages/sections/src/study/GWASCredibleSets/GWASCredibleSetsSummaryFragment.gql b/packages/sections/src/study/GWASCredibleSets/GWASCredibleSetsSummaryFragment.gql
@@ -1,4 +1,4 @@
-fragment StudyGWASCredibleSetsSummaryFragment on Gwas {
+fragment StudyGWASCredibleSetsSummaryFragment on Study {
   gwasCredibleSets: credibleSets(page: { size: 1, index: 0 }) {
     count
   }

diff --git a/packages/sections/src/study/QTLCredibleSets/QTLCredibleSetsSummaryFragment.gql b/packages/sections/src/study/QTLCredibleSets/QTLCredibleSetsSummaryFragment.gql
@@ -1,4 +1,4 @@
-fragment StudyQTLCredibleSetsSummaryFragment on Gwas {
+fragment StudyQTLCredibleSetsSummaryFragment on Study {
   qtlCredibleSets: credibleSets(page: { size: 1, index: 0 }) {
     count
   }

diff --git a/packages/ui/src/components/GlobalSearch/GlobalSearchListHeader.jsx b/packages/ui/src/components/GlobalSearch/GlobalSearchListHeader.jsx
@@ -94,12 +94,21 @@ function GlobalSearchListHeader({ listHeader, children }) {
     }
   }
 
+  function getListHeader() {
+    switch (listHeader) {
+      case "studies":
+        return "GWAS studies";
+      default:
+        return listHeader;
+    }
+  }
+
   return (
     <div tabIndex="-1" className={classes.sectionHeader}>
       <div className={classes.label}>
         {getIcon()}
         <Typography sx={{ fontWeight: "bold" }} variant="caption">
-          {listHeader}
+          {getListHeader()}
         </Typography>
         <div>{getIconTag()}</div>
       </div>

diff --git a/packages/ui/src/components/GlobalSearch/GlobalSearchListItem.jsx b/packages/ui/src/components/GlobalSearch/GlobalSearchListItem.jsx
@@ -4,7 +4,7 @@ import { Typography, Chip, Box } from "@mui/material";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark, faClockRotateLeft, faArrowTrendUp } from "@fortawesome/free-solid-svg-icons";
 
-import { clearRecentItem, commaSeparate } from "./utils/searchUtils";
+import { clearRecentItem } from "./utils/searchUtils";
 import DisplayVariantId from "../DisplayVariantId";
 
 const ListItem = styled("li")(({ theme }) => ({
@@ -35,7 +35,6 @@ const ListItemDisplayName = styled("span")(({ theme }) => ({
 const ItemId = styled("span")({
   padding: "0.3rem 0 0 1rem ",
   fontStyle: "italic",
-  overflowWrap: "break-word",
 });
 
 const FlexSpan = styled("span")({
@@ -173,7 +172,14 @@ function TopHitListItem({ item, onItemClick }) {
             </ListItemDisplayName>
           </Typography>
 
-          <Typography variant="caption">
+          <Typography
+            sx={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+            variant="caption"
+            noWrap
+          >
             {!!item.id && (
               <ItemId>
                 {item.entity === "variant" ? (
@@ -211,11 +217,33 @@ function TopHitListItem({ item, onItemClick }) {
             <Box sx={{ fontWeight: "500", letterSpacing: 1 }}>
               <Typography variant="subtitle1">{item.symbol && item.name}</Typography>
             </Box>
-            <Box sx={{ fontWeight: "light", fontStyle: "oblique" }}>
-              <Typography variant="body2">
-                {item.description && `${item.description.substring(0, 180)}...`}
-              </Typography>
-            </Box>
+            <JustifyBetween>
+              <Box sx={{ fontWeight: "light", fontStyle: "oblique" }}>
+                <Typography variant="body2">
+                  {item.description && `${item.description.substring(0, 180)}...`}
+                </Typography>
+                <Typography variant="body2">
+                  {item.credibleSetsCount > -1 && (
+                    <>Credible sets count: {item.credibleSetsCount}</>
+                  )}
+                  {item.nSamples && <> • N Study: {item.nSamples}</>}
+                </Typography>
+                <Typography variant="caption">
+                  {item.publicationFirstAuthor && <>{item.publicationFirstAuthor}</>}
+                  {item.publicationDate && <>({item.publicationDate})</>}
+                </Typography>
+              </Box>
+              {item.hasSumstats && (
+                <Chip
+                  style={{
+                    height: "16px",
+                    fontSize: "0.8rem",
+                    margin: "0",
+                  }}
+                  label="summary statistics"
+                />
+              )}
+            </JustifyBetween>
           </>
         )}
       </TopHitItemContainer>
@@ -266,8 +294,19 @@ function GlobalSearchListItem({ item, isTopHit = false, onItemClick }) {
       }}
     >
       <JustifyBetween>
-        <ListItemDisplayName>{getSymbolHeader()}</ListItemDisplayName>
-        <Typography variant="caption">
+        <Typography>
+          <ListItemDisplayName>{getSymbolHeader()}</ListItemDisplayName>
+        </Typography>
+        <Typography
+          sx={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            minWidth: "20%",
+            textAlign: "end",
+          }}
+          variant="caption"
+          noWrap
+        >
           {!!item.id && (
             <ItemId>
               {item.entity === "variant" ? (
@@ -311,10 +350,11 @@ function GlobalSearchListItem({ item, isTopHit = false, onItemClick }) {
       <JustifyBetween>
         <Typography variant="caption">
           {item.credibleSetsCount > -1 && <>Credible sets count: {item.credibleSetsCount}</>}
+          {item.nSamples && <> • N Study: {item.nSamples}</>}
           {getVariantRsIds()}
         </Typography>
 
-        {item.hasSumstats && (
+        {/* {item.hasSumstats && (
           <Chip
             style={{
               height: "16px",
@@ -323,7 +363,7 @@ function GlobalSearchListItem({ item, isTopHit = false, onItemClick }) {
             }}
             label="summary statistics"
           />
-        )}
+        )} */}
       </JustifyBetween>
 
       {/* {item.nInitial && <Typography variant="caption">N Study: {item.nInitial}</Typography>} */}