From 302142fbae395135407452e73066f98cd68b4f3a Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Mon, 6 Jan 2025 14:53:18 -0600
Subject: [PATCH 1/2] Moved the pulse responses up to the pie chart card, made
 them pageable, and removed the distribution bar chart.

---
 web-ui/src/pages/PulseReportPage.jsx | 94 ++++++++++------------------
 1 file changed, 33 insertions(+), 61 deletions(-)

diff --git a/web-ui/src/pages/PulseReportPage.jsx b/web-ui/src/pages/PulseReportPage.jsx
index 4cf902f10..66e5e8fcb 100644
--- a/web-ui/src/pages/PulseReportPage.jsx
+++ b/web-ui/src/pages/PulseReportPage.jsx
@@ -33,7 +33,8 @@ import {
   MenuItem,
   Modal,
   TextField,
-  Typography
+  Typography,
+  Link,
 } from '@mui/material';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -79,6 +80,8 @@ const ScoreOptionLabel = {
   'Combined': 'Both',
 };
 
+const pulsesPerPage = 15;
+
 /*
 // Returns a random, integer score between 1 and 5.
 // We may want to uncomment this later for testing.
@@ -117,6 +120,7 @@ const PulseReportPage = () => {
   const [expanded, setExpanded] = useState(false);
   const [scoreChartData, setScoreChartData] = useState([]);
   const [pulses, setPulses] = useState([]);
+  const [pulsesUpperBounds, setPulsesUpperBounds] = useState(pulsesPerPage);
   const [scope, setScope] = useState('Individual');
   const [scoreType, setScoreType] = useState(ScoreOption.COMBINED);
   const [selectedPulse, setSelectedPulse] = useState(null);
@@ -329,6 +333,7 @@ const PulseReportPage = () => {
       return compare;
     });
     setPulses(pulses);
+    setPulsesUpperBounds(pulsesPerPage);
   };
 
   useEffect(() => {
@@ -389,63 +394,6 @@ const PulseReportPage = () => {
     </Card>
   );
 
-  const scoreDistributionChart = () => (
-    <Card>
-      <CardHeader
-        title="Distribution of pulse scores for selected team members"
-        titleTypographyProps={{ variant: 'h5', component: 'h2' }}
-      />
-      <CardContent>
-        <BarChart
-          width={500}
-          height={300}
-          data={barChartData}
-          margin={{
-            top: 5,
-            right: 30,
-            left: 20,
-            bottom: 5
-          }}
-        >
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="score" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.INTERNAL) &&
-            <Bar
-              dataKey="internal"
-              fill={ociDarkBlue}
-              name={ScoreOptionLabel[ScoreOption.INTERNAL]}
-            />
-            }
-          {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.EXTERNAL) &&
-            <Bar
-              dataKey="external"
-              fill={ociOrange}
-              name={ScoreOptionLabel[ScoreOption.EXTERNAL]}
-            />
-          }
-        </BarChart>
-        <ExpandMore
-          expand={expanded}
-          onClick={() => setExpanded(!expanded)}
-          aria-expanded={expanded}
-          aria-label={expanded ? 'show less' : 'show more'}
-          size="large"
-        />
-        <Collapse
-          className="bottom-row"
-          in={expanded}
-          timeout="auto"
-          unmountOnExit
-        >
-          {responseSummary()}
-        </Collapse>
-      </CardContent>
-    </Card>
-  );
-
   const handleCommentClick = pulse => {
     setSelectedPulse(pulse);
     setShowComments(true);
@@ -725,16 +673,33 @@ const PulseReportPage = () => {
             </div>
           }
         </div>
+        <ExpandMore
+          expand={expanded}
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+          aria-label={expanded ? 'show less' : 'show more'}
+          size="large"
+        />
+        <Collapse
+          className="bottom-row"
+          in={expanded}
+          timeout="auto"
+          unmountOnExit
+        >
+          {responseSummary()}
+        </Collapse>
       </CardContent>
     </Card>
   </>
   );
 
   const responseSummary = () => {
-    let filteredPulses = pulses;
+    const pulsesSlice = pulses.slice(0, pulsesUpperBounds);
+
+    let filteredPulses = pulsesSlice;
     const teamMemberIds = teamMembers.map(member => member.id);
     if (teamMemberIds.length) {
-      filteredPulses = pulses.filter(pulse =>
+      filteredPulses = pulsesSlice.filter(pulse =>
         teamMemberIds.includes(pulse.teamMemberId)
       );
     }
@@ -773,6 +738,14 @@ const PulseReportPage = () => {
             </div>
           );
         })}
+        {pulsesUpperBounds < pulses.length &&
+         <Link to="#" style={{ cursor: 'pointer' }} onClick={(event) => {
+           event.preventDefault();
+           setPulsesUpperBounds(pulsesUpperBounds + pulsesPerPage);
+         }}>
+           Load more...
+         </Link>
+        }
       </>
     );
   };
@@ -840,7 +813,6 @@ const PulseReportPage = () => {
           />
           {pulseScoresChart()}
           {averageScores()}
-          {scoreDistributionChart()}
           <Modal open={showComments} onClose={() => setShowComments(false)}>
             <Card className="feedback-request-enable-edits-modal">
               <CardHeader

From 51eb2f2ece577aea4bdf3068837aecdfa22df556 Mon Sep 17 00:00:00 2001
From: Chad Elliott <elliottc@objectcomputing.com>
Date: Tue, 7 Jan 2025 09:01:32 -0600
Subject: [PATCH 2/2] Made the pulses pageable.

---
 web-ui/src/pages/PulseReportPage.jsx | 39 ++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/web-ui/src/pages/PulseReportPage.jsx b/web-ui/src/pages/PulseReportPage.jsx
index 66e5e8fcb..4a4a9a9a3 100644
--- a/web-ui/src/pages/PulseReportPage.jsx
+++ b/web-ui/src/pages/PulseReportPage.jsx
@@ -22,6 +22,8 @@ import {
   SentimentSatisfied,
   SentimentVerySatisfied,
 } from '@mui/icons-material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import {
   Avatar,
   Card,
@@ -120,7 +122,7 @@ const PulseReportPage = () => {
   const [expanded, setExpanded] = useState(false);
   const [scoreChartData, setScoreChartData] = useState([]);
   const [pulses, setPulses] = useState([]);
-  const [pulsesUpperBounds, setPulsesUpperBounds] = useState(pulsesPerPage);
+  const [pulsesPageNumber, setPulsesPageNumber] = useState(0);
   const [scope, setScope] = useState('Individual');
   const [scoreType, setScoreType] = useState(ScoreOption.COMBINED);
   const [selectedPulse, setSelectedPulse] = useState(null);
@@ -333,7 +335,7 @@ const PulseReportPage = () => {
       return compare;
     });
     setPulses(pulses);
-    setPulsesUpperBounds(pulsesPerPage);
+    setPulsesPageNumber(0);
   };
 
   useEffect(() => {
@@ -694,7 +696,10 @@ const PulseReportPage = () => {
   );
 
   const responseSummary = () => {
-    const pulsesSlice = pulses.slice(0, pulsesUpperBounds);
+    const leftDisabled = (pulsesPageNumber <= 0);
+    const rightDisabled = (((pulsesPageNumber + 1) * pulsesPerPage) >= pulses.length);
+    const start = pulsesPageNumber * pulsesPerPage;
+    const pulsesSlice = pulses.slice(start, start + pulsesPerPage);
 
     let filteredPulses = pulsesSlice;
     const teamMemberIds = teamMembers.map(member => member.id);
@@ -738,14 +743,26 @@ const PulseReportPage = () => {
             </div>
           );
         })}
-        {pulsesUpperBounds < pulses.length &&
-         <Link to="#" style={{ cursor: 'pointer' }} onClick={(event) => {
-           event.preventDefault();
-           setPulsesUpperBounds(pulsesUpperBounds + pulsesPerPage);
-         }}>
-           Load more...
-         </Link>
-        }
+        <Link to="#"
+              style={leftDisabled ? { cursor: 'auto' } : { cursor: 'pointer' }}
+              onClick={(event) => {
+          event.preventDefault();
+          if (!leftDisabled) {
+            setPulsesPageNumber(pulsesPageNumber - 1);
+          }
+        }}>
+          <ArrowBackIcon/>
+        </Link>
+        <Link to="#"
+              style={rightDisabled ? { cursor: 'auto' } : { cursor: 'pointer' }}
+              onClick={(event) => {
+                event.preventDefault();
+                if (!rightDisabled) {
+                  setPulsesPageNumber(pulsesPageNumber + 1);
+                }
+              }}>
+          <ArrowForwardIcon/>
+        </Link>
       </>
     );
   };