feat: notification panel

CHANGELOG.rst

@@ -7,6 +7,15 @@ smaht-portal
 Change Log
 ----------
 
+0.105.1
+=======
+
+`PR246: feat: homepage updates <https://github.com/smaht-dac/smaht-portal/pull/246>`_
+
+* Implement new announcements panel
+* Reorganizes homepage timeline tier structure
+
+
 `PR 266: Node v20 Upgrade <https://github.com/smaht-dac/smaht-portal/pull/266>`_
 
 0.105.0

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "encoded"
-version = "0.105.0"
+version = "0.105.1"
 description = "SMaHT Data Analysis Portal"
 authors = ["4DN-DCIC Team <support@4dnucleome.org>"]
 license = "MIT"

src/encoded/static/components/static-pages/HomePage/GuestHomeView.js

@@ -10,6 +10,7 @@ import { UserRegistrationModal } from './../../navigation/components/UserRegistr
 import { auth0Options as navAuth0Options } from './../../navigation/components/AccountNav';
 import SMaHTTimeline from '../../viz/SMaHTTimeline';
 import Card from 'react-bootstrap/esm/Card';
+import { NotificationsPanel } from '../components/NotificationsPanel';
 // import { Fade } from 'react-bootstrap';
 
 import { HomepageFigure } from '../../viz/HomepageFigure';
@@ -45,69 +46,21 @@ export const GuestHomeView = React.memo(function GuestHomeView(props) {
                         </h2>
                     </div>
                 </div>
-                <div className="row my-2 flex-column flex-lg-row">
-                    <div className="col-12 col-lg-4 col-xl-5">
+                <div className="homepage-timeline-figure-container row flex-column flex-lg-row">
+                    <div className="col-12 col-lg-4 col-xl-5 col-xxl-4">
                         <SMaHTTimeline
                             currentTier={currentTier}
                             setCurrentTier={setCurrentTier}
                         />
                     </div>
-                    <div className="col-12 col-lg-8 col-xl-7 d-flex justify-content-center align-items-center mb-2 my-lg-2 ">
+                    <div className="homepage-figure-container col-12 col-lg-8 col-xl-7 col-xxl-6 d-flex mb-2 my-lg-2 ">
                         <HomepageFigure
                             currentTier={currentTier}
                             setCurrentTier={setCurrentTier}
                         />
                     </div>
                 </div>
-                <div className="row no-gutters">
-                    <Card className="about-consortium col-12 w-100 mb-3">
-                        <h3 className="">About the Consortium</h3>
-                        <div className="row">
-                            <div className="col-12 col-lg-4">
-                                <a
-                                    href="https://commonfund.nih.gov/smaht"
-                                    target="_blank"
-                                    rel="noreferrer noopener"
-                                    role="button"
-                                    className="w-100 py-2 btn">
-                                    NIH SMaHT Homepage
-                                    <i className="icon-external-link-alt icon icon-xs fas ml-2" />
-                                </a>
-                            </div>
-                            <div className="col-12 col-lg-4">
-                                <a
-                                    href="https://www.smaht.org"
-                                    target="_blank"
-                                    rel="noreferrer noopener"
-                                    role="button"
-                                    className="w-100 py-2 btn">
-                                    SMaHT OC Homepage
-                                    <i className="icon-external-link-alt icon icon-xs fas ml-2" />
-                                </a>
-                            </div>
-                            <div className="col-12 col-lg-4">
-                                <a
-                                    href="https://www.youtube.com/watch?v=8KX3lkMB5nU"
-                                    target="_blank"
-                                    rel="noreferrer noopener"
-                                    role="button"
-                                    className="w-100 py-2 btn">
-                                    SMaHT Overview Video
-                                    <i className="icon-external-link-alt icon text-xs fas ml-2" />
-                                </a>
-                            </div>
-                            {/** @TODO: Link might change */}
-                            {/* <div className="col-12 col-md-6 col-lg-3">
-                                <a
-                                    href="/about"
-                                    role="button"
-                                    className="w-100 py-2 btn">
-                                    SMaHT Consortium Map <span className="font-italic">(coming soon)</span>
-                                </a>
-                            </div> */}
-                        </div>
-                    </Card>
-                </div>
+                <NotificationsPanel {...props} />
             </div>
         </div>
     );

src/encoded/static/components/static-pages/HomePage/index.js

@@ -11,6 +11,7 @@ import {
 import { Alerts } from '@hms-dbmi-bgm/shared-portal-components/es/components/ui/Alerts';
 import { pageTitleViews } from './../../PageTitleSection';
 import { GuestHomeView } from './GuestHomeView';
+import { NotificationsPanel } from '../components/NotificationsPanel';
 
 /**
  * Homepage View component. Gets rendered at '/' and '/home' paths.
@@ -37,9 +38,6 @@ export default class HomePage extends React.PureComponent {
         // Render alerts here instead of (unused-for-homepage) PageTitleSection
         return (
             <div className="homepage-wrapper">
-                <div id="full-alerts-container">
-                    <Alerts alerts={alerts} className="alerts container" />
-                </div>
                 <GuestHomeView
                     {...commonProps}
                     {...{ updateAppSessionState, alerts }}

src/encoded/static/components/static-pages/components/NotificationsPanel.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Card } from 'react-bootstrap';
+
+const announcements = [
+    {
+        type: 'info',
+        title: 'Note',
+        body: 'The raw sequence files, i.e. unaligned BAM and FASTQ, and the data from the benchmarking tissue samples that were not distributed by TPC will be available upon request at this time (through Globus).',
+    },
+    {
+        type: 'feature',
+        title: 'New Features',
+        body: 'The SMaHT Data Portal, V1 Benchmarking release, now makes benchmarking data available for download for authenticated consortium members. Users can continue to obtain the access keys for metadata submission.',
+    },
+    {
+        type: 'warning',
+        title: 'Attention Users',
+        body: 'The V1 Benchmarking data portal will be open to SMaHT consortium members only at this time.',
+    },
+];
+
+const AnnouncementCard = ({ title = '', body = '', type = 'info' }) => {
+    return (
+        <div className={`announcement-container ${type}`}>
+            <h5 className="header">{title}</h5>
+            <p className="body">{body}</p>
+        </div>
+    );
+};
+
+// const dataReleaseItems = [
+//     {
+//         header:
+//     }
+// ]
+
+const DataReleaseItem = () => {
+    return (
+        <div className="data-release-item-container">
+            <div className="content">
+                <div className="header">
+                    <span>New Release: August 1, 2024</span>
+                    <span className="count">15 Files</span>
+                </div>
+                <div className="body">
+                    <h6 className="title">COLO829T</h6>
+                    <ul>
+                        <li>10 Illumina Bulk WGS BAM files</li>
+                    </ul>
+                    <h6 className="title">Donor ST003 - Brain</h6>
+                    <ul>
+                        <li>5 Illumina Bulk WGS BAM files</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const NotificationsPanel = () => {
+    return (
+        <div className="notifications-panel container">
+            <div className="data-release-tracker section">
+                <h3 className="section-header">Data Release Tracker</h3>
+                <div className="section-body">
+                    <DataReleaseItem />
+                    <DataReleaseItem />
+                </div>
+            </div>
+            <div className="announcements section">
+                <h3 className="section-header">Announcements</h3>
+                <div className="section-body">
+                    {announcements.map((announcement, index) => {
+                        return (
+                            <AnnouncementCard
+                                title={announcement.title}
+                                body={announcement.body}
+                                type={announcement.type}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+            {/* <div className="about-consortium mb-3 section">
+                <h3 className="section-header">About the Consortium</h3>
+                <div className="section-body">
+                    <div className="about-consortium-links">
+                        <div className="link-container">
+                            <a
+                                href="https://commonfund.nih.gov/smaht"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                role="button"
+                                className="py-2 btn">
+                                NIH SMaHT Homepage
+                                <i className="icon-external-link-alt icon icon-xs fas ml-2" />
+                            </a>
+                        </div>
+                        <div className="link-container">
+                            <a
+                                href="https://www.smaht.org"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                role="button"
+                                className="py-2 btn">
+                                SMaHT OC Homepage
+                                <i className="icon-external-link-alt icon icon-xs fas ml-2" />
+                            </a>
+                        </div>
+                        <div className="link-container">
+                            <a
+                                href="https://www.youtube.com/watch?v=8KX3lkMB5nU"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                role="button"
+                                className="py-2 btn">
+                                SMaHT Overview Video
+                                <i className="icon-external-link-alt icon text-xs fas ml-2" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div> */}
+        </div>
+    );
+};

src/encoded/static/components/viz/SMaHTTimeline.js

@@ -305,7 +305,7 @@ export default function SMaHTTimeline({ currentTier, setCurrentTier }) {
     }, [isError]);
 
     return (
-        <div className="container">
+        <div className="container timeline-container">
             <div id="timeline" className={`tier-${currentTier}`}>
                 <span className="latest-release">
                     <b>Latest Release: </b>