[Feature:TAGrading] Frontend for submission clustering#12966
[Feature:TAGrading] Frontend for submission clustering#12966GarvitKhandelwal31 wants to merge 61 commits into
Conversation
…andelwal31/Submitty into grading-cluster-backend
…mySplitAlgoTester
…andelwal31/Submitty into grading-cluster-backend
automateprojectmangement
Bot
moved this from Seeking Reviewer
to Work in Progress
in Submitty Development
GarvitKhandelwal31
changed the title
automateprojectmangement
Bot
moved this from Work in Progress
to Seeking Reviewer
in Submitty Development
| cy.intercept('POST', '**').as('createClustering'); | ||
| cy.get('select').select('dummy_split'); | ||
| cy.get('select').trigger('change'); | ||
| cy.wait('@createClustering'); |
There was a problem hiding this comment.
Is there a cleaner way to do this?
| function showClusteringWarningMessage(callback) { | ||
| clusteringWarningCallback = callback; | ||
| const message = $('#clustering-warning-popup'); | ||
| message.css('display', 'block'); |
There was a problem hiding this comment.
You can use jQuery's .show() method for this.
| sessionStorage.setItem(`clusteringWarningAccepted_${dataElement.dataset.gradeable}`, 'true'); | ||
| } | ||
| const message = $('#clustering-warning-popup'); | ||
| message.css('display', 'none'); |
There was a problem hiding this comment.
Similar to the above, you can use .hide() here instead. Apply throughout.
| method: 'POST', | ||
| body: formData, | ||
| }); | ||
| document.body.setAttribute('data-clustering-status', 'done'); |
There was a problem hiding this comment.
Is there a way to go about doing this without interacting with the DOM outside the component? @jndlansh may have suggestions based on the new emit infrastructure he has written.
There was a problem hiding this comment.
Yes, ('data-clustering-status', 'done') should be emitted and handled in twig (Vue mount)
Just like :
-
emit('clustering-status', 'done'); - //replace the doc.body.attr(...)
-
'events': {
'clustering-status': '(status) => { document.body.setAttribute("data-clustering-status", status); }'
} - // add in Vue mount definition
| v-if="isClusteringMode && Object.keys(algorithms).length > 0 && canCreateClustering" | ||
| v-model="selectedAlgorithm" | ||
| class="form-control" | ||
| style="width: auto; margin: 0;" |
There was a problem hiding this comment.
Please keep all styles in a <style> block within this component so they can be linted properly.
github-project-automation
Bot
moved this from Seeking Reviewer
to Work in Progress
in Submitty Development
| method: 'POST', | ||
| body: formData, | ||
| }); | ||
| document.body.setAttribute('data-clustering-status', 'done'); |
There was a problem hiding this comment.
Yes, ('data-clustering-status', 'done') should be emitted and handled in twig (Vue mount)
Just like :
-
emit('clustering-status', 'done'); - //replace the doc.body.attr(...)
-
'events': {
'clustering-status': '(status) => { document.body.setAttribute("data-clustering-status", status); }'
} - // add in Vue mount definition
|
|
||
| const selectedAlgorithm = ref(props.currentAlgorithm || ''); | ||
|
|
||
| function toggleClusteringMode() { |
There was a problem hiding this comment.
Here also just emit the 'toggle-clustering-mode' with payload
function toggleClusteringMode() {
emit('toggle-clustering-mode', {
isClusteringMode: props.isClusteringMode,
gradeableId: props.gradeableId,
});
}
In Details.twig events dictionary, just copy paste this entire functions body or simply use an arbritary JS function there instead
There was a problem hiding this comment.
I also believe we can add a data-testid on select
3 participants
Why is this Change Important & Necessary?
Note- This PR is built on top of #12886.
This PR implements the frontend interface for the new Grading Clustering Mode.
What is the New Behavior?
Currently this PR introduces a new toggle button to activate the clustering mode, a dropdown button (only in clustering mode) to select the algorithms available. Currently after that it just clusters the student submissions.
What steps should a reviewer take to reproduce or test the bug or new feature?
Go to any gradeable -
Click agree, you move to the clustering mode, verify that now the toggle button changes to "exit clustering mode".
If clustering was not created before you would an orange banner that guides you to make the clusters
Automated Testing & Documentation
Added a component and E2E test.
Other information
No migrations added.