react-science 3.1.0 → 4.0.0

package/src/app-data/loaders/spcLoader.ts

@@ -1,11 +1,11 @@
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
-import { parse, guessSpectraType } from 'spc-parser';
+import { guessSpectraType, parse } from 'spc-parser';
 
 import { assert } from '../../components/index';
-import type { MeasurementKind, Measurements, MeasurementBase } from '../index';
+import type { MeasurementBase, MeasurementKind, Measurements } from '../index';
 
 import { getMeasurementInfoFromFile } from './utility/getMeasurementInfoFromFile';
-import { ParserLog, createLogEntry } from './utility/parserLog';
 
 /**
  *
@@ -15,7 +15,7 @@ import { ParserLog, createLogEntry } from './utility/parserLog';
  */
 export async function spcLoader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
   const measurements: Partial<Measurements> = {};
   for (const file of fileCollection) {
@@ -38,14 +38,8 @@ export async function spcLoader(
           data: parsed.spectra as unknown as MeasurementBase['data'],
         });
       } catch (error) {
-        if (error instanceof Error && logs) {
-          logs.push(
-            createLogEntry({
-              parser: 'spc-parser',
-              relativePath: file.relativePath,
-              error,
-            }),
-          );
+        if (error instanceof Error && logger) {
+          logger.error(error);
         } else {
           throw error;
         }

package/src/app-data/loaders/utility/measurementLoader.ts

@@ -1,13 +1,12 @@
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 
 import { assert } from '../../../components/index';
 import type { MeasurementBase, Measurements } from '../../index';
 
-import type { ParserLog } from './parserLog';
-
 export type MeasurementsLoader = (
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ) => Promise<Partial<Measurements>>;
 
 export function mergeMeasurements(

package/src/app-data/loaders/wdfLoader.ts

@@ -1,11 +1,11 @@
 import { MeasurementVariable } from 'cheminfo-types';
+import type { FifoLogger } from 'fifo-logger';
 import type { FileCollection } from 'filelist-utils';
 import { parse, Wdf } from 'wdf-parser';
 
-import type { Measurements, MeasurementBase } from '../index';
+import type { MeasurementBase, Measurements } from '../index';
 
 import { getMeasurementInfoFromFile } from './utility/getMeasurementInfoFromFile';
-import { ParserLog, createLogEntry } from './utility/parserLog';
 
 /**
  *
@@ -15,7 +15,7 @@ import { ParserLog, createLogEntry } from './utility/parserLog';
  */
 export async function wdfLoader(
   fileCollection: FileCollection,
-  logs?: ParserLog[],
+  logger?: FifoLogger,
 ): Promise<Partial<Measurements>> {
   const measurements: Partial<Measurements> = {};
   const entries: MeasurementBase[] = [];
@@ -33,15 +33,8 @@ export async function wdfLoader(
         });
       } catch (error) {
         if (error instanceof Error) {
-          if (logs) {
-            logs.push(
-              createLogEntry({
-                parser: 'wdf',
-                error,
-                message: 'error reading wdf file',
-                relativePath: file.relativePath,
-              }),
-            );
+          if (logger) {
+            logger.error(error);
           } else {
             throw error;
           }

package/src/components/index.ts

@@ -1,13 +1,14 @@
 export * from './accordion/index';
 export * from './button/index';
 export * from './color-picker/index';
+export * from './dialog/index';
 export * from './drop-zone/index';
 export * from './forms/index';
 export * from './fullscreen/index';
 export * from './header/index';
 export * from './hooks/index';
 export * from './info-panel/index';
-export * from './dialog/index';
+export * from './logger/index';
 export * from './root-layout/index';
 export * from './split-pane/index';
 export * from './table/index';

package/src/components/info-panel/InfoPanel.tsx

@@ -160,7 +160,6 @@ export function InfoPanel(props: InfoPanelProps) {
                       {data.map(([key, value]) => (
                         <Table.Row
                           key={key}
-                          bordered
                           style={{
                             height: '10px',
                             padding: '0 !imporant',

package/src/components/logger/FifoLoggerDialog.tsx

@@ -0,0 +1,129 @@
+/** @jsxImportSource @emotion/react */
+
+import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import type { LogEntry } from 'fifo-logger';
+import { CSSProperties } from 'react';
+
+import { Button, Table, useFifoLogger, ValueRenderers } from '../index';
+
+const ActionsFooter = styled.div`
+  display: flex;
+  gap: 3px;
+`;
+
+interface RowIndexCellProps {
+  pillColor: CSSProperties['backgroundColor'];
+}
+
+const RowIndexCell = styled.div<RowIndexCellProps>`
+  ::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 5px;
+    border-radius: 7px;
+    filter: brightness(60%);
+    background-color: ${({ pillColor }) => pillColor};
+  }
+`;
+
+export interface FifoLoggerDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  logs: LogEntry[];
+  unseen: number;
+}
+
+export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
+  const logger = useFifoLogger();
+  return (
+    <Dialog
+      shouldReturnFocusOnClose={false}
+      isOpen={props.isOpen}
+      onClose={props.onClose}
+      title="Logs"
+      icon="info-sign"
+      css={css`
+        min-width: 800px;
+        min-height: 500px;
+        max-height: 80vh;
+        max-width: 1000px;
+      `}
+    >
+      <DialogBody>
+        <Table
+          compact
+          bordered
+          css={css`
+            width: 100%;
+          `}
+        >
+          <Table.Header>
+            <ValueRenderers.Header value="#" />
+            <ValueRenderers.Header value="Time" />
+            <ValueRenderers.Header value="Level" />
+            <ValueRenderers.Header value="Message" />
+          </Table.Header>
+          {props.logs.map((logEntry, idx) => (
+            <Table.Row
+              key={logEntry.id}
+              style={{
+                backgroundColor: rowBackgroundColor[logEntry.levelLabel],
+              }}
+            >
+              <ValueRenderers.Component>
+                <RowIndexCell
+                  pillColor={
+                    idx >= props.unseen
+                      ? 'transparent'
+                      : rowBackgroundColor[logEntry.levelLabel]
+                  }
+                >
+                  {String(idx + 1)}
+                </RowIndexCell>
+              </ValueRenderers.Component>
+              <ValueRenderers.Text
+                value={new Date(logEntry.time).toLocaleTimeString()}
+              />
+              <ValueRenderers.Text value={logEntry.levelLabel} />
+              <ValueRenderers.Text value={logEntry.message} />
+            </Table.Row>
+          ))}
+        </Table>
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <ActionsFooter>
+            <Button
+              outlined
+              intent="danger"
+              icon="trash"
+              text="Clear logs"
+              onClick={() => logger.clear()}
+            />
+            <Button
+              outlined
+              intent="none"
+              text="Close"
+              onClick={props.onClose}
+            />
+          </ActionsFooter>
+        }
+      />
+    </Dialog>
+  );
+}
+
+// "fatal" | "error" | "warn" | "info" | "debug" | "trace" | "silent"
+const rowBackgroundColor: Record<string, CSSProperties['backgroundColor']> = {
+  fatal: 'pink',
+  error: 'pink',
+  warn: 'lightyellow',
+  info: 'lightgreen',
+  debug: 'lightgrey',
+  trace: 'lightgrey',
+  silent: 'lightgrey',
+};

package/src/components/logger/FifoLoggerProvider.tsx

@@ -0,0 +1,15 @@
+import type { FifoLogger } from 'fifo-logger';
+import { ReactNode } from 'react';
+
+import { fifoLoggerContext } from './loggerContext';
+
+export function FifoLoggerProvider(props: {
+  logger: FifoLogger;
+  children: ReactNode;
+}) {
+  return (
+    <fifoLoggerContext.Provider value={props.logger}>
+      {props.children}
+    </fifoLoggerContext.Provider>
+  );
+}

package/src/components/logger/FifoLoggerToolbarItem.tsx

@@ -0,0 +1,59 @@
+import { Intent } from '@blueprintjs/core';
+import type { LogEntry } from 'fifo-logger';
+import { useState } from 'react';
+
+import { useOnOff } from '../hooks';
+import { Toolbar } from '../toolbar';
+
+import { FifoLoggerDialog } from './FifoLoggerDialog';
+import { useFifoLogs } from './useFifoLogger';
+
+export function FifoLoggerToolbarItem() {
+  const [seen, setSeen] = useState(0);
+  const [isOpen, open, close] = useOnOff(false);
+  const logs = useFifoLogs();
+
+  const unseen = logs.length - seen;
+  return (
+    <>
+      <Toolbar.Item
+        icon="bug"
+        tooltip="Logs"
+        onClick={open}
+        tag={unseen > 0 ? unseen : undefined}
+        tagProps={{
+          intent: getIntent(logs),
+          style: {
+            pointerEvents: 'none',
+          },
+        }}
+      />
+      <FifoLoggerDialog
+        isOpen={isOpen}
+        unseen={unseen}
+        onClose={() => {
+          setSeen(logs.length);
+          close();
+        }}
+        logs={logs}
+      />
+    </>
+  );
+}
+
+function getIntent(logs: LogEntry[]): Intent {
+  const maxLevel = Math.max(
+    ...logs.map((log) => log.level),
+  ) as LogEntry['level'];
+  return intentMap[maxLevel || 0];
+}
+
+const intentMap: Record<LogEntry['level'], Intent> = {
+  60: 'danger',
+  50: 'danger',
+  40: 'warning',
+  30: 'success',
+  20: 'none',
+  10: 'none',
+  0: 'none',
+};

package/src/components/logger/index.ts

@@ -0,0 +1,4 @@
+export * from './FifoLoggerProvider';
+export * from './FifoLoggerDialog';
+export * from './FifoLoggerToolbarItem';
+export * from './useFifoLogger';

package/src/components/logger/loggerContext.ts

@@ -0,0 +1,4 @@
+import type { FifoLogger } from 'fifo-logger';
+import { createContext } from 'react';
+
+export const fifoLoggerContext = createContext<FifoLogger | null>(null);

package/src/components/logger/useFifoLogger.ts

@@ -0,0 +1,22 @@
+import { useContext, useEffect, useState } from 'react';
+
+import { fifoLoggerContext } from './loggerContext';
+
+export function useFifoLogger() {
+  const fifoLogger = useContext(fifoLoggerContext);
+  if (!fifoLogger) {
+    throw new Error('useFifoLogger must be used within a FifoLoggerProvider');
+  }
+  return fifoLogger;
+}
+
+export function useFifoLogs() {
+  const logger = useFifoLogger();
+  const [logs, setLogs] = useState(logger.getLogs());
+  useEffect(() => {
+    logger.addEventListener('change', () => {
+      setLogs(logger.getLogs());
+    });
+  }, [logger]);
+  return logs;
+}

package/src/components/table/Table.tsx

@@ -34,13 +34,11 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   compact?: boolean;
   interactive?: boolean;
   striped?: boolean;
-  hasBorder?: boolean;
   color?: string;
 }
 
 export function Table(props: TableProps) {
   const {
-    hasBorder = false,
     bordered = false,
     compact = false,
     interactive = false,
@@ -51,10 +49,7 @@ export function Table(props: TableProps) {
   } = props;
   const { Header, Rows } = splitChildren(children);
 
-  const tableContextValue = useMemo(
-    () => ({ hasBorder, color }),
-    [hasBorder, color],
-  );
+  const tableContextValue = useMemo(() => ({ color }), [color]);
   return (
     <TableContext.Provider value={tableContextValue}>
       <HTMLTable

package/src/components/table/TableHeader.tsx

@@ -1,10 +1,10 @@
 import type { TableProps } from './Table';
 import { TableRow } from './TableRow';
 
-export const TableHeader = ({ children, hasBorder, style }: TableProps) => {
+export const TableHeader = ({ children, bordered, style }: TableProps) => {
   return (
     <thead>
-      <TableRow hasBorder={hasBorder} style={style}>
+      <TableRow bordered={bordered} style={style}>
         {children}
       </TableRow>
     </thead>

package/src/components/table/TableRow.tsx

@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import {
   Children,
   HTMLAttributes,
@@ -23,28 +21,16 @@ import { useTableContext } from './tableContext';
 
 export type TableRowProps = TableProps & HTMLAttributes<HTMLTableRowElement>;
 
-const styles = {
-  hasBorder: css({
-    border: '0.5px solid rgb(0, 0, 0)',
-    padding: '5px',
-    position: 'relative',
-  }),
-  noBorder: css({
-    padding: '5px',
-    position: 'relative',
-  }),
-};
-
 export const TableRow = ({
   children,
   style = {},
-  hasBorder = false,
+  bordered = false,
   ...other
 }: TableRowProps) => {
   const { cells } = useRowChildren(children);
   return (
     <tr
-      style={{ border: hasBorder ? '1px solid black' : '', ...style }}
+      style={{ border: bordered ? '1px solid black' : '', ...style }}
       {...other}
     >
       {cells}
@@ -54,7 +40,7 @@ export const TableRow = ({
 
 function useRowChildren(children: ReactNode) {
   const cells: ReactElement[] = [];
-  const { hasBorder, color } = useTableContext();
+  const { color } = useTableContext();
   for (const child of Children.toArray(children)) {
     if (
       typeof child === 'object' &&
@@ -69,11 +55,7 @@ function useRowChildren(children: ReactNode) {
     ) {
       if (child.type === Header) {
         cells.push(
-          <th
-            key={child.key}
-            style={{ color }}
-            css={hasBorder ? styles.hasBorder : styles.noBorder}
-          >
+          <th key={child.key} style={{ color }}>
             {child}
           </th>,
         );
@@ -85,7 +67,6 @@ function useRowChildren(children: ReactNode) {
               color,
               position: 'relative',
             }}
-            css={hasBorder ? styles.hasBorder : styles.noBorder}
           >
             {child}
           </td>,

package/src/components/table/tableContext.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-export const TableContext = createContext({ hasBorder: true, color: '' });
+export const TableContext = createContext({ color: '' });
 export function useTableContext() {
   const context = useContext(TableContext);
   return context;

package/src/components/toolbar/TooltipHelpContent.tsx

@@ -0,0 +1,173 @@
+import styled from '@emotion/styled';
+import { CSSProperties } from 'react';
+
+const shortcutBoxSize = 1.5;
+
+const FlexContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+`;
+
+interface TitleProps {
+  size: CSSProperties['fontSize'];
+}
+
+const Title = styled.span<TitleProps>`
+  font-size: ${({ size }) => size};
+  flex: 1;
+  padding: 5px 0;
+  text-align: left;
+`;
+const Description = styled.p`
+  padding-top: 1rem;
+  font-size: 0.7rem;
+  text-align: left;
+`;
+
+const ShortcutItem = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.2rem;
+  border: 1px solid;
+  border-radius: 4px;
+  height: ${shortcutBoxSize}rem;
+  min-width: ${shortcutBoxSize}rem;
+  margin-left: 5px;
+  font-size: 0.75rem;
+  font-weight: bold;
+`;
+
+const SubTitleItem = styled.div`
+  position: relative;
+  padding-left: 15px;
+  box-sizing: border-box;
+
+  &::before {
+    position: absolute;
+    top: ${shortcutBoxSize / 2}rem;
+    left: 0;
+    width: 10px;
+    height: 1px;
+    margin: auto;
+    content: '';
+    border-bottom: 1px solid;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 1px;
+    height: 100%;
+    content: '';
+    border-left: 1px solid;
+  }
+
+  &:last-child::after {
+    height: ${shortcutBoxSize / 2}rem;
+  }
+
+  &:first-child {
+    margin: 0;
+  }
+`;
+
+export interface TooltipItem {
+  title: string;
+  shortcuts?: string[];
+  subTitles?: Array<Pick<TooltipItem, 'title' | 'shortcuts'>>;
+  description?: string;
+  link?: string;
+  style?: CSSProperties;
+}
+
+export function TooltipHelpContent(props: TooltipItem) {
+  const {
+    title,
+    shortcuts = [],
+    subTitles = [],
+    description = '',
+    link,
+    style = {},
+  } = props;
+
+  return (
+    <div
+      style={{
+        color: 'white',
+        width: '250px',
+        padding: '0.5rem',
+        ...style,
+      }}
+    >
+      <FlexContainer>
+        <Title size="0.9rem">{title}</Title>
+        <ShortCuts shortcuts={shortcuts} />
+      </FlexContainer>
+      <SubTitles items={subTitles} />
+
+      {(description || link) && (
+        <Description>
+          {description}
+          {link && (
+            <a
+              style={description ? { paddingLeft: '5px' } : {}}
+              target="_blank"
+              href={link}
+              rel="noreferrer"
+            >
+              Learn more
+            </a>
+          )}
+        </Description>
+      )}
+    </div>
+  );
+}
+
+function ShortCuts({ shortcuts }: { shortcuts: string[] }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        textWrap: 'nowrap',
+      }}
+    >
+      {shortcuts.map((key) => {
+        return (
+          <ShortcutItem key={key}>
+            <span>{key}</span>
+          </ShortcutItem>
+        );
+      })}
+    </div>
+  );
+}
+
+function SubTitles({ items }: { items: TooltipItem[] }) {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul
+      style={{
+        paddingLeft: '5px',
+        listStyle: 'none',
+      }}
+    >
+      {items.map(({ shortcuts = [], title }) => (
+        <SubTitleItem key={title}>
+          <FlexContainer>
+            <Title size="0.7rem">{title}</Title>
+            <ShortCuts shortcuts={shortcuts} />
+          </FlexContainer>
+        </SubTitleItem>
+      ))}
+    </ul>
+  );
+}

package/src/components/toolbar/index.ts

@@ -1,2 +1,3 @@
 export * from './Toolbar';
 export * from './PanelPreferencesToolbar';
+export * from './TooltipHelpContent';