feat: add a general preference for a popup logging level

cheminfo · Feb 5, 2024 · 7b532c1 · 7b532c1
1 parent 3b18b4e
commit 7b532c1
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 24 deletions.
diff --git a/src/component/context/LoggerContext.tsx b/src/component/context/LoggerContext.tsx
@@ -34,27 +34,40 @@ interface LoggerProviderProps {
   children: ReactNode;
 }
 
+export const LOGGER_LEVELS = {
+  fatal: 60,
+  error: 50,
+  warn: 40,
+  info: 30,
+  debug: 20,
+  trace: 10,
+  silent: 0,
+} as const;
+
 export function LoggerProvider({ children }: LoggerProviderProps) {
   const {
     current: {
-      general: { loggingLevel },
+      general: { loggingLevel, popupLoggingLevel },
     },
   } = usePreferences();
   const [lastReadLogId, setLastLogId] = useState(0);
   const [logsHistory, setLogsHistory] = useState<LogEntry[]>([]);
   const [isLogHistoryOpened, openLogHistory] = useState(false);
+  const popupLoggingLevelRef = useRef<LogEntry['levelLabel']>();
 
   const loggerRef = useRef<FifoLogger>(
     new FifoLogger({
       onChange: (log, logs) => {
-        if (log && ['error', 'fatal'].includes(log.levelLabel)) {
-          //open the log history automatically if we have error or fatal
+        if (
+          log &&
+          popupLoggingLevelRef.current &&
+          log.level === LOGGER_LEVELS[popupLoggingLevelRef.current]
+        ) {
           openLogHistory(true);
-
-          if (log?.error) {
-            // eslint-disable-next-line no-console
-            console.error(log.error);
-          }
+        }
+        if (log?.error) {
+          // eslint-disable-next-line no-console
+          console.error(log.error);
         }
         setLogsHistory(logs.slice());
       },
@@ -83,6 +96,10 @@ export function LoggerProvider({ children }: LoggerProviderProps) {
     };
   }, [lastReadLogId, logsHistory, markAsRead]);
 
+  useEffect(() => {
+    popupLoggingLevelRef.current = popupLoggingLevel;
+  }, [logsHistory, popupLoggingLevel]);
+
   return (
     <LoggerContext.Provider value={loggerState}>
       {isLogHistoryOpened && (

diff --git a/src/component/modal/setting/settings-tabs/GeneralTabContent.tsx b/src/component/modal/setting/settings-tabs/GeneralTabContent.tsx
@@ -1,9 +1,16 @@
+import { LOGGER_LEVELS } from '../../../context/LoggerContext';
 import { GroupPane } from '../../../elements/GroupPane';
-import Label from '../../../elements/Label';
+import Label, { LabelStyle } from '../../../elements/Label';
 import FormikCheckBox from '../../../elements/formik/FormikCheckBox';
 import FormikInput from '../../../elements/formik/FormikInput';
 import FormikSelect from '../../../elements/formik/FormikSelect';
 
+const labelStyle: LabelStyle = {
+  label: { flex: 6 },
+  wrapper: { flex: 6 },
+  container: { paddingBottom: '5px' },
+};
+
 const SHAPE_RENDERING = [
   {
     label: 'Auto',
@@ -23,15 +30,7 @@ const SHAPE_RENDERING = [
   },
 ];
 
-const LOGS_LEVELS = [
-  'fatal',
-  'error',
-  'warn',
-  'info',
-  'debug',
-  'trace',
-  'silent',
-].map((level) => ({
+const LOGS_LEVELS = Object.keys(LOGGER_LEVELS).map((level) => ({
   label: level.replace(/^\w/, (c) => c.toUpperCase()),
   value: level,
 }));
@@ -40,30 +39,42 @@ function GeneralTabContent() {
   return (
     <>
       <GroupPane text="General">
-        <Label title="Opacity of dimmed spectra [ 0 - 1 ]">
+        <Label title="Opacity of dimmed spectra [ 0 - 1 ]" style={labelStyle}>
           <FormikInput
             name="general.dimmedSpectraOpacity"
             checkValue={(value) => Number(value) >= 0 && Number(value) <= 1}
             type="number"
             step={0.1}
             min={0}
             max={1}
+            style={{ inputWrapper: { width: 60 } }}
           />
         </Label>
-        <Label title="Invert actions" htmlFor="general.invert">
-          <FormikCheckBox name="general.invert" />
+        <Label
+          title="Invert actions"
+          htmlFor="general.invert"
+          style={labelStyle}
+        >
+          <FormikCheckBox
+            name="general.invert"
+            style={{ container: { justifyContent: 'flex-start' } }}
+          />
         </Label>
       </GroupPane>
       <GroupPane text="Experimental features">
         <Label
           title="Enable experimental features"
           htmlFor="display.general.experimentalFeatures.display"
+          style={labelStyle}
         >
-          <FormikCheckBox name="display.general.experimentalFeatures.display" />
+          <FormikCheckBox
+            name="display.general.experimentalFeatures.display"
+            style={{ container: { justifyContent: 'flex-start' } }}
+          />
         </Label>
       </GroupPane>
       <GroupPane text="Rendering">
-        <Label title="Spectra rendering ">
+        <Label title="Spectra rendering " style={labelStyle}>
           <FormikSelect
             items={SHAPE_RENDERING}
             name="general.spectraRendering"
@@ -72,13 +83,20 @@ function GeneralTabContent() {
         </Label>
       </GroupPane>
       <GroupPane text="Logging settings">
-        <Label title="Level ">
+        <Label title="Level " style={labelStyle}>
           <FormikSelect
             items={LOGS_LEVELS}
             name="general.loggingLevel"
             style={{ width: '100px' }}
           />
         </Label>
+        <Label title="Popup logging level " style={labelStyle}>
+          <FormikSelect
+            items={LOGS_LEVELS}
+            name="general.popupLoggingLevel"
+            style={{ width: '100px' }}
+          />
+        </Label>
       </GroupPane>
     </>
   );