From c7def8c93eaa54795ff939e5861a01cb4ed6952f Mon Sep 17 00:00:00 2001
From: ekachxaidze98 <65679299+ekachxaidze98@users.noreply.github.com>
Date: Fri, 24 Nov 2023 14:37:02 +0400
Subject: [PATCH] CORE-4729: update outputs page (#1024) (#1025)

---
 components/toggle-panel/styles.module.scss |   8 --
 data/research-outputs.yml                  |  26 ++++-
 pages/about/about.module.scss              |  59 +++++++----
 pages/about/research-outputs.jsx           | 111 ++++++++++-----------
 public/images/bsdtag.svg                   |  11 ++
 5 files changed, 126 insertions(+), 89 deletions(-)
 create mode 100644 public/images/bsdtag.svg

diff --git a/components/toggle-panel/styles.module.scss b/components/toggle-panel/styles.module.scss
index ae0a0894..a595ae2d 100644
--- a/components/toggle-panel/styles.module.scss
+++ b/components/toggle-panel/styles.module.scss
@@ -26,11 +26,3 @@
     }
   }
 }
-
-.toggle-content {
-  margin-top: 24px;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 20px;
-}
diff --git a/data/research-outputs.yml b/data/research-outputs.yml
index 653e84f1..78d56579 100644
--- a/data/research-outputs.yml
+++ b/data/research-outputs.yml
@@ -4,8 +4,29 @@ description: Writing about CORE? Discover our research outputs and cite our work
 
 image: /images/research-outputs
 
-opened-section:
-    id: our-vision
+links:
+  content:
+    - title:  CORE reference articles
+      href: our-vision
+    - title:  CORE aggregation approaches and infrastructure
+      href: aggregation-approaches-and-infrastructure
+    - title:  Selected AI/ML papers
+      href: ai-ml-papers
+    - title:  CORE Recommender
+      href: recommender
+    - title:  CORE repositories dashboard
+      href: repositories-dashboard
+    - title:  CORE and download statistics
+      href: download-statistics
+    - title:  Supporting research assessment and evaluation
+      href: supporting-research-assessment-and-evaluation
+  more: Find more our research outputs at [Big Scientific Data and Text Analytics group website.](http://bsdtag.kmi.open.ac.uk)
+  moreAction:
+    title: find more
+    link: http://bsdtag.kmi.open.ac.uk
+
+sections:
+  - id: our-vision
     title: CORE vision and mission
     subTitle: If you use CORE in your work, we kindly ask you to cite one of our reference publications.
     caption: Vision and mission
@@ -155,7 +176,6 @@ opened-section:
                      url = {http://oro.open.ac.uk/35755/},
                 abstract = {The last 10 years have seen a massive increase in the amount of Open Access publications in journals and institutional repositories. The open availability of large volumes of state-of-the-art knowledge online has the potential to provide huge savings and benefits in many fields. However, in order to fully leverage this knowledge, it is necessary to develop systems that (a) make it easy for users to discover and access this knowledge at the level of individual resources, (b) explore and analyse this knowledge at the level of collections of resources and (c) provide infrastructure and access to raw data in order to lower the barriers to the research and development of systems and services on top of this knowledge. In this paper, we argue why these requirements should be satisfied and show that current systems do not meet them. Consequently, we present the CORE (COnnecting REpositories) system, a large-scale Open Access aggregation, outlining its existing functionality and discussing the future technical development. We demonstrate how the system addresses the above needs and how it can be applied to the benefit of the whole ecosystem that includes institutional repositories, individuals, researchers, developers, funding bodies and governments.}
             }
-sections:
   - id: aggregation-approaches-and-infrastructure
     title: CORE aggregation approaches and infrastructure
     caption: Aggregation approaches and infrastructure
diff --git a/pages/about/about.module.scss b/pages/about/about.module.scss
index b0aeb620..74759d15 100644
--- a/pages/about/about.module.scss
+++ b/pages/about/about.module.scss
@@ -190,16 +190,38 @@
   .title {
     max-width: 25ch;
   }
-}
-
-.logo-container {
-  width: 520px;
-  height: 261px;
-  padding: 1rem;
-  img {
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
+  .sectionWrapper {
+    max-width: 50ch;
+    gap: 16px;
+  }
+  .redirect-button-wrapper {
+    display: flex;
+    flex-direction: row;
+    padding: 1rem;
+    gap: 8px;
+    background: #f5f5f5;
+    margin: 16px 0;
+    .redirect-links {
+      width: calc(100% - 125px);
+    }
+    .redirect-button {
+      width: 125px;
+      height: max-content;
+      margin-top: 5px;
+    }
+  }
+  .redirect-wrapper {
+    padding: 1rem;
+    gap: 8px;
+    background: #f5f5f5;
+    margin: 16px 0;
+    .redirect-link {
+      line-height: 2rem;
+      list-style-type: disc;
+      text-decoration-line: underline;
+      margin-left: 16px;
+      cursor: pointer;
+    }
   }
 }
 
@@ -210,15 +232,6 @@
     width: 100%;
     max-width: unset;
   }
-  .always-open {
-    margin-top: 24px;
-    display: flex;
-    justify-content: space-between;
-    gap: 20px;
-    @media (max-width: $breakpoint-sm) {
-      flex-wrap: wrap;
-    }
-  }
   .toggle-panel-title {
     font-style: normal;
     font-weight: 500;
@@ -327,3 +340,11 @@
     }
   }
 }
+
+.toggle-content {
+  margin-top: 24px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+}
diff --git a/pages/about/research-outputs.jsx b/pages/about/research-outputs.jsx
index 09017c9f..d72b4534 100644
--- a/pages/about/research-outputs.jsx
+++ b/pages/about/research-outputs.jsx
@@ -5,10 +5,9 @@ import { classNames } from '@oacore/design/lib/utils'
 import { Button } from '@oacore/design/lib/elements'
 
 import styles from './about.module.scss'
-import researchOutputs from '../../public/images/research-outputs.svg'
+import bsdtag from '../../public/images/bsdtag.svg'
 import coreLogo from '../../public/images/core-logo-circle.svg'
 import { Layout } from '../../design-v2/components'
-import TogglePanel from '../../components/toggle-panel/togglePanel'
 
 import { Content, Reference, Section } from 'components'
 import Markdown from 'components/markdown'
@@ -115,17 +114,15 @@ const ResearchOutputsSection = ({
   onPaperCite,
   isCitationsModalOpen,
   activePaper,
+  subTitle,
   ...restProps
 }) => (
   <Section id={id} {...restProps} className={styles.researchSection}>
     <Content className={styles.researchItem}>
-      <TogglePanel
-        id={title}
-        title={title}
-        key={title}
-        sectionId={id}
-        className={styles.toggler}
-        content={papers.map((paper) => (
+      <div className={styles.togglePanelTitle}>{title}</div>
+      <p className={styles.togglePanelSubTitle}>{subTitle}</p>
+      <div className={styles.toggleContent}>
+        {papers?.map((paper) => (
           <div
             className={classNames.use(styles.toggleItem, {
               [styles.toggleItemSmall]: papers.length > 1,
@@ -143,53 +140,35 @@ const ResearchOutputsSection = ({
             />
           </div>
         ))}
-      />
+      </div>
     </Content>
   </Section>
 )
 
-const ResearchOutputsOpenSection = ({
-  id,
-  title,
-  papers,
-  onPaperCite,
-  isCitationsModalOpen,
-  activePaper,
-  subTitle,
-  index,
-  ...restProps
-}) => (
-  <Section id={id} {...restProps} className={styles.researchSection}>
-    <div className={styles.togglePanelTitle}>{title}</div>
-    <p className={styles.togglePanelSubTitle}>{subTitle}</p>
-    <div className={styles.alwaysOpen}>
-      {papers?.map((paper) => (
-        <div
-          className={classNames.use(styles.toggleItem, {
-            [styles.toggleItemSmall]: papers.length > 1,
-          })}
-        >
-          <ResearchPaperCard
-            paper={paper}
-            papersLength={papers.length > 1}
-            key={paper.id}
-            className="mb-3"
-            isCitationsModalOpen={isCitationsModalOpen}
-            activePaper={activePaper}
-            {...paper}
-          />
-        </div>
-      ))}
-    </div>
-  </Section>
-)
-
 class ResearchOutputsPage extends Component {
   state = {
     isCitationsModalOpen: false,
     activePaper: null,
   }
 
+  constructor(props) {
+    super(props)
+    this.headerHeight = 50
+  }
+
+  handleScroll = (id) => {
+    const element = document.getElementById(id)
+    const offset = this.headerHeight
+
+    if (element) {
+      const position = element.offsetTop - offset
+      window.scrollTo({
+        top: position,
+        behavior: 'smooth',
+      })
+    }
+  }
+
   @bind
   toggleCitationsModal(event, paper) {
     this.setState(({ isCitationsModalOpen, activePaper }) => ({
@@ -209,22 +188,35 @@ class ResearchOutputsPage extends Component {
             <Markdown className={styles.description}>
               {page.description}
             </Markdown>
+            <img className={styles.headerImage} src={bsdtag} alt="bsdtag" />
           </div>
-          <div className={styles.logoContainer}>
-            <img className={styles.headerImage} src={researchOutputs} alt="" />
+          <div className={styles.sectionWrapper}>
+            <ul className={styles.redirectWrapper}>
+              {page.links.content.map((item) => (
+                <li className={styles.redirectLink}>
+                  {/* eslint-disable-next-line max-len */}
+                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                  <a onClick={() => this.handleScroll(item.href)}>
+                    {item.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <div className={styles.redirectButtonWrapper}>
+              <Markdown className={styles.redirectLinks}>
+                {page.links.more}
+              </Markdown>
+              <Button
+                className={styles.redirectButton}
+                tag="a"
+                variant="contained"
+                href={page.links.moreAction.link}
+              >
+                {page.links.moreAction.title}
+              </Button>
+            </div>
           </div>
         </Section>
-        <ResearchOutputsOpenSection
-          key={page.openedSection.id}
-          id={page.openedSection.id}
-          caption={page.openedSection.caption || page.openedSection.title}
-          title={page.openedSection.title}
-          subTitle={page.openedSection.subTitle}
-          papers={page.openedSection.papers}
-          onPaperCite={this.toggleCitationsModal}
-          isCitationsModalOpen={isCitationsModalOpen}
-          activePaper={activePaper}
-        />
         {page.sections.map((section, index) => (
           <ResearchOutputsSection
             key={section.id}
@@ -232,6 +224,7 @@ class ResearchOutputsPage extends Component {
             id={section.id}
             caption={section.caption || section.title}
             title={section.title}
+            subTitle={section.subTitle}
             papers={section.papers}
             onPaperCite={this.toggleCitationsModal}
             isCitationsModalOpen={isCitationsModalOpen}
diff --git a/public/images/bsdtag.svg b/public/images/bsdtag.svg
new file mode 100644
index 00000000..d1d2d04c
--- /dev/null
+++ b/public/images/bsdtag.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="115" height="48" viewBox="0 0 115 48" fill="none">
+<path d="M0.5 23.912C0.5 23.6361 0.723661 23.4124 0.999561 23.4124H6.94747C9.97606 23.4124 12.1669 23.8652 13.5198 24.7706C14.8728 25.6761 15.5493 27.1071 15.5493 29.0637C15.5493 30.4167 15.1694 31.5355 14.4097 32.4201C13.6603 33.2944 12.5623 33.8616 11.1157 34.1218V34.2779C14.5814 34.8711 16.3143 36.6924 16.3143 39.7418C16.3143 41.7817 15.6222 43.3741 14.238 44.5189C12.8642 45.6637 10.9388 46.2361 8.46177 46.2361H0.999562C0.723662 46.2361 0.5 46.0125 0.5 45.7366V23.912ZM3.15392 33.1851H7.52509C9.39845 33.1851 10.7462 32.8937 11.5684 32.3109C12.3906 31.7176 12.8017 30.7237 12.8017 29.3291C12.8017 28.049 12.3438 27.1279 11.4279 26.5659C10.5121 25.9935 9.055 25.7073 7.05675 25.7073H3.15392V33.1851ZM3.15392 35.4331V43.9725H7.91537C9.7575 43.9725 11.1417 43.6186 12.068 42.9109C13.0047 42.1928 13.473 41.074 13.473 39.5545C13.473 38.1391 12.9942 37.0983 12.0368 36.4322C11.0897 35.7662 9.64302 35.4331 7.69681 35.4331H3.15392Z" fill="#E08639"/>
+<path d="M34.1591 40.1633C34.1591 42.172 33.4306 43.7383 31.9735 44.8623C30.5165 45.9864 28.539 46.5484 26.0412 46.5484C23.5081 46.5484 21.5222 46.2428 20.0836 45.6318C19.9065 45.5566 19.7967 45.38 19.7967 45.1877V43.6953C19.7967 43.3379 20.1618 43.095 20.4978 43.217C21.2365 43.4852 22.0227 43.7058 22.8565 43.8788C23.9597 44.1078 25.0525 44.2223 26.1349 44.2223C27.9042 44.2223 29.2363 43.8892 30.1314 43.2232C31.0264 42.5467 31.474 41.61 31.474 40.4131C31.474 39.6222 31.3126 38.9769 30.99 38.4773C30.6778 37.9674 30.147 37.499 29.3977 37.0723C28.6587 36.6456 27.5295 36.1616 26.01 35.6205C23.8869 34.8607 22.3674 33.9605 21.4515 32.9197C20.546 31.879 20.0933 30.5208 20.0933 28.8452C20.0933 27.0863 20.7542 25.6865 22.076 24.6457C23.3977 23.605 25.1462 23.0846 27.3214 23.0846C29.4205 23.0846 31.3637 23.4409 33.151 24.1536C33.395 24.2509 33.5127 24.5255 33.4242 24.7728L32.9318 26.1477C32.8352 26.4174 32.5323 26.55 32.265 26.4471C30.5529 25.7874 28.8842 25.4575 27.2589 25.4575C25.8539 25.4575 24.7559 25.7593 23.9649 26.363C23.1739 26.9666 22.7785 27.8044 22.7785 28.8764C22.7785 29.6674 22.9242 30.3178 23.2156 30.8278C23.507 31.3274 23.9961 31.7905 24.683 32.2172C25.3803 32.6335 26.4419 33.0966 27.8677 33.6066C30.2615 34.46 31.9059 35.3759 32.8009 36.3542C33.7064 37.3325 34.1591 38.6022 34.1591 40.1633Z" fill="#E08639"/>
+<path d="M57.0932 34.6057C57.0932 38.3732 56.0681 41.2561 54.0178 43.2544C51.9779 45.2422 49.0378 46.2361 45.1974 46.2361H39.3744C39.0985 46.2361 38.8748 46.0125 38.8748 45.7366V23.912C38.8748 23.6361 39.0985 23.4124 39.3744 23.4124H45.8687C49.4177 23.4124 52.1757 24.3959 54.1427 26.363C56.1097 28.33 57.0932 31.0776 57.0932 34.6057ZM54.2832 34.6994C54.2832 31.7228 53.5339 29.48 52.0352 27.9709C50.5469 26.4618 48.3301 25.7073 45.3848 25.7073H41.5288V43.9413H44.7603C47.9242 43.9413 50.3023 43.1659 51.8947 41.6152C53.487 40.0541 54.2832 37.7488 54.2832 34.6994Z" fill="#E08639"/>
+<path d="M69.2716 45.7367C69.2716 46.0126 69.0479 46.2362 68.772 46.2362H67.1172C66.8413 46.2362 66.6177 46.0126 66.6177 45.7367V25.7698H59.8892C59.6133 25.7698 59.3896 25.5462 59.3896 25.2703V23.9121C59.3896 23.6362 59.6133 23.4125 59.8892 23.4125H76.0001C76.276 23.4125 76.4996 23.6362 76.4996 23.9121V25.2703C76.4996 25.5462 76.276 25.7698 76.0001 25.7698H69.2716V45.7367Z" fill="#005F96"/>
+<path d="M94.6854 46.2362C94.4798 46.2362 94.2952 46.1102 94.2202 45.9187L91.5032 38.977H82.355L79.6685 45.917C79.5941 46.1094 79.409 46.2362 79.2027 46.2362H77.5934C77.2411 46.2362 76.9995 45.8814 77.1286 45.5536L85.7585 23.6354C85.8337 23.4444 86.0181 23.3188 86.2234 23.3188H87.7747C87.9803 23.3188 88.1649 23.4448 88.2399 23.6362L96.825 45.5545C96.9534 45.8821 96.7118 46.2362 96.3599 46.2362H94.6854ZM90.6758 36.5884L88.0219 29.5165C87.6785 28.6215 87.3246 27.5235 86.9603 26.2225C86.7314 27.2217 86.4035 28.3197 85.9768 29.5165L83.2917 36.5884H90.6758Z" fill="#005F96"/>
+<path d="M113.994 22.9337C114.27 22.9337 114.494 23.1573 114.494 23.4332V24.1289C114.494 24.3821 114.304 24.5953 114.053 24.625L111.325 24.9475C111.616 25.3118 111.876 25.7906 112.105 26.3838C112.334 26.9666 112.449 27.6275 112.449 28.3664C112.449 30.042 111.876 31.3794 110.732 32.3785C109.587 33.3776 108.015 33.8772 106.017 33.8772C105.507 33.8772 105.028 33.8356 104.581 33.7523C103.478 34.3351 102.926 35.0689 102.926 35.9535C102.926 36.4218 103.118 36.7705 103.504 36.9995C103.889 37.218 104.549 37.3273 105.486 37.3273H108.515C110.367 37.3273 111.788 37.7176 112.777 38.4981C113.776 39.2787 114.275 40.4131 114.275 41.9014C114.275 43.7956 113.516 45.237 111.996 46.2257C110.477 47.2248 108.26 47.7244 105.346 47.7244C103.108 47.7244 101.38 47.3081 100.163 46.4755C98.9554 45.6429 98.3518 44.4669 98.3518 42.9474C98.3518 41.9066 98.6848 41.0063 99.3509 40.2466C100.017 39.4869 100.954 38.9717 102.161 38.7011C101.724 38.5033 101.354 38.1963 101.053 37.78C100.761 37.3637 100.615 36.8798 100.615 36.3282C100.615 35.7037 100.782 35.1573 101.115 34.689C101.448 34.2206 101.974 33.7679 102.692 33.3308C101.807 32.9665 101.084 32.3473 100.522 31.4731C99.9702 30.5988 99.6944 29.5997 99.6944 28.4757C99.6944 26.6023 100.256 25.1609 101.38 24.1514C102.504 23.1314 104.097 22.6215 106.157 22.6215C107.053 22.6215 107.859 22.7255 108.577 22.9337H113.994ZM100.85 42.9161C100.85 43.8424 101.24 44.5449 102.02 45.0237C102.801 45.5024 103.92 45.7418 105.377 45.7418C107.552 45.7418 109.16 45.4139 110.201 44.7583C111.252 44.113 111.778 43.2336 111.778 42.12C111.778 41.1937 111.491 40.5484 110.919 40.1842C110.346 39.8303 109.269 39.6534 107.687 39.6534H104.581C103.405 39.6534 102.489 39.9344 101.833 40.4964C101.177 41.0584 100.85 41.865 100.85 42.9161ZM102.255 28.4132C102.255 29.6101 102.593 30.5156 103.269 31.1296C103.946 31.7437 104.888 32.0507 106.095 32.0507C108.624 32.0507 109.889 30.8226 109.889 28.3664C109.889 25.7958 108.608 24.5104 106.048 24.5104C104.83 24.5104 103.894 24.8383 103.238 25.4939C102.582 26.1496 102.255 27.1227 102.255 28.4132Z" fill="#0FB555"/>
+<rect x="0.5" width="34.2106" height="14.7801" rx="0.499561" fill="#E08639"/>
+<rect x="44.6377" width="29.4102" height="14.7801" rx="0.499561" fill="#005F96"/>
+<rect x="83.9746" width="30.5192" height="14.7801" rx="0.499561" fill="#0FB555"/>
+</svg>