Prevent file viewer unnecessary re-renders

[david-yz-liu]

Motivation and Context

I noticed when working on the Jupyter notebook viewer updates that many re-renders were being triggered on the various file viewer components, for all types of files. In general we should avoid unnecessary re-renders when possible.

Your Changes

Description:

• Turned BinaryViewer, ImageViewer, NotebookViewer, PdfViewer, and TextViewer into React PureComponents to prevent re-rendering when props and state don't change.
• Added visibleAnnotations state to SubmissionFilePanel to prevent it from being recomputed at each render. This also allows the same object to be passed to the "viewer" component, taking advantage of the change into PureComponents.
• In ResultComponent, remove unnecessary calls to refreshAnnotations. The requests already trigger Javascript code (in create.js.erb) that will update the annotations state.

Type of change (select all that apply):

• Refactoring (internal change to codebase, without changing functionality)

Testing

Tested manually in the UI. Logged component render calls to ensure that the unnecessary re-renders no longer occurred.

Questions and Comments (if applicable)

Checklist

• I have performed a self-review of my own code.
• I have verified that the pre-commit.ci checks have passed.
• I have verified that the CI tests have passed.
• I have reviewed the test coverage changes reported on Coveralls.

[coveralls]

Pull Request Test Coverage Report for Build 5478565082

• 0 of 1 (0.0%) changed or added relevant line in 1 file are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage remained the same at 91.607%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
app/assets/javascripts/Components/Result/image_viewer.jsx	0	1	0.0%

Files with Coverage Reduction	New Missed Lines	%
app/assets/javascripts/Components/Result/image_viewer.jsx	1	0%

Totals
Change from base Build 5478301019:	0.0%
Covered Lines:	37060
Relevant Lines:	39911

---

💛 - Coveralls