reduce redundancy in transcript by yushinj · Pull Request #2280 · gordon-cs/gordon-360-ui

yushinj · 2024-06-05T20:58:53Z

Some departments have the same string on Job_Title and Job_Department_Name. Also, transcript repeats the Job_title for each session. So, remove redundant information from transcript.

Example:

amos-cha · 2024-06-06T14:39:15Z

src/views/CoCurricularTranscript/Components/Experience/index.tsx

+let prev_job_title = '';
+
+const newJobTitle = ({ Job_Department_Name, Job_Title }: StudentEmployment) => {
+  if (Job_Title != prev_job_title) {
+    prev_job_title = Job_Title;
+    if (Job_Department_Name == Job_Title.split(':')[0]) {
+      return Job_Title;
+    } else {
+      return Job_Department_Name + ', ' + Job_Title;
+    }
+  } else {
+    return '';
+  }
+};


Suggested change

let prev_job_title = '';

const newJobTitle = ({ Job_Department_Name, Job_Title }: StudentEmployment) => {

if (Job_Title != prev_job_title) {

prev_job_title = Job_Title;

if (Job_Department_Name == Job_Title.split(':')[0]) {

return Job_Title;

} else {

return Job_Department_Name + ', ' + Job_Title;

}

} else {

return '';

}

};

let prev_job_title = '';

const newJobTitle = ({ Job_Department_Name, Job_Title }: StudentEmployment) => {

if (Job_Title != prev_job_title) {

prev_job_title = Job_Title;

return Job_Department_Name === Job_Title.split(':')[0]

? Job_Title

: `${Job_Department_Name}, ${Job_Title}`;

}

return '';

};

Couple things:

I'm pretty sure your variable prev_job_title as scoped variable can be finicky. @EjPlatzer probably has an opinion on this

there is some logic cleanup you can employ

…e unnecessary comments.

amos-cha

almost there, just a bit of cleanup

src/services/transcript.ts

Co-authored-by: Amos Cha <78386128+amos-cha@users.noreply.github.com>

amos-cha

2 more things i just saw

amos-cha · 2024-06-12T18:22:57Z

src/services/transcript.ts

+
+  // sorting the same job title by end date
+  groupedMembershipHistory.experiences.sort((a, b) =>
+    getJobTitle(a).localeCompare(getJobTitle(b)) != 0


Suggested change

getJobTitle(a).localeCompare(getJobTitle(b)) != 0

getJobTitle(a).localeCompare(getJobTitle(b)) !== 0

amos-cha · 2024-06-12T18:23:35Z

src/views/CoCurricularTranscript/index.tsx

          return;
        }
        setLoading(true);
+        setPreviousTitles([]);


Suggested change

setPreviousTitles([]);

setPreviousTitles([]);

make a comment about this bugging out BECAUSE of the default transcript item. or else this looks confusing

…/gordon-cs/gordon-360-ui into s24-remove-redundancy-transcript

amos-cha

lgtm

EjPlatzer

Thanks for working on this! I haven't gotten the chance to review the rest of the code yet, but I have a couple of comments on the parts in services/transcript.ts.

src/services/transcript.ts

Co-authored-by: Evan Platzer <evan.platzer@gordon.edu>

EjPlatzer

I think this is great work, thank you for improving the transcript.

The current way you're handling repeated jobs does seem to work, but it's more complicated than it needs to be. I commented below with an alternate approach where you group the experiences by their job_title so that you can display the job title only once per group of jobs with the same title.

EjPlatzer · 2024-06-13T14:01:20Z

src/views/CoCurricularTranscript/Components/Experience/Experience.module.scss

+.experience_transcript_activities_empty_titles {
+  display: grid;
+  grid-template-columns: 5% 70% 25%;
+  grid-template-rows: auto auto;
+  justify-items: stretch;
+  position: relative;
+  top: -20px;
+
+  .organization_role {
+    grid-column: 2;
+    grid-row: 1;
+    text-align: left;
+  }
+
+  .date {
+    grid-column: 3;
+    grid-row: 1;
+    text-align: left;
+  }
+}
+


It's not ideal to duplicate the whole styles, just to add the position: relative and top: -20px. It would be better to keep those in a separate class and simply apply both classes when needed:

Suggested change

.experience_transcript_activities_empty_titles {

display: grid;

grid-template-columns: 5% 70% 25%;

grid-template-rows: auto auto;

justify-items: stretch;

position: relative;

top: -20px;

.organization_role {

grid-column: 2;

grid-row: 1;

text-align: left;

}

.date {

grid-column: 3;

grid-row: 1;

text-align: left;

}

}

.empty_title {

position: relative;

top: -20px;

}

EjPlatzer · 2024-06-13T14:04:42Z

src/views/CoCurricularTranscript/Components/Experience/index.tsx

+  const experienceTranscript =
+    jobTitles === ''
+      ? styles.experience_transcript_activities_empty_titles
+      : styles.experience_transcript_activities;
+  return (
+    <div className={experienceTranscript}>


Suggested change

const experienceTranscript =

jobTitles === ''

? styles.experience_transcript_activities_empty_titles

: styles.experience_transcript_activities;

return (

<div className={experienceTranscript}>

return (

<div className={jobTitles === ''

? `${styles.experience_transcript_activities} ${styles.empty_title}`

: styles.experience_transcript_activities}>

EjPlatzer · 2024-06-13T14:15:37Z

src/views/CoCurricularTranscript/Components/Experience/index.tsx

+const newJobTitle = (
+  { Job_Department_Name, Job_Title }: StudentEmployment,
+  previousTitles: string[],
+  setPreviousTitles: Dispatch<SetStateAction<string[]>>,
+) => {
+  if (!previousTitles.includes(Job_Title)) {
+    previousTitles.push(Job_Title);
+    setPreviousTitles(previousTitles);
+    return Job_Department_Name === Job_Title.split(':')[0]
+      ? Job_Title
+      : `${Job_Department_Name}, ${Job_Title}`;
+  }
+  return '';
+};
+


There is another way to do this, which in my opinion is both easier and more maintainable.

Basically, you can use Object.groupBy to group the experiences by Job_Title, and display the title once per group of jobs with the same title.

The grouping is as simple as:

const grouped_experiences = Object.groupBy(experiences, (experience) => experience.Job_Title);

To give a more complete example, here's a simplified experiences array:

const jobs = [ {title: 'Dishwasher', start: new Date('2016-08-20'), end: new Date('2017-05-15')}, {title: 'RA', start: new Date('2017-08-01'), end: new Date('2018-05-25')}, {title: 'RA', start: new Date('2018-08-02'), end: new Date('2019-05-10')} ];

and we can group it like so:

const jobsByTitle = Object.groupBy(jobs, job => job.title);

we can convert that object to an array of objects, where each object in the array has a Job_Title property which is the title of all the jobs in that group, and a jobs property which is the array containing all the jobs in that group:

const jobGroups = Object.entries(jobsByTitle).map(([title, jobs]) => ({Job_Title: title, jobs}))

then we can render those job groups:

const Experience = ({Job_Title, jobs}) => { return ( <div className={styles.experience_transcript_activities}> <div className={styles.organization_role}>{Job_Title}</div> {jobs.map((job) => ( <div>{formatDuration(job)}</div> )} </div> )

Thank you for your suggestion. Can you explain why using group is easier and more maintainable? This code takes an array of information one by one from the ordered list. If I use group, it need an extra function to extract data from the group and a function that is similar to the upper code to display one title per group and to ignore job titles in the group, which is more complicate.

Because your current code is using React's useState hook to keep track of whether a certain title has been seen yet or not, you have to update state (and thus re-render the entire transcript) once for each experience. If you instead group experiences by job title before passing the data to React (i.e. within services/transcript.ts), you will already have all the data calculated and won't have to re-render any extra times.

Thank you for your answer! I tried to group experiences within services/transcript.ts (line 51-78), but the type of data will be changed from groupedMembershipHistory to array if I group by job title. Is there better way to group experience or improve the code without groupBy?

…d date.

amos-cha · 2024-07-11T17:55:00Z

src/services/transcript.ts

+  //console.log('jobs');
+  //console.log(jobs);
+  //console.log('groupedMembershipHistory');
+  //console.log(groupedMembershipHistory);


Suggested change

//console.log('jobs');

//console.log(jobs);

//console.log('groupedMembershipHistory');

//console.log(groupedMembershipHistory);

Remove unused consolelogs

amos-cha · 2024-07-11T17:57:23Z

src/views/CoCurricularTranscript/Components/Experience/index.tsx

+  if (Job_Title === '') {
+    return '';
+  }
+  return Job_Title === '' ? Job_Title : `${Job_Department_Name}, ${Job_Title}`;


Suggested change

if (Job_Title === '') {

return '';

}

return Job_Title === '' ? Job_Title : `${Job_Department_Name}, ${Job_Title}`;

if (Job_Title === '') {

return '';

}

return Job_Title === '' ? Job_Title : `${Job_Department_Name}, ${Job_Title}`;

that top part and the first half of the ternary are logically identical. Is there a reason both are included?

amos-cha · 2024-07-11T17:59:36Z

src/services/transcript.ts

+    return getLatestEndDate(b)! - getLatestEndDate(a)!;
+  });
+
+  console.log(GroupByTitle);


Suggested change

console.log(GroupByTitle);

remove console logs

amos-cha · 2024-07-11T17:59:50Z

src/services/transcript.ts

+      : getExperienceEndDate(b) - getExperienceEndDate(a);
+  });
+
+  //groupedMembershipHistory.experiences = jobs;


Suggested change

//groupedMembershipHistory.experiences = jobs;

remove unused code

package.json

Co-authored-by: Evan Platzer <evan.platzer@gordon.edu>

russtuck

Please split this into 2 pull requests, so the dining points pie chart won't be in here with jobs.

russtuck · 2024-07-12T18:32:44Z

src/services/transcript.ts

+  latestDate?: string;
+};
+
+export type NewStudentEmployment = {


This needs to become StudentEmployment, and the old one above should be deleted.

russtuck · 2024-07-12T18:33:34Z

src/services/transcript.ts

+export type session = {
+  Job_Start_Date?: string;
+  Job_End_Date?: string;
+  Job_Expected_Date?: string;


Suggested change

Job_Expected_Date?: string;

Job_Expected_End_Date?: string;

Keep meaning of this field.

russtuck · 2024-07-12T18:39:28Z

src/services/transcript.ts

+  let test = [];
+  for (let i = 0; i < GroupByTitle.length; i++) {
+    let tempJob = GroupByTitle?.[i].job;
+    let numJobs = tempJob!.length;
+    for (let j = 0; j < numJobs; j++) {
+      let tempVal = GroupByTitle[i];
+      let value = tempVal!.job?.[j];
+      if (j > 0) {
+        value!.Job_Title = '';
+      }
+      if (value) {
+        test.push(value);
+      }
+    }
+  }
+
+  for (let i = 0; i < test.length; i++) {
+    jobs[i] = test[i];
+  }


I think this should be deleted.

russtuck · 2024-07-12T18:40:00Z

src/services/transcript.ts

+  // Sorting the grouped job by the latest end date
+  GroupByTitle.sort((a, b) => {
+    return getLatestEndDate(b)! - getLatestEndDate(a)!;
+  });


Return this new GroupByTitle in groupedMembershipHistory, NOT the de-grouped version below. (Why do all the work to combine each job into one entry with multiple times, and then not use it?)

russtuck · 2024-07-12T18:48:51Z

src/views/Home/components/DiningBalance/index.jsx

 import GordonLoader from 'components/Loader';
 import { useEffect, useState } from 'react';
-import { Doughnut } from 'react-chartjs-2';
+import { Pie } from 'react-chartjs-2';


Why is this unrelated change in this pull request. Please put it in a different branch and make a pull request just for it. Then it won't need to wait for the other parts you are still working on.

russtuck · 2024-07-12T18:49:54Z

src/views/CoCurricularTranscript/Components/Experience/index.tsx

-  <div className={styles.experience_transcript_activities}>
-    <div className={styles.organization_role}>
-      {Experience.Job_Department_Name}, {Experience.Job_Title}
+const Experience = ({ Experience }: Props) => {


I think this could be simpler if you passed in the grouped jobs.

…/gordon-cs/gordon-360-ui into s24-remove-redundancy-transcript

reduce redundancy in transcript

d3a5460

yushinj requested review from EjPlatzer, amos-cha, jsenning and russtuck June 5, 2024 20:58

Luke-W-Hart added the s24 Summer Practicum 2024 label Jun 5, 2024

yushinj self-assigned this Jun 6, 2024

amos-cha reviewed Jun 6, 2024

View reviewed changes

Yushin Jo added 2 commits June 6, 2024 13:03

edited code by Amos

c99ace9

using array to store job_title data instead of using variavble

2c16131

yushinj mentioned this pull request Jun 10, 2024

Remove Repeated Information and Improve Legibility of Transcript #2294

Open

Yushin Jo added 3 commits June 10, 2024 13:06

sorting experience elements by alphabetical order and end date

76e7c0f

Sorting experience elements by alphabetical order and end date. Delet…

6d7cf86

…e unnecessary comments.

Complete the code to job titles and end date.

5936f8c

yushinj requested review from EjPlatzer and amos-cha and removed request for EjPlatzer, jsenning and russtuck June 11, 2024 13:36

Delete console.log

7b16a93

amos-cha requested changes Jun 11, 2024

View reviewed changes

src/services/transcript.ts Outdated Show resolved Hide resolved

src/services/transcript.ts Outdated Show resolved Hide resolved

src/services/transcript.ts Outdated Show resolved Hide resolved

yushinj and others added 2 commits June 12, 2024 08:19

Apply suggestions from code review

e9ae5c9

Co-authored-by: Amos Cha <78386128+amos-cha@users.noreply.github.com>

Merge branch 'develop' into s24-remove-redundancy-transcript

4ea5b62

amos-cha reviewed Jun 12, 2024

View reviewed changes

Yushin Jo added 2 commits June 12, 2024 14:59

Alppy suggestions from code review and improve legibility of transcripts

8b4083c

Merge branch 's24-remove-redundancy-transcript' of https://github.com…

e74e80c

…/gordon-cs/gordon-360-ui into s24-remove-redundancy-transcript

yushinj requested review from jsenning and russtuck June 12, 2024 19:05

amos-cha previously approved these changes Jun 13, 2024

View reviewed changes

Merge branch 'develop' into s24-remove-redundancy-transcript

06b2b18

EjPlatzer requested changes Jun 13, 2024

View reviewed changes

src/services/transcript.ts Outdated Show resolved Hide resolved

src/services/transcript.ts Outdated Show resolved Hide resolved

src/services/transcript.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

1b9fb91

Co-authored-by: Evan Platzer <evan.platzer@gordon.edu>

yushinj dismissed amos-cha’s stale review via 1b9fb91 June 13, 2024 13:52

EjPlatzer requested changes Jun 13, 2024

View reviewed changes

apply suggestion from code reivew except groupedExperience

189c110

Luke-W-Hart linked an issue Jun 25, 2024 that may be closed by this pull request

Remove Repeated Information and Improve Legibility of Transcript #2294

Open

Yushin Jo added 5 commits June 25, 2024 15:14

Merge branch 'develop' into s24-remove-redundancy-transcript

df1143d

Create grouped experience by Job_Title and sort them by the lastes en…

1ac3f23

…d date.

ignore

0af2330

ignore

b20f130

display grouped and sorted transcript

2e60437

amos-cha requested changes Jul 11, 2024

View reviewed changes

Yushin Jo added 5 commits July 11, 2024 15:16

delete unsed code and add comment

c8fabde

add comments

ad4d617

fix some errors

fcd8079

fix some errors

67a68cc

update ts

cf20b05

EjPlatzer reviewed Jul 12, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

Update package.json

a21c1b3

Co-authored-by: Evan Platzer <evan.platzer@gordon.edu>

russtuck requested changes Jul 12, 2024

View reviewed changes

Yushin Jo added 2 commits July 12, 2024 15:03

restore unrelated changes

ac6ce86

Merge branch 's24-remove-redundancy-transcript' of https://github.com…

53c4711

…/gordon-cs/gordon-360-ui into s24-remove-redundancy-transcript

	getJobTitle(a).localeCompare(getJobTitle(b)) != 0
	getJobTitle(a).localeCompare(getJobTitle(b)) !== 0

Conversation

yushinj commented Jun 5, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amos-cha left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amos-cha left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amos-cha left a comment

Choose a reason for hiding this comment

Uh oh!

EjPlatzer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

EjPlatzer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

russtuck left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants