Refactor scoped layout values into LayoutContext (#5356)

GitOrigin-RevId: b0b07ddd078bfc5acd944cac14bc00dc83d09d21

services/web/frontend/js/shared/context/compile-context.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import useScopeValue from './util/scope-value-hook'
 
@@ -6,25 +6,72 @@ export const CompileContext = createContext()
 
 CompileContext.Provider.propTypes = {
   value: PropTypes.shape({
-    pdfUrl: PropTypes.string,
-    pdfDownloadUrl: PropTypes.string,
+    clsiServerId: PropTypes.string,
     logEntries: PropTypes.object,
+    logEntryAnnotations: PropTypes.object,
+    pdfDownloadUrl: PropTypes.string,
+    pdfUrl: PropTypes.string,
+    setClsiServerId: PropTypes.func.isRequired,
+    setLogEntries: PropTypes.func.isRequired,
+    setLogEntryAnnotations: PropTypes.func.isRequired,
+    setPdfDownloadUrl: PropTypes.func.isRequired,
+    setPdfUrl: PropTypes.func.isRequired,
+    setUncompiled: PropTypes.func.isRequired,
     uncompiled: PropTypes.bool,
   }),
 }
 
 export function CompileProvider({ children }) {
-  const [pdfUrl] = useScopeValue('pdf.url')
-  const [pdfDownloadUrl] = useScopeValue('pdf.downloadUrl')
-  const [logEntries] = useScopeValue('pdf.logEntries')
-  const [uncompiled] = useScopeValue('pdf.uncompiled')
+  // the log entries parsed from the compile output log
+  const [logEntries, setLogEntries] = useScopeValue('pdf.logEntries')
 
-  const value = {
-    pdfUrl,
-    pdfDownloadUrl,
-    logEntries,
-    uncompiled,
-  }
+  // annotations for display in the editor, built from the log entries
+  const [logEntryAnnotations, setLogEntryAnnotations] = useScopeValue(
+    'pdf.logEntryAnnotations'
+  )
+
+  // the URL for downloading the PDF
+  const [pdfDownloadUrl, setPdfDownloadUrl] = useScopeValue('pdf.downloadUrl')
+
+  // the URL for loading the PDF in the preview pane
+  const [pdfUrl, setPdfUrl] = useScopeValue('pdf.url')
+
+  // the project is considered to be "uncompiled" if a doc has changed since the last compile started
+  const [uncompiled, setUncompiled] = useScopeValue('pdf.uncompiled')
+
+  // the id of the CLSI server which ran the compile
+  const [clsiServerId, setClsiServerId] = useScopeValue('pdf.clsiServerId')
+
+  const value = useMemo(
+    () => ({
+      clsiServerId,
+      logEntries,
+      logEntryAnnotations,
+      pdfDownloadUrl,
+      pdfUrl,
+      setClsiServerId,
+      setLogEntries,
+      setLogEntryAnnotations,
+      setPdfDownloadUrl,
+      setPdfUrl,
+      setUncompiled,
+      uncompiled,
+    }),
+    [
+      clsiServerId,
+      logEntries,
+      logEntryAnnotations,
+      pdfDownloadUrl,
+      pdfUrl,
+      setClsiServerId,
+      setLogEntries,
+      setLogEntryAnnotations,
+      setPdfDownloadUrl,
+      setPdfUrl,
+      setUncompiled,
+      uncompiled,
+    ]
+  )
 
   return (
     <CompileContext.Provider value={value}>{children}</CompileContext.Provider>

services/web/frontend/js/shared/context/layout-context.js

@@ -22,6 +22,7 @@ LayoutContext.Provider.propTypes = {
 export function LayoutProvider({ children }) {
   const { $scope } = useIdeContext()
 
+  // what to show in the "flat" view (editor or pdf)
   const [view, _setView] = useScopeValue('ui.view')
 
   const setView = useCallback(
@@ -38,32 +39,46 @@ export function LayoutProvider({ children }) {
     [$scope, _setView]
   )
 
+  // whether the chat pane is open
   const [chatIsOpen, setChatIsOpen] = useScopeValue('ui.chatOpen')
+
+  // whether the review pane is open
   const [reviewPanelOpen, setReviewPanelOpen] = useScopeValue(
     'ui.reviewPanelOpen'
   )
+
+  // whether the menu pane is open
   const [leftMenuShown, setLeftMenuShown] = useScopeValue('ui.leftMenuShown')
-  const [pdfLayout] = useScopeValue('ui.pdfLayout', $scope)
+
+  // whether to display the editor and preview side-by-side or full-width ("flat")
+  const [pdfLayout, setPdfLayout] = useScopeValue('ui.pdfLayout')
+
+  // whether the PDF preview pane is hidden
+  const [pdfHidden] = useScopeValue('ui.pdfHidden')
 
   const value = useMemo(
     () => ({
-      view,
-      setView,
       chatIsOpen,
-      setChatIsOpen,
-      reviewPanelOpen,
-      setReviewPanelOpen,
       leftMenuShown,
-      setLeftMenuShown,
+      pdfHidden,
       pdfLayout,
+      reviewPanelOpen,
+      setChatIsOpen,
+      setLeftMenuShown,
+      setPdfLayout,
+      setReviewPanelOpen,
+      setView,
+      view,
     }),
     [
       chatIsOpen,
       leftMenuShown,
+      pdfHidden,
       pdfLayout,
       reviewPanelOpen,
       setChatIsOpen,
       setLeftMenuShown,
+      setPdfLayout,
       setReviewPanelOpen,
       setView,
       view,