From d0e4b995c9d5347477bec13b5fc1c568c75fed77 Mon Sep 17 00:00:00 2001 From: David Liu Date: Sat, 8 Jul 2023 14:58:37 -0400 Subject: [PATCH] Prevent file viewer unnecessary re-renders (#6662) --- .../Components/Result/binary_viewer.jsx | 2 +- .../Components/Result/image_viewer.jsx | 6 ++-- .../Components/Result/notebook_viewer.jsx | 2 +- .../Components/Result/pdf_viewer.jsx | 2 +- .../javascripts/Components/Result/result.jsx | 6 +--- .../Result/submission_file_panel.jsx | 31 ++++++++++++++----- .../Components/Result/text_viewer.jsx | 2 +- 7 files changed, 32 insertions(+), 19 deletions(-) diff --git a/app/assets/javascripts/Components/Result/binary_viewer.jsx b/app/assets/javascripts/Components/Result/binary_viewer.jsx index d202ee61c6..09d09a724c 100644 --- a/app/assets/javascripts/Components/Result/binary_viewer.jsx +++ b/app/assets/javascripts/Components/Result/binary_viewer.jsx @@ -1,6 +1,6 @@ import React from "react"; -export class BinaryViewer extends React.Component { +export class BinaryViewer extends React.PureComponent { render() { return (
diff --git a/app/assets/javascripts/Components/Result/image_viewer.jsx b/app/assets/javascripts/Components/Result/image_viewer.jsx index 9f5398b483..bfb4c460c8 100644 --- a/app/assets/javascripts/Components/Result/image_viewer.jsx +++ b/app/assets/javascripts/Components/Result/image_viewer.jsx @@ -1,9 +1,9 @@ import React from "react"; import {render} from "react-dom"; -export class ImageViewer extends React.Component { - constructor() { - super(); +export class ImageViewer extends React.PureComponent { + constructor(props) { + super(props); this.state = { rotation: window.start_image_rotation || 0, zoom: window.start_image_zoom || 1, diff --git a/app/assets/javascripts/Components/Result/notebook_viewer.jsx b/app/assets/javascripts/Components/Result/notebook_viewer.jsx index f802bae103..75b1d6f2cf 100644 --- a/app/assets/javascripts/Components/Result/notebook_viewer.jsx +++ b/app/assets/javascripts/Components/Result/notebook_viewer.jsx @@ -1,7 +1,7 @@ import React from "react"; import {markupTextInRange} from "../Helpers/range_selector"; -export class NotebookViewer extends React.Component { +export class NotebookViewer extends React.PureComponent { constructor(props) { super(props); this.iframe = React.createRef(); diff --git a/app/assets/javascripts/Components/Result/pdf_viewer.jsx b/app/assets/javascripts/Components/Result/pdf_viewer.jsx index 49071d4ee3..15813ca909 100644 --- a/app/assets/javascripts/Components/Result/pdf_viewer.jsx +++ b/app/assets/javascripts/Components/Result/pdf_viewer.jsx @@ -1,6 +1,6 @@ import React from "react"; -export class PDFViewer extends React.Component { +export class PDFViewer extends React.PureComponent { constructor(props) { super(props); this.pdfContainer = React.createRef(); diff --git a/app/assets/javascripts/Components/Result/result.jsx b/app/assets/javascripts/Components/Result/result.jsx index 6ad5f9e2c7..a7db566673 100644 --- a/app/assets/javascripts/Components/Result/result.jsx +++ b/app/assets/javascripts/Components/Result/result.jsx @@ -221,7 +221,6 @@ class Result extends React.Component { this.setState({ annotationModal: INITIAL_ANNOTATION_MODAL_STATE, }); - this.refreshAnnotations(); }); // Resetting back to original }; @@ -305,10 +304,7 @@ class Result extends React.Component { data = this.extend_with_selection_data(data); if (data) { - $.post( - Routes.add_existing_annotation_course_annotations_path(this.props.course_id), - data - ).then(this.refreshAnnotations); + $.post(Routes.add_existing_annotation_course_annotations_path(this.props.course_id), data); } }; diff --git a/app/assets/javascripts/Components/Result/submission_file_panel.jsx b/app/assets/javascripts/Components/Result/submission_file_panel.jsx index 35b75b1709..c264c5acf9 100644 --- a/app/assets/javascripts/Components/Result/submission_file_panel.jsx +++ b/app/assets/javascripts/Components/Result/submission_file_panel.jsx @@ -14,6 +14,7 @@ export class SubmissionFilePanel extends React.Component { focusLine: null, annotationFocus: undefined, selectedFileType: null, + visibleAnnotations: [], }; this.submissionFileViewer = React.createRef(); } @@ -32,6 +33,15 @@ export class SubmissionFilePanel extends React.Component { (prevProps.loading && !this.props.loading) ) { this.refreshSelectedFile(); + } else if ( + prevProps.annotations !== this.props.annotations && + this.state.selectedFile !== null + ) { + const submission_file_id = this.state.selectedFile[1]; + const visibleAnnotations = this.props.annotations.filter( + a => a.submission_file_id === submission_file_id + ); + this.setState({visibleAnnotations}); } } @@ -64,7 +74,17 @@ export class SubmissionFilePanel extends React.Component { } selectedFile = this.getFirstFile(this.props.fileData); } - this.setState({selectedFile}); + + let visibleAnnotations; + if (selectedFile === null) { + visibleAnnotations = []; + } else { + const submission_file_id = selectedFile[1]; + visibleAnnotations = this.props.annotations.filter( + a => a.submission_file_id === submission_file_id + ); + } + this.setState({selectedFile, visibleAnnotations}); // TODO: Incorporate DownloadSubmissionModal as true child of this component. if (this.props.canDownload) { @@ -120,6 +140,7 @@ export class SubmissionFilePanel extends React.Component { selectedFile: [file, id], focusLine: focusLine, annotationFocus: annotationFocus, + visibleAnnotations: this.props.annotations.filter(a => a.submission_file_id === id), }); localStorage.setItem("file", file); }; @@ -130,17 +151,13 @@ export class SubmissionFilePanel extends React.Component { }; render() { - let submission_file_id, visibleAnnotations, submission_file_mime_type; + let submission_file_id, submission_file_mime_type; if (this.state.selectedFile === null) { submission_file_id = null; submission_file_mime_type = null; - visibleAnnotations = []; } else { submission_file_id = this.state.selectedFile[1]; submission_file_mime_type = getType(this.state.selectedFile[0]); - visibleAnnotations = this.props.annotations.filter( - a => a.submission_file_id === submission_file_id - ); } return ( @@ -172,7 +189,7 @@ export class SubmissionFilePanel extends React.Component { mime_type={submission_file_mime_type} result_id={this.props.result_id} selectedFile={submission_file_id} - annotations={visibleAnnotations} + annotations={this.state.visibleAnnotations} focusLine={this.state.focusLine} annotationFocus={this.state.annotationFocus} released_to_students={this.props.released_to_students} diff --git a/app/assets/javascripts/Components/Result/text_viewer.jsx b/app/assets/javascripts/Components/Result/text_viewer.jsx index 9aeaffeeab..05863a634e 100644 --- a/app/assets/javascripts/Components/Result/text_viewer.jsx +++ b/app/assets/javascripts/Components/Result/text_viewer.jsx @@ -1,7 +1,7 @@ import React from "react"; import {render} from "react-dom"; -export class TextViewer extends React.Component { +export class TextViewer extends React.PureComponent { constructor(props) { super(props); this.state = {