feat: integrate with fifo-logger (#2231)

* feat: logger context * feat: display logs history * feat: trace DropZone errors with fifo-logger * chore: fix prettier * feat: improve logs history badge * refactor: pass 'logger' object down to nmr-load-save
cheminfo · Mar 15, 2023 · 0282462 · 0282462
1 parent 991748a
commit 0282462
Show file tree

Hide file tree

Showing 8 changed files with 308 additions and 86 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "clipboard-polyfill": "^4.0.0",
     "d3": "^7.8.2",
     "eventemitter3": "^5.0.0",
+    "fifo-logger": "^0.5.0",
     "file-saver": "^2.0.5",
     "filelist-utils": "^1.7.1",
     "formik": "^2.2.9",
@@ -81,7 +82,7 @@
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.0.0",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.7.28",
+    "nmr-load-save": "^0.8.0",
     "nmr-processing": "^9.3.6",
     "nmredata": "^0.9.2",
     "numeral": "^2.0.6",

diff --git a/src/component/NMRium.tsx b/src/component/NMRium.tsx
@@ -36,6 +36,7 @@ import { AssignmentProvider } from './assignment';
 import { ChartDataProvider } from './context/ChartContext';
 import { DispatchProvider } from './context/DispatchContext';
 import { GlobalProvider } from './context/GlobalContext';
+import { LoggerProvider } from './context/LoggerContext';
 import { PreferencesProvider } from './context/PreferencesContext';
 import { AlertProvider } from './elements/popup/Alert';
 import { ModalProvider } from './elements/popup/Modal';
@@ -334,92 +335,94 @@ function InnerNMRium({
     >
       <PreferencesProvider value={preferencesState}>
         <div ref={mainDivRef} style={{ height: '100%', position: 'relative' }}>
-          <AlertProvider wrapperRef={elementsWrapperRef.current}>
-            <DispatchProvider value={dispatchMiddleWare}>
-              <ChartDataProvider value={state}>
-                <ModalProvider wrapperRef={elementsWrapperRef.current}>
-                  <HighlightProvider>
-                    <AssignmentProvider spectraData={spectraData}>
-                      <SpinnerProvider value={getSpinner}>
-                        <div
-                          className="nmrium-container"
-                          ref={rootRef}
-                          css={containerStyles}
-                          onContextMenu={preventContextMenuHandler}
-                          style={{ height: '100%', width: '100%' }}
-                        >
-                          <DropZone>
-                            <div
-                              style={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                backgroundColor: 'white',
-                                width: '100%',
-                              }}
-                            >
-                              <Header
-                                isFullscreen={isFullscreen}
-                                onMaximize={toggle}
-                              />
-
+          <LoggerProvider>
+            <AlertProvider wrapperRef={elementsWrapperRef.current}>
+              <DispatchProvider value={dispatchMiddleWare}>
+                <ChartDataProvider value={state}>
+                  <ModalProvider wrapperRef={elementsWrapperRef.current}>
+                    <HighlightProvider>
+                      <AssignmentProvider spectraData={spectraData}>
+                        <SpinnerProvider value={getSpinner}>
+                          <div
+                            className="nmrium-container"
+                            ref={rootRef}
+                            css={containerStyles}
+                            onContextMenu={preventContextMenuHandler}
+                            style={{ height: '100%', width: '100%' }}
+                          >
+                            <DropZone>
                               <div
                                 style={{
                                   display: 'flex',
-                                  flexDirection: 'row',
-                                  height: '100%',
+                                  flexDirection: 'column',
+                                  backgroundColor: 'white',
+                                  width: '100%',
                                 }}
                               >
-                                <ToolBar />
-                                <SplitPaneWrapper>
-                                  <div css={viewerContainerStyle}>
-                                    <KeysListenerTracker />
-                                    <div
-                                      id="nmrium-viewer"
-                                      data-test-id="viewer"
-                                      ref={viewerRef}
-                                      style={{
-                                        width: '100%',
-                                        height: '100%',
-                                        position: 'relative',
-                                      }}
-                                    >
-                                      <FloatMoleculeStructures />
-                                      {displayerMode ===
-                                      DISPLAYER_MODE.DM_1D ? (
-                                        <Viewer1D emptyText={emptyText} />
-                                      ) : (
-                                        <Viewer2D emptyText={emptyText} />
-                                      )}
-                                    </div>
-                                  </div>
-                                  <Panels />
-                                </SplitPaneWrapper>
+                                <Header
+                                  isFullscreen={isFullscreen}
+                                  onMaximize={toggle}
+                                />
 
                                 <div
-                                  ref={elementsWrapperRef}
-                                  key={String(isFullscreen)}
-                                  id="main-wrapper"
                                   style={{
-                                    position: 'absolute',
-                                    pointerEvents: 'none',
-                                    zIndex: 2,
-                                    left: 0,
-                                    right: 0,
-                                    top: 0,
-                                    bottom: 0,
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    height: '100%',
                                   }}
-                                />
+                                >
+                                  <ToolBar />
+                                  <SplitPaneWrapper>
+                                    <div css={viewerContainerStyle}>
+                                      <KeysListenerTracker />
+                                      <div
+                                        id="nmrium-viewer"
+                                        data-test-id="viewer"
+                                        ref={viewerRef}
+                                        style={{
+                                          width: '100%',
+                                          height: '100%',
+                                          position: 'relative',
+                                        }}
+                                      >
+                                        <FloatMoleculeStructures />
+                                        {displayerMode ===
+                                        DISPLAYER_MODE.DM_1D ? (
+                                          <Viewer1D emptyText={emptyText} />
+                                        ) : (
+                                          <Viewer2D emptyText={emptyText} />
+                                        )}
+                                      </div>
+                                    </div>
+                                    <Panels />
+                                  </SplitPaneWrapper>
+
+                                  <div
+                                    ref={elementsWrapperRef}
+                                    key={String(isFullscreen)}
+                                    id="main-wrapper"
+                                    style={{
+                                      position: 'absolute',
+                                      pointerEvents: 'none',
+                                      zIndex: 2,
+                                      left: 0,
+                                      right: 0,
+                                      top: 0,
+                                      bottom: 0,
+                                    }}
+                                  />
+                                </div>
                               </div>
-                            </div>
-                          </DropZone>
-                        </div>
-                      </SpinnerProvider>
-                    </AssignmentProvider>
-                  </HighlightProvider>
-                </ModalProvider>
-              </ChartDataProvider>
-            </DispatchProvider>
-          </AlertProvider>
+                            </DropZone>
+                          </div>
+                        </SpinnerProvider>
+                      </AssignmentProvider>
+                    </HighlightProvider>
+                  </ModalProvider>
+                </ChartDataProvider>
+              </DispatchProvider>
+            </AlertProvider>
+          </LoggerProvider>
         </div>
       </PreferencesProvider>
     </GlobalProvider>

diff --git a/src/component/context/LoggerContext.tsx b/src/component/context/LoggerContext.tsx
@@ -0,0 +1,48 @@
+import { FifoLogger, LogEntry } from 'fifo-logger';
+import {
+  createContext,
+  useContext,
+  ReactNode,
+  useRef,
+  useMemo,
+  useState,
+} from 'react';
+
+export const LoggerContext = createContext<{
+  logger: FifoLogger;
+  logsHistory: LogEntry[];
+} | null>(null);
+
+export function useLogger() {
+  const context = useContext(LoggerContext);
+  if (!context) {
+    throw new Error('Logger context was not found');
+  }
+
+  return context;
+}
+
+interface LoggerProviderProps {
+  children: ReactNode;
+}
+
+export function LoggerProvider({ children }: LoggerProviderProps) {
+  const [logsHistory, setLogsHistory] = useState<LogEntry[]>([]);
+  const loggerRef = useRef<FifoLogger>(
+    new FifoLogger({
+      onChange: (log, logs) => {
+        setLogsHistory(logs.slice());
+      },
+    }),
+  );
+
+  const loggerState = useMemo(() => {
+    return { logger: loggerRef.current, logsHistory };
+  }, [logsHistory]);
+
+  return (
+    <LoggerContext.Provider value={loggerState}>
+      {children}
+    </LoggerContext.Provider>
+  );
+}
diff --git a/src/component/elements/Button.tsx b/src/component/elements/Button.tsx
@@ -274,10 +274,7 @@ function Button(props: ButtonProps) {
         ]}
         {...restProps}
       >
-        <span style={{ flex: 1, pointerEvents: 'none' }}>
-          {' '}
-          {props.children}
-        </span>
+        <span style={{ flex: 1, pointerEvents: 'none' }}>{props.children}</span>
       </button>
       {toolTip && (
         <div className="content" css={toolTipStyle(tooltipOrientation)}>

diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx
@@ -32,6 +32,7 @@ import ApodizationOptionsPanel from './ApodizationOptionsPanel';
 import AutoPeakPickingOptionPanel from './AutoPeakPickingOptionPanel';
 import BaseLineCorrectionPanel from './BaseLineCorrectionPanel';
 import { HeaderContainer } from './HeaderContainer';
+import { LogsHistory } from './LogsHistory';
 import ManualPhaseCorrectionPanel from './ManualPhaseCorrectionPanel';
 import RangesPickingOptionPanel from './RangesPickingOptionPanel';
 import ZeroFillingOptionsPanel from './ZeroFillingOptionsPanel';
@@ -183,6 +184,7 @@ function HeaderInner(props: HeaderInnerProps) {
             />
           )}
           <SaveButton />
+          <LogsHistory />
 
           <div>
             <Toolbar orientation="horizontal">