Download version UI changes

frontend/packages/@depmap/data-slicer/src/models/downloads.ts

@@ -58,6 +58,7 @@ export interface DownloadFile {
   fileSubType: FileSubtype;
   fileDescription: string;
   downloadUrl: string;
+  version: number | null;
   taigaUrl: string;
   releaseName: string;
   size: string;

frontend/packages/portal-frontend/src/dataPage/components/DataFilePanel.tsx

@@ -6,6 +6,7 @@ import { Tooltip } from "@depmap/common-components";
 import { CollapsiblePanel } from "./CollapsiblePanel";
 import { DownloadGlyph, DownloadLink } from "@depmap/downloads";
 import { enabledFeatures } from "@depmap/globals";
+import { VersionBadge } from "./VersionBadge";
 
 interface DataFilePanelProps {
   data: DownloadTableData;
@@ -61,11 +62,29 @@ const CollapsiblePanelHeader = ({
   return (
     <span className={styles.accordionTitle}>
       <span className={styles.one}>
+        {file.version && <VersionBadge versionNumber={file.version} />}
         {file.retractionOverride
           ? file.fileName + " (retracted)"
           : file.fileName}
       </span>
-      <div className={styles.two}>{description}</div>
+      <Tooltip
+        id={`${file.fileName}-description-tooltip`}
+        content={description}
+        placement="top"
+        style={{
+          maxWidth: "500px",
+          width: "max-content",
+          maxHeight: "250px",
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          WebkitLineClamp: 10,
+          lineClamp: 10,
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+        }}
+      >
+        <div className={styles.two}>{description}</div>
+      </Tooltip>
       {file.size && <span className={styles.three}>{file.size}</span>}
       <span className={styles.four}>
         <div className={styles.iconsContainer}>
@@ -136,6 +155,7 @@ const CollapsiblePanelBody = ({
     <div className={styles.accordionBodyContent}>
       <hr />
       <br />
+      <div className={styles.fileNameLabel}>{file.fileName}</div>
       <div className={styles.releaseLabel}>{file.releaseName}</div>
 
       <br />

frontend/packages/portal-frontend/src/dataPage/components/VersionBadge.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "../styles/VersionBadge.scss";
+
+interface VersionBadgeProps {
+  versionNumber: number;
+}
+
+export const VersionBadge: React.FC<VersionBadgeProps> = ({
+  versionNumber,
+}) => {
+  return (
+    <div className={styles.badgeContainer} title={`Version ${versionNumber}`}>
+      <span className={styles.vPrefix}>v</span>
+      <span className={styles.versionNumber}>{versionNumber}</span>
+    </div>
+  );
+};

frontend/packages/portal-frontend/src/dataPage/styles/DataFilePanel.scss

@@ -12,13 +12,13 @@
       .headerColOne {
         color: #707070;
         font-size: 14px;
-        grid-column: 1/4;
+        grid-column: 1/5;
         grid-row: 1;
       }
       .headerColTwo {
         color: #707070;
         font-size: 14px;
-        grid-column: 4/8;
+        grid-column: 5/8;
         grid-row: 1;
       }
       .headerColThree {
@@ -44,7 +44,7 @@
         padding-top: 3px;
         color: #4479b2;
         font-size: 14px;
-        grid-column: 1/4;
+        grid-column: 1/5;
         grid-row: 1;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -55,7 +55,7 @@
         padding-top: 2px;
         color: #303030;
         font-size: 14px;
-        grid-column: 4/8;
+        grid-column: 5/8;
         grid-row: 1;
         text-overflow: ellipsis;
         white-space: nowrap;

frontend/packages/portal-frontend/src/dataPage/styles/DataPage.scss

@@ -6,6 +6,7 @@
   @import "./DataFilePanel.scss";
   @import "./CurrentReleasePanel.scss";
   @import "./OverviewPanel.scss";
+  @import "./VersionBadge.scss";
 
   margin-top: 30px;
   padding-bottom: none;
@@ -306,9 +307,16 @@
       font-family: lato;
       font-weight: bold;
       font-style: italic;
-      font-size: 16px;
+      font-size: 14px;
       color: #0a8d95;
     }
+
+    .fileNameLabel {
+      font-family: lato;
+      font-weight: bold;
+      font-size: 16px;
+      color: #333333;
+    }
   }
 
   .fileSearchContainer {

frontend/packages/portal-frontend/src/dataPage/styles/VersionBadge.scss

@@ -0,0 +1,23 @@
+.badgeContainer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 9999px;
+  padding: 0.03rem 0.8rem;
+
+  color: white;
+  background-color: rgb(5, 207, 49);
+  font-size: 1.2rem;
+  line-height: 2rem;
+  font-weight: 600;
+  margin-right: 5px;
+}
+
+.vPrefix {
+  margin-right: 0.25rem;
+}
+
+.versionNumber {
+  font-size: 1.5;
+}

portal-backend/depmap/download/models.py

@@ -225,7 +225,9 @@ def get_terms_to_text():
             "ccle": """CCLE publishes it's data under the <a target="_blank" href="{}">Terms and Conditions linked here.</a>""".format(
                 url_for("ccle", path="terms_and_conditions")
             ),
-            "depmap": """DepMap publishes it's data under the <a target="_blank" href="{}">Terms and Conditions linked here.</a>""".format(url_for("public.terms")),
+            "depmap": """DepMap publishes it's data under the <a target="_blank" href="{}">Terms and Conditions linked here.</a>""".format(
+                url_for("public.terms")
+            ),
             "ctd2": """The CTD^2 releases data in accordance with their <a target="_blank" href="https://ocg.cancer.gov/programs/ctd2/using-ctd2-data">data release policy</a>""",
             "dmc": """Data for the Dependency Map Consortium is made available under the <a target="_blank" href="{}">Terms and Conditions linked here.</a>""".format(
                 url_for("public.terms")
@@ -462,6 +464,7 @@ def __init__(
         type: FileType,
         size: str,
         url: Union[BucketUrl, TaigaOnly, RetractedUrl, str],
+        version: Optional[int] = None,
         sub_type: Optional[FileSubtype] = None,  # Required on the most current release
         taiga_id: Optional[str] = None,
         canonical_taiga_id: Optional[str] = None,
@@ -485,6 +488,8 @@ def __init__(
         self.type: FileType = type
         self.sub_type: Optional[FileSubtype] = sub_type
 
+        self.version: Optional[int] = version
+
         self.size: str = size
         self._url: Union[BucketUrl, TaigaOnly, RetractedUrl, str] = url
 

portal-backend/depmap/download/views.py

@@ -152,6 +152,7 @@ def get_file_record(release: DownloadRelease, f: DownloadFile):
         "fileName": f.name,
         "fileType": f.type.display_name,
         "size": f.size,
+        "version": f.version,
         "fileDescription": None
         if f.description is None
         else markdown.markdown(f.description),

portal-backend/depmap/settings/parse_downloads.py

@@ -118,6 +118,7 @@ def make_file(
     ] = get_proper_url_format(file.get("url", ""))
 
     # Everything below this point is optional for DownloadFile
+    version = file.get("version", None)
     sources: List[FileSource] = get_sources(file.get("sources", []))
     description = file.get("description", "")
     is_main_file = file.get("is_main_file", False)
@@ -142,6 +143,7 @@ def make_file(
 
     return DownloadFile(
         name=name,
+        version=version,
         type=type,
         size=size,
         url=url,

portal-backend/tests/depmap/download/test_views.py

@@ -89,6 +89,7 @@ def test_get_file_record(app, _empty_db_base):
         "sources": ["Broad Institute", "Marcotte et al."],
         "fileName": "test file name",
         "fileType": "Genetic Dependency",
+        "version": None,
         "fileSubType": {
             "code": "crispr_screen",
             "label": "CRISPR Screen",
@@ -118,6 +119,7 @@ def test_get_file_record(app, _empty_db_base):
         "sources": ["Broad Institute"],
         "fileName": "headliner2 file name",
         "fileType": "Cellular Models",
+        "version": None,
         "fileSubType": {"code": "mutations", "label": "Mutations", "position": 1},
         "size": "headliner2 size",
         "fileDescription": None,