Faq page

src/frontend/static/frontend/package.json

@@ -58,7 +58,7 @@
     "@visx/scale": "^3.5.0",
     "@visx/stats": "^3.5.0",
     "@visx/tooltip": "^3.3.0",
-    "apexcharts": "^3.52.0",
+    "apexcharts": "^4.0.0",
     "axios": "^1.8.4",
     "cytoscape": "^3.30.2",
     "d3": "^7.9.0",

src/frontend/static/frontend/rspack.common.js

@@ -25,7 +25,8 @@ export const common = {
         survival: `${PATHS.src}/survival.tsx`,
         aboutUs: `${PATHS.src}/about-us.tsx`,
         openSource: `${PATHS.src}/open-source.tsx`,
-        sitePolicy: `${PATHS.src}/site-policy.tsx`
+        sitePolicy: `${PATHS.src}/site-policy.tsx`,
+        faq: `${PATHS.src}/faq.tsx`
     },
     output: {
         path: PATHS.output,

src/frontend/static/frontend/src/components/MainNavbar.tsx

@@ -149,7 +149,7 @@ const LogInLogOutPanel = (props: LogInLogOutPanelProps) => {
     )
 }
 
-type ActiveItemOptions = 'home' | 'pipeline' | 'files' | 'cgds' | 'survival' | 'institutions' | 'about-us' | 'biomarkers' | 'open-source'
+type ActiveItemOptions = 'home' | 'pipeline' | 'files' | 'cgds' | 'survival' | 'institutions' | 'about-us' | 'biomarkers' | 'open-source' | 'faq'
 
 interface MainNavbarProps {
     activeItem?: ActiveItemOptions,
@@ -289,6 +289,17 @@ const MainNavbar = (props: MainNavbarProps) => {
                 </Menu.Item>
             </Menu.Menu>
 
+            <Menu.Menu>
+                <Menu.Item
+                    as='a'
+                    href='/faq'
+                    style={{ fontSize: '1rem' }}
+                    active={props.activeItem === 'faq'}
+                >
+                    FAQ
+                </Menu.Item>
+            </Menu.Menu>
+
             <Menu.Menu>
                 <Menu.Item as='a' href={urlOpenSource} style={{ fontSize: '1rem' }}>
                     Open source

src/frontend/static/frontend/src/components/faq/FAQ.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Container, Divider, Grid, Header, Segment, List } from 'semantic-ui-react'
+import { Base } from '../Base'
+import {FAQQuestionAndAnswer} from "./FAQQuestionAndAnswer";
+
+/**
+ * FAQ Page (Frequently Asked Questions).
+ * 
+ * Uses the  `FAQQuestionAndAnswer`  component to display each questions and answers.
+ */
+
+export const FAQ = () => {
+  return (
+    <Base activeItem='faq' wrapperClass='wrapper'>
+      <Container text className='margin-top-2 margin-bottom-5'>
+        <Grid stackable>
+          <Grid.Row columns={1}>
+            <Grid.Column>
+              <Header as='h1'>Frequently Asked Questions</Header>
+              <Divider />
+
+               {/* Question 1: Datasets */}
+              <FAQQuestionAndAnswer
+                segmentId="datasets"
+                headerTitle="How are cBioPortal datasets incorporated and preprocessed?"
+                answer={
+                  <>
+                    <p>
+                      Datasets from cBioPortal are synchronized regularly to ensure data consistency.
+                        If there is an update that we miss, users can contact us directly.
+                  Duplicate molecules are removed to keep the dataset clean.
+                  Samples without information for a given molecule in a biomarker are excluded from trained models,
+                  statistical validations, feature selection experiments, and inference steps.
+                </p>
+                <p>
+                  Clinical data also undergo preprocessing: cases with <code>NaN</code>, empty or <code>Null</code> values are filtered out.
+                  Additionally, cases with an event but survival time equal to zero are excluded (pending clarification from cBioPortal).
+                </p>
+                  </>
+                }
+              />
+
+               {/* Question 2: Privacy */}
+              <FAQQuestionAndAnswer
+                segmentId="privacy"
+                headerTitle="How is user-uploaded data privacy handled?"
+                answer={
+
+                <p>
+                  Uploaded data is securely stored and only accessible to the uploading user.
+                  Once deleted, the data is permanently removed from our servers and cannot be recovered.
+                  No third parties have access to private user data.
+                </p>
+                }
+              />
+
+              <Divider />
+
+              {/* Question 3: Licenses */}
+              <FAQQuestionAndAnswer
+                segmentId="licenses"
+                headerTitle="Libraries and tools with Licenses" 
+                answer={
+
+                <p>
+                   For legal and transparency reasons, we provide a list of third-party libraries and tools used in this platform,
+                  along with their respective licenses. This ensures compliance and acknowledgment of the open-source
+                  community contributions that power our ecosystem.
+
+                </p>
+            }
+            />
+
+              <Divider />
+
+              {/* Question 4: Additional Links */}
+              <FAQQuestionAndAnswer
+                segmentId="footer"
+                headerTitle="Additional Links"
+                answer={
+
+                <List horizontal divided link size='small'>
+                  <List.Item as='a'>Site Map</List.Item>
+                  <List.Item as='a'>Contact Us</List.Item>
+                  <List.Item as='a'>Terms and Conditions</List.Item>
+                  <List.Item as='a'>Privacy Policy</List.Item>
+                </List>
+              }
+
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Container>
+    </Base>
+  )
+}

src/frontend/static/frontend/src/components/faq/FAQQuestionAndAnswer.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Segment, Header } from "semantic-ui-react";
+
+/**
+ * Props for the FAQQuestionAndAnswer component.
+ */
+interface FAQQuestionAndAnswerProps {
+    /** The unique identifier for the segment */
+    segmentId: string;
+    /** The title of the FAQ question */
+    headerTitle: string;
+    /** The answer content for the FAQ question */
+    answer: React.ReactNode;
+}
+
+/**
+ * Reusable component for displaying a FAQ question and its answer.
+ * 
+ *  @param props - Object containing  `segmentId`,  `headerTitle`, and  `answer`
+ *  @returns A React component that displays a FAQ question and its answer.
+*/
+export const FAQQuestionAndAnswer = (props: FAQQuestionAndAnswerProps) => {
+    const { segmentId, headerTitle, answer } = props;
+    return (
+        <Segment id={segmentId} basic>
+            <Header as='h2'>{headerTitle}</Header>
+            {answer}
+        </Segment>
+    )
+}

src/frontend/static/frontend/src/faq.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { FAQ } from './components/faq/FAQ'
+
+const container = document.getElementById('faq-app')
+const root = createRoot(container!)
+root.render(<FAQ />)

src/frontend/templates/frontend/base.html

@@ -59,6 +59,7 @@
         const urlSearchUser = "{% url 'search_user' %}" {# URL to search user view #}
         const urlUpdateUser = "{% url 'update_user' %}" {# URL to update user view #}
         const currentUserId = "{{ user.id }}"
+        const urlFAQ = "{% url 'faq' %}" {# URL to FAQ page #}
     </script>
 
     {% render_bundle 'base' 'js' %}

src/frontend/templates/frontend/faq.html

@@ -0,0 +1,16 @@
+{% extends 'frontend/base.html' %}
+{% load static %}
+{% load render_bundle from webpack_loader %}
+
+{% block title %} | FAQ{% endblock %}
+{% block meta_description %}
+Frequently Asked Questions about Multiomix and our platform.
+{% endblock %}
+
+{% block content %}
+        <main id="faq-app"></main>
+{% endblock %}
+
+{% block js %}
+        {% render_bundle 'faq' 'js' %}
+{% endblock %}

src/frontend/urls.py

@@ -8,6 +8,7 @@
     path('survival', views.survival_action, name='survival'),
     path('about-us', views.about_us_action, name='about_us'),
     path('open-source', views.open_source, name='open_source'),
-    path('site-policy', views.terms_and_privacy_policy_action, name='site_policy')
+    path('site-policy', views.terms_and_privacy_policy_action, name='site_policy'),
+    path('faq', views.faq_action, name='faq')
 ]
 

src/frontend/views.py

@@ -46,3 +46,7 @@ def survival_action(request):
 def open_source(request):
     """Open source view"""
     return render(request, "frontend/open-source.html")
+
+def faq_action(request):
+    """FAQ view"""
+    return render(request, "frontend/faq.html")