react-science 3.1.0 → 4.1.0

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { Icon, InputGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { Disclosure } from '@headlessui/react';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { CSSProperties, useCallback, useMemo, useState } from 'react';
 
 import { ValueRenderers } from '../index';
@@ -19,19 +19,49 @@ interface InfoPanelProps {
   inputStyle?: CSSProperties;
 }
 const style = {
+  content: css({
+    overflow: 'hidden',
+    "&[data-state='open']": {
+      animation: 'slideDown 300ms ease-out',
+    },
+    '&[data-state="closed"]': {
+      animation: 'slideUp 300ms ease-out',
+    },
+    '@keyframes slideDown': {
+      from: {
+        height: 0,
+      },
+      to: { height: 'var(--radix-collapsible-content-height)' },
+    },
+    '@keyframes slideUp': {
+      from: {
+        height: 'var(--radix-collapsible-content-height)',
+      },
+      to: { height: 0 },
+    },
+  }),
   container: css({
-    padding: '5px',
+    padding: '5px 0 0 0',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  }),
+  chevron: css({
+    transition: 'all 0.3s ease-in-out',
   }),
-  chevron: (open: boolean) =>
-    css({
-      rotate: open ? '90deg' : '0deg',
-      transition: 'all 0.3s ease-in-out',
-    }),
   button: css({
+    zIndex: 10,
+    position: 'sticky',
+    height: 30,
+    top: 0,
+    "&[data-state='open'] > span": {
+      rotate: '90deg',
+    },
+    cursor: 'pointer',
     borderBottom: '1px solid #f5f5f5',
+    backgroundColor: 'white',
     display: 'flex',
     alignItems: 'center',
-    gap: 5,
     padding: '5px 2px',
     width: '100%',
     ':hover': {
@@ -95,13 +125,19 @@ export function InfoPanel(props: InfoPanelProps) {
   }, [data, viewData]);
   return (
     <div css={style.container}>
-      <div style={titleStyle}>{title}</div>
+      <div
+        style={{
+          padding: '0 5px',
+          ...titleStyle,
+        }}
+      >
+        {title}
+      </div>
       <div
         tabIndex={0}
         css={css({
-          zIndex: 10,
+          padding: '0 5px',
           marginTop: '5px',
-          position: 'sticky',
           backgroundColor: 'white',
           top: '5px',
           display: 'flex',
@@ -114,7 +150,7 @@ export function InfoPanel(props: InfoPanelProps) {
           css={css({
             flexGrow: 1,
           })}
-          placeholder="search for a parameter ..."
+          placeholder="Search for a parameter"
           value={search}
           onChange={({ target }) => {
             if (target.value !== undefined) {
@@ -130,51 +166,54 @@ export function InfoPanel(props: InfoPanelProps) {
       </div>
       <div
         style={{
+          position: 'relative',
           marginTop: '5px',
           display: 'flex',
           flexDirection: 'column',
-          gap: '5px',
+          overflowY: 'auto',
+          flex: 1,
         }}
       >
         {filteredData.map(({ description, data }) => {
           return (
-            <Disclosure defaultOpen key={description}>
-              {({ open }) => (
-                <>
-                  <Disclosure.Button css={style.button}>
-                    <Icon icon="chevron-right" css={style.chevron(open)} />
-                    {description}
-                  </Disclosure.Button>
-                  <Disclosure.Panel>
-                    <Table
-                      striped
-                      css={css({
-                        width: '100%',
-                      })}
-                      compact
+            <Collapsible.Root
+              key={description}
+              className="CollapsibleRoot"
+              defaultOpen
+            >
+              <Collapsible.Trigger asChild css={style.button}>
+                <div>
+                  <Icon icon="chevron-right" css={style.chevron} />
+                  {description}
+                </div>
+              </Collapsible.Trigger>
+              <Collapsible.Content css={style.content}>
+                <Table
+                  striped
+                  css={css({
+                    width: '100%',
+                  })}
+                  compact
+                >
+                  <Table.Header>
+                    <ValueRenderers.Header value="Parameter" />
+                    <ValueRenderers.Header value="Value" />
+                  </Table.Header>
+                  {data.map(([key, value]) => (
+                    <Table.Row
+                      key={key}
+                      style={{
+                        height: '10px',
+                        padding: '0 !imporant',
+                      }}
                     >
-                      <Table.Header>
-                        <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 value={key} />
-                          {valueCell(value)}
-                        </Table.Row>
-                      ))}
-                    </Table>
-                  </Disclosure.Panel>
-                </>
-              )}
-            </Disclosure>
+                      <ValueRenderers.Text value={key} />
+                      {valueCell(value)}
+                    </Table.Row>
+                  ))}
+                </Table>
+              </Collapsible.Content>
+            </Collapsible.Root>
           );
         })}
       </div>

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,22 @@
 import type { TableProps } from './Table';
 import { TableRow } from './TableRow';
 
-export const TableHeader = ({ children, hasBorder, style }: TableProps) => {
+const headerStyle: React.CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  zIndex: 10,
+  backgroundColor: 'white',
+};
+
+export const TableHeader = ({
+  children,
+  bordered,
+  style,
+  sticky,
+}: TableProps & { sticky?: boolean }) => {
   return (
-    <thead>
-      <TableRow hasBorder={hasBorder} style={style}>
+    <thead style={sticky ? headerStyle : undefined}>
+      <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;