Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Search/Results Sorting #491

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Updated Search/Results Sorting #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2891c65
Make sorting more intuitive
jacquelinecai Dec 14, 2024
5a8b00b
Sort professor course list
jacquelinecai Dec 14, 2024
63b4907
Add summer semester
jacquelinecai Dec 16, 2024
a245c52
Fix no result rendering
jacquelinecai Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 77 additions & 93 deletions client/src/modules/Results/Components/ResultsDisplay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import FilterIcon from '../../../assets/icons/filtericon.svg';
import styles from '../Styles/Results.module.css';

/*
ResultsDisplay Component.a
ResultsDisplay Component.

Used by Results component, renders filters,
list of class objects (results), and PreviewCard.
Expand All @@ -28,7 +28,7 @@ export default class ResultsDisplay extends Component {
courseList: this.props.courses,
cardCourse: this.props.courses[0],
activeCard: 0,
selected: props.type === 'major' ? 'rating' : 'relevance',
selected: 'relevance',
filters: {
Fall: true,
Spring: true,
Expand Down Expand Up @@ -65,7 +65,7 @@ export default class ResultsDisplay extends Component {
{
courseList: this.props.courses,
relevantCourseList: this.props.courses,
cardCourse: this.props.courses[0]
cardCourse: this.props.courses[0] || null
},
() => this.filterClasses()
);
Expand Down Expand Up @@ -93,7 +93,8 @@ export default class ResultsDisplay extends Component {
'semesters',
new Map([
['Fall', true],
['Spring', true]
['Spring', true],
['Summer', true]
])
],
['subjects', []]
Expand Down Expand Up @@ -137,12 +138,7 @@ export default class ResultsDisplay extends Component {
* Sorts list of class results by category selected in this.state.selected
*/
sort() {
let availableClasses;
if (this.state.filteredItems.length === 0) {
availableClasses = this.state.courseList;
} else {
availableClasses = this.state.filteredItems;
}
const availableClasses = this.state.filteredItems;

if (this.state.selected === 'relevance') {
this.sortBy(availableClasses, 'score', 0, true);
Expand Down Expand Up @@ -199,7 +195,10 @@ export default class ResultsDisplay extends Component {
);
}

this.setState({ filteredItems: filteredItems }, () => this.sort());
this.setState({
filteredItems: filteredItems,
cardCourse: filteredItems[0] || null
}, () => this.sort());
}

/**
Expand Down Expand Up @@ -242,16 +241,13 @@ export default class ResultsDisplay extends Component {
* The original list as FilteredResult components otherwise
*/
renderResults() {
const items = this.state.filteredItems.length
? this.state.filteredItems
: this.state.courseList;
const items = this.state.filteredItems;

return items.map((result, index) => (
<div
className={styles.filteredresults}
data-cy={`results-display-${result.classSub.toLowerCase()}-${
result.classNum
}`}
data-cy={`results-display-${result.classSub.toLowerCase()}-${result.classNum
}`}
>
<FilteredResult
key={index}
Expand Down Expand Up @@ -309,92 +305,80 @@ export default class ResultsDisplay extends Component {
return (
<div className={styles.container}>
<h1> Search Results </h1>
{/* Case where results are still being loaded */}
{this.props.loading === true && <Loading />}
{/* Case where no results returned */}
{this.state.courseList.length === 0 && this.props.loading === false && (
<div>
<img
src="/noResults.svg"
className={styles.noresultimg}
alt="No class found"
/>
<div>Sorry! No classes match your search.</div>
</div>
)}
{/* Case where results are returned (non-empty) */}
{this.state.courseList.length !== 0 && this.props.loading !== true && (
{this.props.loading ? (
<Loading />
) : (
<div className={styles.layout} data-cy="results-display">
<div className={styles.filtercol}>
<div className={styles.filtertext}>Filter</div>
<div>
<div className={styles.filtercategory}>Semester</div>
{this.renderCheckboxes('semesters')}
</div>
<div>
<div className={styles.filtercategory}>Level</div>
{this.renderCheckboxes('levels')}
</div>
</div>

<div className={styles.columns}>
<div>
We found{' '}
<b>
{this.state.filteredItems.length === 0
? this.state.courseList.length
: this.state.filteredItems.length}
</b>{' '}
courses for &quot;{this.props.userInput}
&quot;

<>
<div className={styles.filtercol}>
<div className={styles.filtertext}>Filter</div>
<div>
<div className={styles.filtercategory}>Semester</div>
{this.renderCheckboxes('semesters')}
</div>
<div>
<div className={styles.filtercategory}>Level</div>
{this.renderCheckboxes('levels')}
</div>
</div>

<div className={styles.bar}>
<div className={styles.columns}>
<div>
<label>Sort By: </label>
<select
value={this.state.selected}
className={styles.sortselector}
onChange={(e) => this.handleSelect(e)}
>
<option value="relevance">Relevance</option>
<option value="rating">Overall Rating</option>
<option value="diff">Difficulty</option>
<option value="work">Workload</option>
</select>
We found{' '}
<b>{this.state.filteredItems.length}</b> courses for &quot;
{this.props.userInput}&quot;
</div>

<button
className={styles.filterbutton}
onClick={this.setShowFilterPopup}
>
Filter <img src={FilterIcon} alt="filter-icon" />
</button>
</div>
{this.state.showFilterPopup && (
<FilterPopup
state={this.state}
props={this.props}
renderCheckboxes={this.renderCheckboxes}
getSubjectOptions={this.getSubjectOptions}
setShowFilterPopup={this.setShowFilterPopup}
/>
)}

<div className={styles.layout}>
<div className={styles.list}>
<div className={styles.resultslist}>
<ul>{this.renderResults()}</ul>
<div className={styles.bar}>
<div>
<label>Sort By: </label>
<select
value={this.state.selected}
className={styles.sortselector}
onChange={(e) => this.handleSelect(e)}
>
<option value="relevance">Relevance</option>
<option value="rating">Overall Rating</option>
<option value="diff">Difficulty</option>
<option value="work">Workload</option>
</select>
</div>

<button
className={styles.filterbutton}
onClick={this.setShowFilterPopup}
>
Filter <img src={FilterIcon} alt="filter-icon" />
</button>
</div>
<div className={styles.preview}>
<PreviewCard
course={this.state.cardCourse}
transformGauges={this.state.transformGauges}
{this.state.showFilterPopup && (
<FilterPopup
state={this.state}
props={this.props}
renderCheckboxes={this.renderCheckboxes}
getSubjectOptions={this.getSubjectOptions}
setShowFilterPopup={this.setShowFilterPopup}
/>
</div>
)}

{this.state.filteredItems.length !== 0 && (
<div className={styles.layout}>
<div className={styles.list}>
<div className={styles.resultslist}>
<ul>{this.renderResults()}</ul>
</div>
</div>
<div className={styles.preview}>
<PreviewCard
course={this.state.cardCourse}
transformGauges={this.state.transformGauges}
/>
</div>
</div>
)}
</div>
</div>
</>
</div>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions server/src/search/search.controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ const fullCourseSearch = async ({ search }: SearchQueryType) => {
// check if query is a subject, if so return only classes with this subject. Catches searches like "CS"
const courseSubject = await findCourseSubject(query);
if (courseSubject.length > 0) {
return new Set(courseSubject);
return new Set(courseSubject.sort((a, b) => Number(a.classNum) - Number(b.classNum)));
}

// checks if search is a professor
// returns all courses taught by particular professor
const coursesByProfessor = await search.searchQuery(findCourseProfessor);
if (coursesByProfessor && coursesByProfessor.length > 0) {
return new Set(coursesByProfessor);
return new Set(coursesByProfessor.sort((a, b) => Number(a.classNum) - Number(b.classNum)));
}

// check if first digit is a number. Catches searchs like "1100"
Expand Down
Loading