react-science 3.0.0 → 4.0.0

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

@@ -150,32 +150,22 @@ export function InfoPanel(props: InfoPanelProps) {
                       striped
                       css={css({
                         width: '100%',
-                        'td:first-child': {
-                          width: '30%',
-                        },
                       })}
                       compact
                     >
                       <Table.Header>
-                        <ValueRenderers.Header
-                          style={{ width: '50px' }}
-                          value="Parameter"
-                        />
+                        <ValueRenderers.Header value="Parameter" />
                         <ValueRenderers.Header value="Value" />
                       </Table.Header>
                       {data.map(([key, value]) => (
                         <Table.Row
                           key={key}
-                          bordered
                           style={{
                             height: '10px',
                             padding: '0 !imporant',
                           }}
                         >
-                          <ValueRenderers.Text
-                            style={{ width: '50px' }}
-                            value={key}
-                          />
+                          <ValueRenderers.Text value={key} />
                           {valueCell(value)}
                         </Table.Row>
                       ))}

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/root-layout/RootLayout.tsx

@@ -19,6 +19,8 @@ const style: CSSProperties = {
   width: '100%',
   height: '100%',
   fontSize: '14px',
+  display: 'flex',
+  flexDirection: 'column',
 };
 
 export function RootLayout(props: RootLayoutProps) {
@@ -33,18 +35,23 @@ export function RootLayout(props: RootLayoutProps) {
   }, []);
 
   return (
-    <div style={{ ...style, ...props.style }} translate="no">
-      <CustomDivPreflight ref={ref}>
-        <BlueprintProvider
-          {...(rootRef ? { portalContainer: rootRef } : undefined)}
-        >
-          <RootLayoutProvider innerRef={rootRef}>
-            <QueryClientProvider client={queryClient}>
-              <AccordionProvider>{props.children}</AccordionProvider>
-            </QueryClientProvider>
-          </RootLayoutProvider>
-        </BlueprintProvider>
-      </CustomDivPreflight>
-    </div>
+    <CustomDivPreflight
+      ref={ref}
+      style={{
+        ...style,
+        ...props.style,
+      }}
+      translate="no"
+    >
+      <BlueprintProvider
+        {...(rootRef ? { portalContainer: rootRef } : undefined)}
+      >
+        <RootLayoutProvider innerRef={rootRef}>
+          <QueryClientProvider client={queryClient}>
+            <AccordionProvider>{props.children}</AccordionProvider>
+          </QueryClientProvider>
+        </RootLayoutProvider>
+      </BlueprintProvider>
+    </CustomDivPreflight>
   );
 }

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,6 +1,10 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import { Children, isValidElement, ReactElement, ReactNode } from 'react';
+import {
+  Children,
+  HTMLAttributes,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+} from 'react';
 
 import {
   Boolean,
@@ -15,26 +19,20 @@ import {
 import type { TableProps } from './Table';
 import { useTableContext } from './tableContext';
 
-const styles = {
-  hasBorder: css({
-    border: '0.5px solid rgb(0, 0, 0)',
-    padding: '5px',
-    position: 'relative',
-  }),
-  noBorder: css({
-    padding: '5px',
-    position: 'relative',
-  }),
-};
+export type TableRowProps = TableProps & HTMLAttributes<HTMLTableRowElement>;
 
 export const TableRow = ({
   children,
   style = {},
-  hasBorder = false,
-}: TableProps) => {
+  bordered = false,
+  ...other
+}: TableRowProps) => {
   const { cells } = useRowChildren(children);
   return (
-    <tr style={{ border: hasBorder ? '1px solid black' : '', ...style }}>
+    <tr
+      style={{ border: bordered ? '1px solid black' : '', ...style }}
+      {...other}
+    >
       {cells}
     </tr>
   );
@@ -42,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' &&
@@ -57,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>,
         );
@@ -73,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/Toolbar.tsx

@@ -15,6 +15,7 @@ import { css } from '@emotion/react';
 import {
   cloneElement,
   JSX,
+  MouseEvent,
   ReactElement,
   ReactNode,
   useLayoutEffect,
@@ -58,7 +59,11 @@ export interface ToolbarItemProps extends ToolbarBaseProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   icon: IconName | JSX.Element;
   active?: boolean;
-  onClick?: (item: ToolbarItemProps) => void;
+  onClick?: (
+    item: ToolbarItemProps & {
+      event: MouseEvent;
+    },
+  ) => void;
   className?: string;
   isPopover?: boolean;
   tag?: ReactNode;
@@ -211,8 +216,8 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
           )}
         </div>
       }
-      onClick={() => {
-        onClick?.(props);
+      onClick={(event) => {
+        onClick?.({ event, ...props });
       }}
       tooltipProps={
         !tooltip

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';