Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2024 - E2404 Refactor student teams functionality

2024-03-28T21:32:36Z

Amantra: /* Login Credentials */

This page provides details about Expertiza Issue E2404. "Refactor student_teams functionality" which is an OSS project in CSC517 Spring 2024.

== Background ==
The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.
Users & Participants: Everyone who took the OODD class is a user in expertiza, and instructors can add users as participants in an assignment so that they can access it.
Almost everything within Assignments is done by participants, not users. That is, everything except teams_users. In the documentation, it can be noted that the team_users table references users instead of participants.
This anomaly causes problems with how student teams are rendered in the UI, and it doesn’t go well with the new functionality that was recently introduced.

== Requirements ==
=== Changing the schema ===
* Rename the table table teams_users to teams_participants
* Create a column that would be called “participant_id”, which will be a foreign key that references participants table
* Create a migration that fetches the assignment_id for each tuple from the teams table.
* Find out all the places where user_id is being used, refactor those so that participant_id is used.

=== Refactoring the teams rendering (/views/student_teams/view.html.erb) ===
* The logic in the team's view that iterates and fetches information of all the team members and displays them would be refactored so that it matches our new design.
* The new changes should not break the view that works for data where things are populated with user_id. Hence best approach is separate the older functionality into a separate partial and code the new functionality into a separate partial.
* All the teams are being formed with participant_id instead of user_id

=== Other Changes ===
* Update logic for all the crud functionalities in teams_users controller
* Rename the teams_users_controller to teams_participants_controller
* Some code where sql queries are written to fetch data, should be replaced with fetching data from rails ActiveRecord methods.
* The html.erb files have extensive ruby code written for fetching data from the database. This code should be removed from the view files and placed into helper classes.
* Extensive test cases should be present for all the code that is written.

== Schema Changes ==

Here's a brief overview of the key changes we implemented:
* Table Renaming: Our schema initially included a teams_users table, which, upon review, seemed misaligned with our domain model. To better represent the relationship between teams and participants, we decided to rename this table to teams_participants. [https://github.com/abhigna98/expertiza/commit/64bdf4abe9f79803e2ce60980e6d38af177d1303 GitHub Commit]
* Introduction of participant_id: To establish a more direct linkage between team participations and individual participants, we added a participant_id column to the newly named teams_participants table. This column serves as a foreign key that references the participants table, clearly defining the relationship. [https://github.com/abhigna98/expertiza/commit/a6a05b248ed804710f30d550cc5a6f99acf59d5b GitHub Commit]
* Populating participant_id column: The centerpiece of our refactor was the migration designed to populate the new participant_id column with accurate data. Leveraging the existing assignment_id from the teams table and user_id from the teams_participants table, our migration carefully matched each team participation to its corresponding participant and updated the participant_id accordingly.[https://github.com/abhigna98/expertiza/commit/e72aa670b5f786cd82d2ba16d8de3c2e55851587 GitHub Commit]

=== ER diagram for updated schema ===
[[File:ER_Updated.png |900px]]

== Refactoring teams rendering ==

The objective of this refactoring task is to improve the readability, maintainability, and scalability of the code responsible for rendering team information in the view.html.erb file of the student_teams view. This refactoring involves separating existing functionality into specific partials and ensuring compatibility with the new data structure using participant_id instead of user_id. It's crucial to ensure that these changes do not break existing functionality that relies on user_id data. By separating old and new functionalities into distinct partials and conducting a data migration, the codebase will become more organized and adaptable, facilitating future development efforts. [https://github.com/abhigna98/expertiza/commit/146ad3f9c46e047ec209939e6762e579c47134ba GitHub Commit]

=== ''Refactor Implementation'' ===

we have successfully refactored the 'view.html.erb' file in the student_teams view to enhance readability and maintainability. The original code was cluttered, making it challenging to understand and extend. Through modularization, we have simplified the code by introducing partials, resulting in a more organized structure.

The following partials were created as part of the refactoring process:

# '_invited_people.html.erb' : This partial is responsible for displaying invited participants to the assignment team.
# '_display_advertisements.html.erb' : This partial handles the display of advertisements within the view.
# '_send_invitations.html.erb': This partial implements the functionality for sending invitations to team members.
# '_received_invitations.html.erb': This partial is used to display received invitations for the current user.
These partials contribute to a cleaner and more manageable codebase, improving the overall developer experience and facilitating future updates to the Expertiza application.

== Refactoring CRUD Functionalities in Teams Participants Controller ==

Firstly,we renamed teams_users_controller to teams_participants_controller and also all its reference files like teams_users_helper.rb and teams_users_controller_spec.rb.

In create method,
#Refactored to fetch the AssignmentParticipant only once instead of twice by removing a redundant find query.
#Adjusted to check if the user is already part of the team by using assignment.participant_on_team? instead of finding the AssignmentParticipant first and then checking the team.
#Similarly checked for CourseTeam as well
#Improved the process of fetching CourseParticipant by consolidating two separate find queries into one and using if course.participant_on_team? for a cleaner check on team membership.

[[File:Create1.PNG|700px]]

[[File:Create2.PNG|700px]]

In delete method,
#The delete method now uses Participant.find_by instead of User.find to obtain the participant object directly using the participant ID. This reduces the number of database queries.
#Removed a redundant User.find query since the user can be fetched through the participant object.

[[File:Deletemethod.PNG|700px]]

== Refactoring Signedup Team ==

#In SignedUpTeam, the superclass is corrected from ApplicationRecord to ActiveRecord::Base, ensuring compatibility with the expected Rails inheritance structure.
#In queries,team_users has been replaced with team_participants in finding team participants and team users.

[[File:Signup4.PNG|500px]]

[[File:Signup1.PNG|700px]]

[[File:Signup2.PNG|700px]]

[[File:Signup3.PNG|700px]]

== Implementation ==

Main files which were changed are

Controllers:
* app/controllers/assessment360_controller.rb
* app/controllers/grades_controller.rb
* app/controllers/invitations_controller.rb
* app/controllers/join_team_requests_controller.rb
* app/controllers/lottery_controller.rb
* app/controllers/pair_programming_controller.rb
* app/controllers/popup_controller.rb
* app/controllers/review_mapping_controller.rb
* app/controllers/sign_up_sheet_controller.rb
* app/controllers/teams_participants_controller.rb

Models:
* app/models/signed_up_team.rb
* app/models/team.rb
* app/models/teams_participant.rb
* app/models/teams_user.rb
* app/models/user.rb

Helpers:
* app/helpers/teams_participants_helper.rb

Views:
* app/views/student_teams/_display_advertisements.html.erb
* app/views/student_teams/_invited_people.html.erb
* app/views/student_teams/_received_invitations.html.erb
* app/views/student_teams/_select_duty_form.html.erb
* app/views/student_teams/_send_invitations.html.erb
* app/views/student_teams/_team_display.html.erb
* app/views/student_teams/edit.html.erb
* app/views/student_teams/view.html.erb

Config:
* config/locales/en_US.yml

db:
* db/migrate/20240324042615_rename_teams_users_to_teams_participants.rb
* db/migrate/20240324043736_add_participant_id_to_teams_participants.rb
* db/migrate/20240324044135_populate_participant_id_in_teams_participants.rb

spec:
* spec/controllers/student_teams_controller_spec.rb
* spec/controllers/teams_participants_controller_spec.rb
* spec/controllers/teams_users_controller_spec.rb
* spec/helpers/grades_helper_spec.rb
* spec/models/assignment_spec.rb
* spec/models/assignment_team_spec.rb
* spec/models/course_spec.rb
* spec/models/course_team_spec.rb
* spec/models/course_team_spec.rb
* spec/models/team_spec.rb
* spec/models/participant_spec.rb

== Test Plan ==

=== Manual Testing ===

After implementing changes in 'teams_users', it's essential to reassess the flows and user stories involving its usage. This entails manually examining various pathways through which a team for an assignment can be created in Expertiza, along with associated operations like removing a user from a team, adding a new user, deleting a team, and so forth. This testing phase is crucial to verify that Expertiza's functionality remains intact and operates as expected post-refactoring.

The primary user stories we examined include:
''Student Creates a Team:''
* First, the student navigates to the assignments section in their view.
* Then, they select a specific assignment and access the "Your Team" page.
* On this page, they input a team name and confirm by clicking the "Name Team" button.
[[File: New Team.png|700px]]

''Student Sends Invitations to Other Students:''
* After successfully creating a team, the student proceeds to send invitations to other students.
* They input the usernames of the desired recipients and send invitations by clicking on the "Invite" button.
[[File: Sending Invitaion.png|700px]]

''Student Joins a Team:''
* In the recipient student's Expertiza view, they will see a notification or invitation indicating that they have been invited to join a team.
* They navigate to the relevant assignment and locate the invitation.
* Finally, they accept the invitation to join the team.
[[File: Receive Invitation.png|700px]]

=== Automated RSpec Testing ===
As this is a refactoring project, the testing scope is confined to validating the changes made during the refactoring process. Additionally, it involves ensuring that the existing test cases remain intact and are adjusted accordingly to accommodate any modifications.[https://github.com/abhigna98/expertiza/commit/a03c577e14f020d87cae3a24e0dd7685bee0a719 GitHub Commit]

The `Team` class encapsulates functionalities related to managing teams in the context of assignments or courses. It defines methods for handling team participants, checking for existing teams, generating unique team names, and importing/exporting team data. The provided code includes extensive test cases to ensure the reliability and correctness of these methods. Test blocks such as `describe '#participant'` validate the retrieval of participants for a team, while `describe '.check_for_existing'` verifies the behavior of checking for existing teams within a specific assignment context. Additionally, the class includes methods for importing teams from external sources, handling duplicates, and managing team names. Overall, the `Team` class provides a robust framework for managing teams within the application, with thorough testing to ensure its functionality in various scenarios.

[[File: RSpecTeam spec.jpeg|700px|center]]

The `Assignment` class is thoroughly tested through a series of test cases, validating its functionalities in various scenarios. Tests include checking default values, verifying team assignments, examining topic presence, and ensuring proper course assignment. Methods for managing teams, handling rubrics, and assigning reviewers dynamically are also rigorously tested. Error handling for review configurations and metareviewer assignments is validated, ensuring robustness. Overall, these tests offer comprehensive coverage of the `Assignment` class, guaranteeing its reliability and correctness in different contexts and configurations.

[[File: RSpecAssignment rb.jpeg|700px|center]]

The test suite for the `AssignmentTeam` model in the provided code is extensive, covering a wide range of functionalities and scenarios. It validates key aspects such as hyperlinks submission, participant inclusion, deletion of teams, import/export operations, and more. Each test case meticulously examines different conditions to ensure the model's correctness and robustness. From verifying the presence of hyperlinks to assigning reviewers and checking submissions, the tests provide comprehensive coverage. Additionally, the test suite demonstrates adherence to best practices in software testing, including clear setup, execution, and verification steps. Overall, these tests play a crucial role in maintaining the reliability and stability of the `AssignmentTeam` model within the Expertiza application.

[[File:RSpecAssignmentTeam.jpeg|700px|center]]

The verification process extended to testing scenarios such as adding a new team member when the team was already full, removing and subsequently re-adding the same user, and sending invitations to users already part of the team. This ensured that the team management feature in Expertiza functioned reliably and consistently across diverse user interactions and situations.

== Bonus Task ==
==== ''Issue:'' ====
The Team information page allows the same user to be added multiple times, likely due to instructors adding a member already invited by a student.

==== ''Recreation of the issue:'' ====

* Instructor adds a member already invited by a student.
* Student invites a member who is subsequently added by the instructor.

==== ''Primary methods to create a team within the Expertiza platform'' ====

BY INSTRUCTOR:
*Instructors have the authority to create teams through the "Manage" tab.
*They can access this option by navigating to the specific course and clicking on the "Add Teams" feature.
*This allows instructors to directly form teams and assign students to them.

BY STUDENT:
*Students can initiate the team creation process through the "Assignments" tab.
*Within this section, students can select any assignment and proceed to the "Your Team" subsection.
*Here, they have the option to create a new team, providing a team name and possibly inviting other students to join.

==== ''Resolution'' ====
* Identification of Issue Source:
First, we need to identify the root cause of the problem. This may involve tracing the code paths where team creation occurs and pinpointing where duplicate entries are being allowed.

* Validation Checks:
Implement validation checks to prevent the addition of duplicate users to a team. This can be done by:
Checking if the user is already a member of the team before adding them again.
Verifying if the user has already received an invitation to join the team before sending another invitation.
Ensuring that each user can only be added to the team once.

* Error Handling:
Provide appropriate error messages or notifications to users when they attempt to add a user who is already part of the team. This will inform them of the issue and prevent accidental duplication.

* Refinement of Team Creation Workflow:
Review the team creation workflow to streamline the process and minimize the likelihood of duplicate entries. This may involve simplifying the interface, providing clearer instructions, or implementing additional safeguards.

* Testing and Validation:
Thoroughly test the updated team creation functionality to ensure that duplicate entries are properly prevented. Test various scenarios, including adding existing team members, inviting users who have already been invited, and attempting to add users who are already part of the team.

While some solutions, such as displaying a message when a user is already a team member, have already been implemented, there are still further changes required to fully address the issue.

== Team Members ==
# Meghana Chowdary Ainampudi (mainamp@ncsu.edu)
# Sai Abhigna Tummala (stummal5@ncsu.edu)
# Parshav Gandhi (pjgandh3@ncsu.edu)

Mentor: Ananya Mantravadi

== Code Details ==
Github Pull Request - https://github.com/expertiza/expertiza/pull/2770

Repo - https://github.com/abhigna98/expertiza

Demo Link - https://youtu.be/7FQTt501bBg

Deployment Link - http://152.7.178.105:8080

CSC/ECE 517 Fall 2007/wiki2 4 2q

2024-01-12T01:48:15Z

Amantra:

'''A Guide to Use Cases on the WEB'''

''Topic: Use cases. There are even more pages on the Web on use cases than on [https://www.codecademy.com/articles/mvc MVC]. If someone wants to learn about them, what should (s)he do? Look at the first few hits in Google? I expect we can do better than that. Write a review of the use-case sites on the Web. Which are best for learning about the concept? Which have the most instructive examples? Which teach advanced concepts that are not apparent in perusing most use-case sites? Read at least several dozen pages before deciding how to organize your overview.''

=Introduction=

This page tries to review the use-case sites on the Web which can be useful to best understand the concept. Also, a few instructive examples are covered paying attention to the basic use case as well as advanced concepts that are not apparent in perusing most use-case sites.

=What is a Use Case?=

==Definition==
<blockquote> "'''''Use case''' is a methodology used in software and systems engineering to understand and identify the functional requirements of a system. Use cases describe the interaction between a primary actor, the initiator of the interaction, and the system itself, represented as a sequence of simple steps.''"[1][2]</blockquote>

Simply put, a use case is a description of how a person will interact with the system to achieve a certain goal. It helps to learn if any errors could occur in the process and design features to resolve those errors.

It consists of 3 primary elements:
* Actor: They are generally the user of the system or an external entity and can be a person or another system itself. A use case can be best described as what happens when the actor is using the system to achieve some goal.
* System: It describes the process/steps to reach the final outcome.
* Goal: A goal is an end result that follows the sequence of events as described in the use cases.

Every use case gives a complete list of events that occur from the time the actor starts interacting with the system till the time the final goal is achieved. A use case also records all the possible scenarios that may occur while trying to reach the desired goal. We can think of it as the existence of a main course of events that will occur in normal circumstances, to which the exceptional cases are added. Anything that is not relevant to the actor/user is not a part of the use case.

Listed below are a few links to external websites which further illustrate this concept.

* [https://www.ibm.com/developerworks/library/ws-using-oo/ OO design process: Use cases, an introduction]
* [http://www.cs.uno.edu/~jaime/Courses/4210/useCaseFundamentals.html Use Case Fundamentals]

==UML Diagrams and Use Case Diagrams==
<blockquote> "''The Use case diagram is used to identify the primary elements and processes that form the system. The primary elements are termed as 'actors' and the processes are called "use cases." The Use case diagram shows which actors interact with each use case."''[3]</blockquote>

UML is a collection of diagrams that visually represents a software or a system. A use case diagram is one of its types. They are useful in providing a pictorial view of the interactions between the users (actors) and sets of events (use cases) associated with the system. They also evolve as the projects or systems change with time. The standard elements of a use case diagram make comprehension easy for anyone trying to understand the use case.

Listed below are useful links in understanding how to draw typical use case diagrams.

* [https://www.smartdraw.com/uml-diagram/ An introduction to UML diagrams & Tutorial]
* [http://www.developer.com/design/article.php/2109801 Elements of a Use Case Diagram]
* [https://www.andrew.cmu.edu/course/90-754/umlucdfaq.html Tips and FAQ]

=How to Write a Use Case?=

==Writing Effective Use Cases==

One of the most difficult problems in software development is capturing precisely what you want to build. Inaccurate requirements will result in significant delay, rework, or even abandonment of the project. Effective applying the use case technique helps your team capture requirements from the user's point of view which can be easily understood by both the end-user and your team. Use case-driven development to support subsequent development activities such as analysis, design, and testing.

Listed below are useful links in understanding how to write effective use cases.
* [https://www.usability.gov/how-to-and-tools/methods/use-cases.html How to write a use case (1)]
* [https://www.wikihow.com/Write-a-Use-Case How to write a use case (2)]
* [http://www.utm.mx/~caff/doc/OpenUPWeb/openup/guidances/guidelines/detail_ucs_and_scenarios_6BC56BB7.html Efficient way to write use cases]
* [https://www.visual-paradigm.com/tutorials/writingeffectiveusecase.jsp Drawing use cases using a tool]

=Examples using Use Cases=
In this section, a few instructive examples have been outlined along with their references which illustrate different ways in which use cases can be written. The first example is a basic use-case template.

===Basic use case template===
Described below are some of the characteristics of a typical use case.
'''CHARACTERISTIC INFORMATION'''
* ''Goal in Context'': Buyer issues request directly to our company, expects goods shipped and to be billed.
* ''Scope'': Company
* ''Preconditions'': We know the Buyer, their address, etc.
* ''Success End Condition'': Buyer has goods, we have money for the goods.
* ''Failed End Condition'': We have not sent the goods, Buyer has not spent the money.
* ''Primary Actor'': Buyer, any agent (or computer) acting for the customer
* ''Trigger'': purchase request comes in.

'''MAIN SUCCESS SCENARIO'''
1. Buyer calls in with a purchase request.
2. The company captures the buyer’s name, address, requested goods, etc.
3. The company gives buyers information on goods, prices, delivery dates, etc.
4. Buyer signs for order.
5. The company creates orders, and ships orders to buyers.
6. The company ships invoices to the buyer.
7. Buyers pay invoices.

'''EXTENSIONS'''
3a. The company is out of one of the ordered items:
3a1. Renegotiate order.
4a. Buyer pays directly with a credit card:
4a1. Take payment by credit card (use case 44)
7a. Buyer returns goods:
7a. Handle returned goods (use case 105)
The basic steps that can be followed to ensure writing an effective use case have been described well in [https://www.wikihow.com/Write-a-Use-Case How to Write a use case].[4]

===Restaurant===
This example provides one use case but distinctly provides a step-by-step analysis of the events that constitute a use case. It mentions the actors, pre-conditions, exceptions, and alternative scenarios.

* [http://www.uml-diagrams.org/restaurant-uml-use-case-diagram-example.html Restaurant]

===Purchase order===
This example provides a typical use case specification by listing the activity, result, constraints, and extensions involved with a purchase order from a Finance web page.

* [https://creately.com/diagram/example/ifq4uulr/Purchase%20Order Purchase order System]

===ATM system===
This example is a little more involved in that it provides several use cases associated with using an ATM system including cash withdrawal,
transfers, deposits, balance inquiries, etc.

* [http://www.cs.fsu.edu/~baker/swe1/restricted/templates/rr631gv1_stuwrk_withdraw_cash_use-case_spec.pdf ATM System]

===A shopping website order Process===
This is a very good example that describes the scenarios and extensions involved in writing a use case for an online shopping order. It also describes the UML diagram.

* [http://www.uml-diagrams.org/examples/online-shopping-use-case-diagram-example.html?context=uc-examples Shopping website order]

===Self Service Machine===
This example provides typical use cases of a self-service machine like supermarket barcode scanners, online banking services, check-in kiosks, and so on. Some of the aspects of using a self-service machine are: buying a product, re-stocking the machine, collecting the money, etc. The following link provides a UML diagram that depicts the interaction between the users and the system through the use case of self-service kiosks.

* [https://creately.com/diagram/example/hy8pucc5/Self-Service%20Kiosk Self-Service Machine]

=References=

* [1] Ivar Jacobson (1992). Object-Oriented Software Engineering. Addison Wesley Professional. ISBN 0-201-54435.
* [2] [http://en.wikipedia.org/wiki/Use_case Wikipedia Page] Basic definition of Use Case
* [3] [http://www.developer.com/design/article.php/2109801 Use Case Diagrams]
* [4] [https://www.wikihow.com/Write-a-Use-Case How to Write a use case]

=External Links=

* [http://www.cs.uno.edu/~jaime/Courses/4210/useCaseFundamentals.html Use Case Fundamentals]
* [http://www.developer.com/design/article.php/2109801 Elements of a Use Case Diagram]
* [http://www.cs.rug.nl/search/uploads/Teaching/RE2009Fall/paper/1999_Lilly_TOOLS_Use%20Case%20Pitfalls%20Top%2010%20Problems%20from%20Real%20Projects%20Using%20Use%20Cases.pdf Use Case Pitfalls]
* [https://www.visual-paradigm.com/tutorials/writingeffectiveusecase.jsp Writing effective Use Cases]
* [https://www.wikihow.com/Write-a-Use-Case How to Write a use case]
* [http://www.utm.mx/~caff/doc/OpenUPWeb/openup/guidances/guidelines/detail_ucs_and_scenarios_6BC56BB7.html Writing Use Case]
* [https://www.andrew.cmu.edu/course/90-754/umlucdfaq.html Tips and FAQ]
* [https://www.codecademy.com/articles/mvc MVC]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:29:51Z

Amantra: /* Flowchart */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-7e27a69ffb5fc12f35e704744acac1f25674cc303b2df0aa31e616597d1038dc list_submission.html.erb]) ====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-01b69231711e558d3d45d41b06f8b7f1603915a184943d1b96883d3de097673c all_students_all_reviews.html.erb])====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-81682970df434d0a417dee04daefe56b9eb154c75b832b3ba4bbc49ddd571e6a course_student_grade_summary.html.erb])====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== Lo-fi UI Example ===
[[File:Lofi.jpg|1000px]]

=== Flowchart ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Automated Testing ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:29:38Z

Amantra: /* Lo-fi UI Example */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-7e27a69ffb5fc12f35e704744acac1f25674cc303b2df0aa31e616597d1038dc list_submission.html.erb]) ====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-01b69231711e558d3d45d41b06f8b7f1603915a184943d1b96883d3de097673c all_students_all_reviews.html.erb])====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-81682970df434d0a417dee04daefe56b9eb154c75b832b3ba4bbc49ddd571e6a course_student_grade_summary.html.erb])====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== Lo-fi UI Example ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Automated Testing ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:28:35Z

Amantra: /* Demo Video reflecting changes */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-7e27a69ffb5fc12f35e704744acac1f25674cc303b2df0aa31e616597d1038dc list_submission.html.erb]) ====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-01b69231711e558d3d45d41b06f8b7f1603915a184943d1b96883d3de097673c all_students_all_reviews.html.erb])====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-81682970df434d0a417dee04daefe56b9eb154c75b832b3ba4bbc49ddd571e6a course_student_grade_summary.html.erb])====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Automated Testing ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:28:13Z

Amantra: /* Rspec Unit Tests */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-7e27a69ffb5fc12f35e704744acac1f25674cc303b2df0aa31e616597d1038dc list_submission.html.erb]) ====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-01b69231711e558d3d45d41b06f8b7f1603915a184943d1b96883d3de097673c all_students_all_reviews.html.erb])====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-81682970df434d0a417dee04daefe56b9eb154c75b832b3ba4bbc49ddd571e6a course_student_grade_summary.html.erb])====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Automated Testing ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:23:57Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-7e27a69ffb5fc12f35e704744acac1f25674cc303b2df0aa31e616597d1038dc list_submission.html.erb]) ====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-01b69231711e558d3d45d41b06f8b7f1603915a184943d1b96883d3de097673c all_students_all_reviews.html.erb])====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-81682970df434d0a417dee04daefe56b9eb154c75b832b3ba4bbc49ddd571e6a course_student_grade_summary.html.erb])====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:23:12Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-7e27a69ffb5fc12f35e704744acac1f25674cc303b2df0aa31e616597d1038dc list_submission.html.erb]) ====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-01b69231711e558d3d45d41b06f8b7f1603915a184943d1b96883d3de097673c all_students_all_reviews.html.erb])====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:20:04Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-7e27a69ffb5fc12f35e704744acac1f25674cc303b2df0aa31e616597d1038dc list_submission.html.erb]) ====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:18:30Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

==== Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-10395a909ed1f2034b4a4c8f57c0e30382d9492e0b16bb6fe6fb91a424f6f034 _review_report.html.erb]) ====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:14:52Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:13:34Z

Amantra: /* Assignment Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]

[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:13:03Z

Amantra: /* Course Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]

[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:12:38Z

Amantra: /* User Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:11:23Z

Amantra: /* User Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:10:23Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx]) ====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:09:21Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f tree_display.jsx])====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:08:04Z

Amantra: /* Issue With Previous Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issues With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:07:47Z

Amantra: /* E2153 Previous Implementations */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:06:56Z

Amantra: /* Search for User:) */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:06:40Z

Amantra: /* Search for User: (code) */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:)===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T17:03:49Z

Amantra: /* Implementation (code) */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User: ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f code])===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 list.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-d954fa1ef4604a6f26c8298dc906e58f72c703a73ecdf6b3d23f62dfab05c956 _search.html.erb], [https://github.com/expertiza/expertiza/pull/2706/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e users_controller.rb])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:55:27Z

Amantra: /* Search for User: (code) */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User: ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f code])===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 code])====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change </li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:54:09Z

Amantra: /* Search for User: */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User: ([https://github.com/expertiza/expertiza/pull/2706/files#diff-ab29537d7f05e403db23d4970822a38391693e8b34dcb1c3849e32b8dd84853f code])===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change ([https://github.com/expertiza/expertiza/pull/2706/files#diff-4e77bbdf22e7d65887a01a2097d3c065308bb4ed40a71fecb6141f3016783206 code])</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:38:36Z

Amantra: /* Team (Member) Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>

[[File:Tm.jpeg|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

File:Tm.jpeg

2023-12-01T16:38:09Z

Amantra:

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:33:42Z

Amantra: /* Flowchart */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:33:33Z

Amantra: /* Lo-fi UI Example */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:33:10Z

Amantra: /* Code Snippets Modified */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|700px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|700px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|700px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|700px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:32:35Z

Amantra: /* Student Grades Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.jpeg|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|800px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|800px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|800px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

File:Gs2.jpeg

2023-12-01T16:31:54Z

Amantra:

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:26:28Z

Amantra: /* Code Snippet Modified */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippets Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|800px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|800px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|800px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-12-01T16:25:59Z

Amantra: /* Code Snippet Modified */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is more specific with respect to each test.
# We added more tests motivated by the test skeleton provided to us.
# We are added tests to test views where we added JavaScript code, which are available in the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (view last commit)]

[[File:Userspec1.png|800px]]

'''2. features/review_report_view_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:Review report spec.jpeg|800px]]

'''3. features/list_submissions_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/58d7ec58e3f7402139e92ee6e91d1f3acba18f2f (view commit)]

[[File:List submissions spec.jpeg|800px]]

'''4. features/search_spec.rb''' [https://github.com/expertiza/expertiza/pull/2706/commits/3c5a56159337a43b33a2448dcea77e0c534b1a5f (view commit)]

[[File:Search spec.jpeg|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

File:List submissions spec.jpeg

2023-12-01T16:05:38Z

Amantra:

File:Review report spec.jpeg

2023-12-01T16:02:38Z

Amantra:

File:Search spec.jpeg

2023-12-01T15:57:52Z

Amantra:

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-30T22:31:47Z

Amantra: /* Code Snippet Modified */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.
# We are also adding tests to to test views where we added JavaScript code, which is available in the file "search_spec.rb" the features folder inside spec folder.

'''1. models/user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (last commit link)]

[[File:Userspec1.png|800px]]

'''2. features/review_report_view_spec.rb'''

'''3. features/list_submissions_spec.rb'''

'''4. spec/features/search_spec.rb'''

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-30T22:26:33Z

Amantra: /* Code Snippet Modified */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.
# We are also adding tests to to test views where we added JavaScript code, which is available in the file "search_spec.rb" the features folder inside spec folder.

'''1. user_spec.rb:''' [https://github.com/expertiza/expertiza/pull/2706/commits/a77afc80378289baad0ef6b53df13c3728216b82 (last commit link)]

[[File:Userspec1.png|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-30T22:21:51Z

Amantra: /* Test Plan */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We wrote our test cases as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.
# We are also adding tests to to test views where we added JavaScript code, which is available in the file "search_spec.rb" the features folder inside spec folder.

'''1. user_spec.rb:'''

[[File:Userspec1.png|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T22:40:52Z

Amantra: /* Rspec Unit Tests */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.
# We are also adding tests to to test views where we added JavaScript code, which is available in the file "search_spec.rb" the features folder inside spec folder.

'''1. user_spec.rb:'''

[[File:Userspec1.png|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T22:32:50Z

Amantra: /* Code Snippet Modified */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

'''1. user_spec.rb:'''

[[File:Userspec1.png|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T22:01:39Z

Amantra: /* Code Snippet Modified */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

'''1. user_spec.rb:'''

[[File:Userspec1.png|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T22:01:06Z

Amantra: /* Test Plan */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

1. user_spec.rb:

[[File:Userspec1.png|800px]]

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

File:Userspec1.png

2023-11-28T21:57:51Z

Amantra:

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T21:42:51Z

Amantra: /* Demo Video reflecting changes */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo video] for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T21:42:21Z

Amantra: /* Resulting Snapshots */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Demo Video reflecting changes ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo] video for a detailed demonstration of the changes we made in the UI.

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T21:41:05Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

==== Student Grades Search UI ====
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Resulting Snapshots ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo] video for a rough idea of the UI pages.

=== User Search UI ===
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

=== Course Search UI ===
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

=== Assignment Search UI ===
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

=== Questionnaire Search UI ===
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

=== Review Search UI ===
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

=== Team (Member) Search UI ===
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

=== Student Review Scores Search UI ===
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

=== Student Grades Search UI ===
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T21:40:31Z

Amantra: /* Implementation */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

==== Student Review Scores Search UI ====
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Resulting Snapshots ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo] video for a rough idea of the UI pages.

=== User Search UI ===
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

=== Course Search UI ===
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

=== Assignment Search UI ===
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

=== Questionnaire Search UI ===
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

=== Review Search UI ===
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

=== Team (Member) Search UI ===
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

=== Student Review Scores Search UI ===
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

=== Student Grades Search UI ===
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T21:35:33Z

Amantra: /* Team (Member) Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

==== Team (Member) Search UI ====
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Resulting Snapshots ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo] video for a rough idea of the UI pages.

=== User Search UI ===
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

=== Course Search UI ===
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

=== Assignment Search UI ===
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

=== Questionnaire Search UI ===
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

=== Review Search UI ===
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

=== Team (Member) Search UI ===
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

=== Student Review Scores Search UI ===
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

=== Student Grades Search UI ===
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza

2023-11-28T21:35:19Z

Amantra: /* Review Search UI */

== Introduction ==
The [http://expertiza.ncsu.edu/ Expertiza] project makes use of peer review to allow students to learn from one another. It's a Ruby on Rails-based open-source application. It is used by faculty and students for the management of courses and assignments for specific courses. Different screens in the manage content area of the application offer information about users, courses, assignments, questionnaires, and reviews.

The program should have a fully functional search functionality throughout all views, allowing a user to quickly find any sort of data using any number of parameters that meet his needs. Users should be found using one additional parameter, such as their name, full name, email address, and so on. Similarly, assignments should be searched by name, creation date, updated date, and other criteria.

However, the existing application's search functionality is limited to a single parameter for users and assignments. A search feature has not yet been introduced in the management of questionnaires. This project aims to improve Expertiza's search functionality by adding search bars if they aren't already there, creating an advanced search tool that allows users to search using several parameters, and making the search functionality look more appealing.

== Test Login Credentials ==
<li>UserId: instructor6</li>
<li>Password: password</li>

== Problem Statement ==

#An instructor or administrator can search for a user by name, user ID, or other characteristics.
#An instructor should be able to search for assignments by name, due date (creation date, updated date), or other characteristics.
#An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
##For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
##One should also be able to search for questionnaires by words used in items (questions) that belong to the questionnaires.
#There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
#An instructor or administrator should be able to search for all the assignments that a particular user has participated in.

Some of these searches are currently possible in Expertiza, but the user interface is quite cumbersome. This is especially true on an instructor’s or administrator’s homepage, where large and confusing search boxes shift the important parts of the page down to the bottom of the screen. There should be a way to do a simple search by just typing text into an unobtrusive textbox. If more criteria need to be specified, there should be an “advanced search” button or link that opens up additional textboxes, perhaps in Javascript, that are of reasonable size and do not overwhelm other content on the page.

=== E2153 Previous Implementations ===
#[https://github.com/yhslo/expertiza E2153 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2165 E2153 Pull Request]
#[https://youtu.be/SxbHz9bp2L0 Demo Video]

#[https://github.com/vishnuchalla/expertiza/tree/beta E2233 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2374 E2233 Pull Request]
#[https://drive.google.com/file/d/1hAey57B81L0WRtvPL45Kc7ppMeTnaECa/view?usp=sharing Demo Video]

=== E2233 Current Implementation ===
#[https://github.com/nainisha-b/expertiza E2355 Github Repository]
#[https://github.com/expertiza/expertiza/pull/2655 E2355 Pull Request]
#[https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video]

=== Issue With Previous Implementation ===
# The code is not readable and there are some parts of the code that still need to DRYed out.
# The test cases "it" clause must be more specific to the test. This is the same for all the test cases as of now which is quite confusing.
# All implementations are working on javascript inside tree_display.jsx. There are some changes that are overlapping and confusing to refactor.
# All the code changes should follow proper ruby naming conventions and there should be enough comments to explain the functionality. But no unnecessary comments too.
# With compatibility issues, these workers can't be checked in currently.
# Format is not aligned between course search/assignment search and user search/rubric search.
# The questionnaire search is not straightforward and the list is not working.
# Searching for users with "name" and "full name" is confusing.
# Searching criteria can't be accumulated.
# Instructors and administrators can't find assignments that a user participates in.
# There is no search option to find reviews of a particular team.

== Proposed Solution ==

The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.

Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

===Search for User:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.

====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]

====Implementation====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.

==== User Search UI ====
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.

In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.

====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]

====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.

Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.

The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.

==== Course Search UI ====
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.

When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.

====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]

====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.

#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.

==== Assignment Search UI ====
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name

Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.

The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.

In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.

====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]

====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.

Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.

==== Questionnaire Search UI ====
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.

In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.

====Implementation====

#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.

==== Review Search UI ====
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

===Search for Team (Member) Submissions:===

This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.

====Implementation====

#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.

=== Team (Member) Search UI ===
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.

====Implementation====

#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.

===Search for Student in a Course (Grades):===

In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.

====Implementation====

#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.

=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]

=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]

== Test Plan ==

When the project was pulled from the main repository, test plans do not give enough coverage for the additional functionalities that we added. Within the scope of TDD research, we have opted to have the test skeletons by Mustafa Olmez, which has given us a very good idea on the tests that should be integrated into our unit. We plan to extend this as part of our final project.

=== Rspec Unit Tests ===
Functionalities to be tested:
# Given an unfiltered search result, everything should be included.
# The filtered search produces a list of items that include the filtered search item.
# When a search is invalid, an empty list is returned.

==== Code Snippet Modified ====
Here are some improvements on previously implemented test cases:
# The "it" clause is going to be more specific with respect to each test.
# We will be introducing fixtures in the tests to modularize the common code in each test.
# We will try to add more tests if possible to increase the code coverage of the controllers and models.

=== Manual UI Testing ===
UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.
Please pair with our [https://www.youtube.com/watch?v=vmjD78GvuOw Demo Video] to confirm our testing
==== Search for User ====
# Log into Expertiza to view the home page
# Go to Manage > Users
# Type the search string in the search box available on the UI and select the column to search for from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the specified criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Courses ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria for the course (name, institution, etc) in the available search box and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Assignment ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Questionnaire ====
# Log into Expertiza to view the home page
# Go to Manage > Questionnaires
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
# All the entries that match the given criteria will be returned.
# An empty list is returned if the search criteria don't match any valid records in the database.

==== Search for Reviews of a Team ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Reports" Icon corresponding to the assignment you select.
# Select Review Report (default option) from the dropdown and click on View.
# Type the Team Name that you want to search for in the reviews given by different students.

==== Search for Team (Member) Submissions ====
# Log into Expertiza to view the home page
# Go to Manage > Assignments
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View Submissions" Icon corresponding to the assignment you select.
# Type the Team Name and the Team Member Name that you want to search by to filter out the results.

==== Search for Student in a Course (Reviews Scores) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

==== Search for Student in a Course (Grades) ====
# Log into Expertiza to view the home page
# Go to Manage > Courses
# Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
# All the entries that match the given criteria will be returned.
# Select the "View grade summary by student" Icon corresponding to the course you select.
# Type the student name that you want to search for to filter out the results.

== Resulting Snapshots ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo] video for a rough idea of the UI pages.

=== User Search UI ===
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]

<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.

[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]

=== Course Search UI ===
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]

=== Assignment Search UI ===
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.

[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]

=== Questionnaire Search UI ===
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]

<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.

[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]

=== Review Search UI ===
<li>Before Change</li>
[[File:Rev1.png|700px]]

<li>After Change</li>
[[File:Rev2.png|700px]]

=== Team (Member) Search UI ===
<li>Before Change</li>
[[File:Tm1.png|700px]]

<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]

=== Student Review Scores Search UI ===
<li>Before Change</li>
[[File:Rs1.png|700px]]

<li>After Change</li>
[[File:Rs2.png|700px]]

=== Student Grades Search UI ===
<li>Before Change</li>
[[File:Gs1.png|700px]]

<li>After Change</li>
[[File:Gs2.png|700px]]

== Project Mentor ==

Srilekha Gudipati (sngudipa@ncsu.edu)

== Team Members ==

Ananya Mantravadi (amantra@ncsu.edu)

Anvitha Reddy Gutha (agutha@ncsu.edu)

Nainisha Bhallamudi (nbhalla@ncsu.edu)

==References==

#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]