Merge pull request #103 from brown-ccv/feat--reformat-page

feat: reformatted contentPage
brown-ccv · Feb 5, 2025 · 9a89539 · 9a89539
2 parents c7637cb + 0660f9b
commit 9a89539
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 25 deletions.
diff --git a/src/components/BarChart.js b/src/components/BarChart.js
@@ -4,6 +4,8 @@ import { getAggregation } from '../utils/firebase.ts';
 
 const bar_color = '#00c398'; // ccv green
 const bar_hover_color = '#ffc72c'; // ccv yellow
+const plot_width = 1000;
+const plot_height = 400;
 
 function generateBarPlot({ data = {}, xLabel = '', yLabel = '' }) {
   // Validate input JSON structure
@@ -20,8 +22,8 @@ function generateBarPlot({ data = {}, xLabel = '', yLabel = '' }) {
   // Define the Vega specification
   const spec = {
     $schema: 'https://vega.github.io/schema/vega/v5.json',
-    width: 800,
-    height: 400,
+    width: plot_width,
+    height: plot_height,
     padding: 5,
     data: [
       {
@@ -137,7 +139,7 @@ function generateCumuSumPlot({ data = {}, xLabel = '', yLabel = '' }) {
   // Define the Vega specification
   const spec = {
     $schema: 'https://vega.github.io/schema/vega/v5.json',
-    width: 800,
+    width: plot_width,
     height: 400,
     padding: 5,
     data: [
@@ -275,7 +277,7 @@ const generateBarPlotWithCumuSum = (dataJson, xLabel) => {
   // Define the Vega specification
   const spec = {
     $schema: 'https://vega.github.io/schema/vega/v5.json',
-    width: 800,
+    width: plot_width,
     height: 400,
     padding: 5,
     data: [

diff --git a/src/components/ContentPage.jsx b/src/components/ContentPage.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBook } from '@fortawesome/free-solid-svg-icons';
+import { faBook, faChartBar, faChartLine, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
 import { selectUser } from '../store/slice/appState';
 import { PublicationsTable } from './PublicationsTable.tsx';
@@ -9,31 +9,73 @@ import { CountsByYearPlot } from './BarChart.js';
 
 export function ContentPage() {
   const user = useSelector(selectUser);
+  const [plotType, setPlotType] = useState('bar');
 
   return (
-    <div className="main-content d-flex flex-column align-items-center">
-      {user?.ccv ? (
-        <div className="align-self-end">
-          <AddPublicationModal />
+    <div className="container-fluid px-4 py-4">
+      {/* Header Section */}
+      <div className="row mb-4">
+        <div className="col">
+          <h2 className="h2 mb-3">Publications</h2>
+          <p className="lead">
+            The Center for Computation and Visualization (CCV) has been a cornerstone of Brown
+            University's research infrastructure. We provide essential computational resources and
+            expertise that enable groundbreaking research across disciplines. Our collaborations and
+            support have contributed to significant publications, advancing scientific discovery and
+            innovation in the Brown community.
+          </p>
         </div>
-      ) : null}
-
-      <div className="d-flex flex-row align-items-center justify-content-center">
-        <FontAwesomeIcon icon={faBook} color="dark" size="2xl" />
-        <h1 className="mx-2">Publications</h1>
+        {user?.ccv && (
+          <div className="col-auto d-flex align-items-start">
+            <AddPublicationModal />
+          </div>
+        )}
       </div>
 
-      <PublicationsTable />
+      {/* Visualization Section */}
+      <div className="mb-5">
+        <div className="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
+          <h3 className="h4 mb-0">Publication Metrics</h3>
+          <div className="btn-group">
+            <button
+              className={`btn ${plotType === 'bar' ? 'btn-primary' : 'btn-outline-primary'}`}
+              onClick={() => setPlotType('bar')}
+            >
+              <FontAwesomeIcon icon={faChartBar} className="me-2" />
+              Annual Counts
+            </button>
+            <button
+              className={`btn ${plotType === 'cumu-line' ? 'btn-primary' : 'btn-outline-primary'}`}
+              onClick={() => setPlotType('cumu-line')}
+            >
+              <FontAwesomeIcon icon={faChartLine} className="me-2" />
+              Cumulative Growth
+            </button>
+          </div>
+        </div>
+        <div className="d-flex justify-content-center py-2 rounded">
+          {plotType === 'bar' ? (
+            <CountsByYearPlot type="bar" />
+          ) : (
+            <CountsByYearPlot type="cumu-line" />
+          )}
+        </div>
+        <div className="mt-2 text-muted small text-center">
+          <FontAwesomeIcon icon={faInfoCircle} className="me-2" />
+          Publication counts for recent years may be incomplete.
+        </div>
+      </div>
 
-      {/* TODO: Word Cloud #58 */}
-      {/*<h2 className="title pt-4 m-4 is-2 text-center">What are these publications all about?</h2>*/}
-      {/*<div className="viz d-flex justify-content-center pt-5">*/}
-      {/*  <WordCloud />*/}
-      {/*<YearChart />*/}
-      <CountsByYearPlot type="bar" />
-      <CountsByYearPlot type="cumu-line" />
-      <CountsByYearPlot type="bar-cumu-line" />
-      {/*</div>*/}
+      {/* Publications Table Section */}
+      <div className="mb-4">
+        <div className="d-flex align-items-center mb-3">
+          <FontAwesomeIcon icon={faBook} className="me-2 fs-4" />
+          <h3 className="h3 mb-0">Publications Database</h3>
+        </div>
+        <PublicationsTable />
+      </div>
     </div>
   );
 }
+
+export default ContentPage;