react-science 0.33.0 → 0.35.0

package/src/app/panels/measurements/MeasurementsTable.tsx

@@ -1,19 +1,31 @@
+import { Menu, MenuItem, Popover } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import { FaTrash } from 'react-icons/fa';
+import { useMemo } from 'react';
 
 import {
   MeasurementBase,
   MeasurementKind,
+  getMeasurement,
   useAppDispatch,
   useAppState,
 } from '../../../app-data';
-import { ConfirmDialog, useOnOff } from '../../../components';
+import {
+  Button,
+  ConfirmDialog,
+  InfoPanel,
+  InfoPanelData,
+  PanelPreferencesToolbar,
+  useOnOff,
+} from '../../../components';
+import { MeasurementConfigPanel } from '../index';
 
-import { MeasurementCheckbox } from './MeasurementCheckbox';
-import MeasurementColorPreview from './MeasurementColorPreview';
-import MeasurementVisibilityToggle, {
+import {
+  MeasurementColorPreview,
+  MeasurementCheckbox,
+  MeasurementVisibilityToggle,
   MeasurementSelectedVisibilityChange,
-} from './MeasurementVisibilityToggle';
+  useMeasurementPanel,
+} from '.';
 
 export interface MeasurementsTableProps {
   kind: MeasurementKind;
@@ -49,13 +61,6 @@ const MeasurementsTableBody = styled.tbody`
   background-color: white;
 `;
 
-const MeasurementsLinkButton = styled.span`
-  cursor: pointer;
-  :hover {
-    text-decoration: underline;
-  }
-`;
-
 const MeasurementsHeaderColumn = styled.div`
   display: flex;
   flex-direction: row;
@@ -65,7 +70,6 @@ const MeasurementsHeaderColumn = styled.div`
   padding-right: 5px;
   border-bottom: 1px solid black;
 `;
-
 const MeasurementsHeaderGroup = styled.div`
   display: flex;
   gap: 6px;
@@ -88,14 +92,14 @@ const MeasurementsTableRowData = styled.tr`
 
 const MeasurementsIconsContainer = styled.td`
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   justify-items: center;
   height: 50px;
   flex-direction: row;
-  gap: 0.5rem;
   cursor: default;
-  width: 70px;
+  gap: 2px;
+  width: 100px;
 `;
 
 export function MeasurementsTable(props: MeasurementsTableProps) {
@@ -110,16 +114,6 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
 
   const hasSelectedMeasurements = (selectedMeasurements[kind]?.length ?? 0) > 0;
 
-  function onSelectLink(select: boolean) {
-    dispatch({
-      type: 'SELECT_ALL_MEASUREMENTS',
-      payload: {
-        kind,
-        select,
-      },
-    });
-  }
-
   function onRemove() {
     dispatch({ type: 'REMOVE_SELECTED_MEASUREMENTS', payload: { kind } });
     closeRemoveDialog();
@@ -129,21 +123,13 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
     <MeasurementsTableContainer>
       <MeasurementsHeaderColumn>
         <MeasurementsHeaderGroup>
-          <MeasurementsLinkButton onClick={() => onSelectLink(true)}>
-            Select all
-          </MeasurementsLinkButton>
-          <MeasurementsLinkButton onClick={() => onSelectLink(false)}>
-            Unselect all
-          </MeasurementsLinkButton>
-        </MeasurementsHeaderGroup>
-        <MeasurementsHeaderGroup>
-          <MeasurementSelectedVisibilityChange kind={kind} openedEyes />
-          <MeasurementSelectedVisibilityChange kind={kind} openedEyes={false} />
-          <FaTrash
-            style={
-              hasSelectedMeasurements ? { cursor: 'pointer' } : { opacity: 0.6 }
-            }
+          <Button
+            minimal
+            icon="trash"
+            intent="danger"
+            style={{ opacity: hasSelectedMeasurements ? 1 : 0.6 }}
             onClick={hasSelectedMeasurements ? openRemoveDialog : undefined}
+            tooltipProps={{ content: 'Remove selected', position: 'bottom' }}
           />
         </MeasurementsHeaderGroup>
         <ConfirmDialog
@@ -160,7 +146,7 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
       </MeasurementsHeaderColumn>
 
       <MeasurementsTableRoot>
-        <MeasurementsTableHeader />
+        <MeasurementsTableHeader kind={kind} />
         <MeasurementsTableBody>
           {measurements[kind].entries.map((element) => (
             <MeasurementsTableRow key={element.id} item={element} kind={kind} />
@@ -171,15 +157,8 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
   );
 }
 
-const TableHeaderEmpty = styled.th`
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  width: 70px;
-`;
-
 const TableHeaderFilename = styled.th`
-  width: 60%;
+  width: 50%;
 `;
 
 const TableHeaderTechnique = styled.th`
@@ -187,15 +166,63 @@ const TableHeaderTechnique = styled.th`
 `;
 
 const TableDataHeaderName = styled.td`
-  width: 60%;
+  width: 50%;
   overflow: hidden;
 `;
 
-function MeasurementsTableHeader() {
+function MeasurementsTableHeader({
+  kind,
+}: {
+  kind: MeasurementsTableProps['kind'];
+}) {
+  const {
+    data: { measurements: measurementsData },
+    view: { selectedMeasurements, measurements },
+  } = useAppState();
+  const dispatch = useAppDispatch();
+  function onSelectLink(select: boolean) {
+    dispatch({
+      type: 'SELECT_ALL_MEASUREMENTS',
+      payload: {
+        kind,
+        select,
+      },
+    });
+  }
+  const allSelected = useMemo(
+    () =>
+      selectedMeasurements[kind]?.length ===
+      measurementsData[kind]?.entries.length,
+    [kind, measurementsData, selectedMeasurements],
+  );
+  const selectedVisible = useMemo(() => {
+    const ids = selectedMeasurements[kind];
+    if (ids) {
+      return ids.every((id) => measurements[id]?.visible);
+    }
+    return false;
+  }, [selectedMeasurements, kind, measurements]);
   return (
     <thead>
       <MeasurementsTableHeaderStyled>
-        <TableHeaderEmpty />
+        <th>
+          <MeasurementsIconsContainer
+            style={{
+              paddingLeft: '26px',
+            }}
+          >
+            <MeasurementCheckbox
+              checked={allSelected}
+              onSelectCheckbox={() => {
+                onSelectLink(!allSelected);
+              }}
+            />
+            <MeasurementSelectedVisibilityChange
+              kind={kind}
+              isVisible={selectedVisible}
+            />
+          </MeasurementsIconsContainer>
+        </th>
         <TableHeaderFilename>Filename</TableHeaderFilename>
         <TableHeaderTechnique>Technique</TableHeaderTechnique>
       </MeasurementsTableHeaderStyled>
@@ -205,8 +232,10 @@ function MeasurementsTableHeader() {
 
 function MeasurementsTableRow(props: MeasurementsTableRowProps) {
   const { item, kind } = props;
+  const { openPanel } = useMeasurementPanel();
 
   const {
+    data,
     view: { selectedMeasurements, measurements },
   } = useAppState();
 
@@ -227,10 +256,81 @@ function MeasurementsTableRow(props: MeasurementsTableRowProps) {
       payload: { id: item.id, kind, acc: isAlreadyChecked ? 'remove' : 'add' },
     });
   }
+  const { info = {}, meta = {} } =
+    getMeasurement(data.measurements, kind, item.id) || {};
+
+  const infoPanelData: InfoPanelData[] = [
+    {
+      description: 'Information',
+      data: info,
+    },
+    {
+      description: 'Metadata',
+      data: meta,
+    },
+  ];
+  const content = (
+    <Menu
+      style={{
+        minWidth: 0,
+      }}
+    >
+      <MenuItem
+        text="Information"
+        icon="info-sign"
+        onClick={() =>
+          openPanel?.({
+            title: item.info.file?.name ?? item.info.title,
+            renderPanel: ({ closePanel }) => (
+              <div>
+                <PanelPreferencesToolbar
+                  title={item.info.file?.name ?? item.info.title}
+                  onClose={closePanel}
+                />
+                <InfoPanel data={infoPanelData} title="" />
+              </div>
+            ),
+          })
+        }
+      />
+      <MenuItem
+        text="Configuration"
+        icon="settings"
+        onClick={() =>
+          openPanel?.({
+            title: item.info.file?.name ?? item.info.title,
+            renderPanel: ({ closePanel }) => (
+              <div>
+                <PanelPreferencesToolbar
+                  title={item.info.file?.name ?? item.info.title}
+                  onClose={closePanel}
+                />
+                <MeasurementConfigPanel />
+              </div>
+            ),
+          })
+        }
+      />
+    </Menu>
+  );
 
   return (
     <MeasurementsTableRowData>
       <MeasurementsIconsContainer>
+        <Popover content={content} position="bottom-left">
+          <Button
+            minimal
+            icon="more"
+            style={{
+              transform: 'rotate(90deg)',
+            }}
+            small
+          />
+        </Popover>
+        <MeasurementCheckbox
+          checked={selectedMeasurements[kind]?.includes(item.id) || false}
+          onSelectCheckbox={onSelectCheckbox}
+        />
         <MeasurementVisibilityToggle
           id={item.id}
           isVisible={measurements[item.id].visible}
@@ -240,10 +340,6 @@ function MeasurementsTableRow(props: MeasurementsTableRowProps) {
           kind={kind}
           color={measurements[item.id].color}
         />
-        <MeasurementCheckbox
-          checked={selectedMeasurements[kind]?.includes(item.id) || false}
-          onSelectCheckbox={onSelectCheckbox}
-        />
       </MeasurementsIconsContainer>
       <TableDataHeaderName onClick={onSelectRow} title={item.id}>
         {item.info.file?.name ?? item.info.title}

package/src/app/panels/measurements/index.ts

@@ -1,2 +1,7 @@
 export * from './MeasurementsPanelAccordion';
 export * from './MeasurementsPanel';
+export * from './MeasurementsTable';
+export * from './measurementPanelContext';
+export * from './MeasurementVisibilityToggle';
+export * from './MeasurementCheckbox';
+export * from './MeasurementColorPreview';

package/src/app/panels/measurements/measurementPanelContext.tsx

@@ -0,0 +1,32 @@
+import { Panel } from '@blueprintjs/core';
+import { createContext, useContext } from 'react';
+
+export interface MeasurementState {
+  openPanel?: (panel: Panel<object>) => void;
+}
+
+const measurementPanelContext = createContext<MeasurementState>({});
+
+export function useMeasurementPanel() {
+  const context = useContext(measurementPanelContext);
+  if (!context) {
+    throw new Error(
+      'useMeasurementPanel must be used within a MeasurementPanel',
+    );
+  }
+  return context;
+}
+
+export function MeasurementPanelProvider({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: MeasurementState;
+}) {
+  return (
+    <measurementPanelContext.Provider value={value}>
+      {children}
+    </measurementPanelContext.Provider>
+  );
+}

package/src/components/accordion/Accordion.tsx

@@ -46,7 +46,6 @@ const styles = {
     padding: '5px 12px',
     display: 'flex',
     alignItems: 'center',
-    fontSize: '1em',
     borderColor: 'rgb(213, 213, 213) currentcolor currentcolor',
     borderStyle: 'solid none none',
     color: 'rgb(45, 45, 45)',

package/src/components/button/index.ts

@@ -1,2 +1 @@
 export * from './Button';
-export * from './ButtonGroup';

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -1,18 +1,17 @@
+import { Popover, PopoverProps } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import { useRef } from 'react';
 
-import { useModifiedPopper } from '../../hooks/useModifiedPopper';
-import { useOnClickOutside } from '../../hooks/useOnClickOutside';
-import { useOnOff } from '../../hooks/useOnOff';
-import { Portal } from '../../root-layout/Portal';
 import FixedColorPreview from '../preview/FixedColorPreview';
 import { ColorPicker, ColorPickerProps } from '../react-color/ColorPicker';
 import * as colorHelper from '../react-color/helpers/color';
 
-type ColorPickerDropdownProps = Pick<
-  ColorPickerProps,
-  'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
->;
+interface ColorPickerDropdownProps
+  extends Pick<
+    ColorPickerProps,
+    'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
+  > {
+  popoverProps?: Omit<PopoverProps, 'content'>;
+}
 
 const ColorPickerRoot = styled.button`
   position: relative;
@@ -30,41 +29,22 @@ const ColorPickerPreview = styled.div`
 `;
 
 export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
-  const { color, ...otherProps } = props;
-
-  const ref = useRef<HTMLDivElement | null>(null);
-  const [isOpened, , close, toggle] = useOnOff(false);
+  const { color, popoverProps, ...otherProps } = props;
 
   const { hex } = colorHelper.toState(color || 'white');
 
-  const { setReferenceElement, setPopperElement, popperProps } =
-    useModifiedPopper<HTMLButtonElement>({
-      placement: 'bottom-start',
-      offset: 6,
-    });
-
-  useOnClickOutside(ref, close);
-
   return (
-    <>
-      <ColorPickerRoot type="button" ref={setReferenceElement} onClick={toggle}>
+    <Popover
+      targetProps={{ style: { width: '100%' } }}
+      content={<ColorPicker color={color} {...otherProps} />}
+      minimal
+      {...popoverProps}
+    >
+      <ColorPickerRoot type="button">
         <ColorPickerPreview>
           <FixedColorPreview color={hex} />
         </ColorPickerPreview>
       </ColorPickerRoot>
-      {isOpened && (
-        <Portal>
-          <div
-            ref={(div) => {
-              setPopperElement(div);
-              ref.current = div;
-            }}
-            {...popperProps}
-          >
-            <ColorPicker color={color} {...otherProps} />
-          </div>
-        </Portal>
-      )}
-    </>
+    </Popover>
   );
 }

package/src/components/color-picker/react-color/sketch/SketchFields.tsx

@@ -41,14 +41,12 @@ const styles: Record<
     padding: '4px 10% 3px',
     border: 'none',
     boxShadow: 'inset 0 0 0 1px #ccc',
-    fontSize: '1em',
     textAlign: 'center',
     borderRadius: '3px',
   },
   label: {
     display: 'block',
     textAlign: 'center',
-    fontSize: '1em',
     color: '#222',
     paddingTop: '3px',
     paddingBottom: '4px',

package/src/components/forms/radio-group/ClassicRadioItem.tsx

@@ -54,7 +54,6 @@ const classicStyles = {
       cursor: 'pointer',
       lineHeight: 1,
       paddingLeft: 5,
-      fontSize: '12px',
       ':hover': {
         '& ~ button': {
           borderColor: disabled ? 'grey' : enabledColor,

package/src/components/root-layout/RootLayout.tsx

@@ -18,7 +18,7 @@ interface RootLayoutProps {
 const style: CSSProperties = {
   width: '100%',
   height: '100%',
-  fontSize: '12px',
+  fontSize: '14px',
 };
 
 export function RootLayout(props: RootLayoutProps) {

package/src/components/toolbar/PanelPreferencesToolbar.tsx

@@ -4,16 +4,27 @@ import { css } from '@emotion/react';
 import { Toolbar } from './Toolbar';
 
 interface PanelPreferencesToolbarProps {
+  title?: React.ReactNode;
   onClose?: () => void;
   onSave?: () => void;
 }
 
 const styles = {
+  container: css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    borderBottom: '1px solid rgb(240, 240, 240)',
+  }),
+  title: css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 12,
+    fontWeight: 500,
+  }),
   toolbar: css({
     display: 'flex',
     flexDirection: 'row-reverse',
-    fontSize: 16,
-    padding: 3,
     '& > button': {
       padding: 0,
       paddingLeft: 9,
@@ -23,25 +34,32 @@ const styles = {
 };
 
 export function PanelPreferencesToolbar(props: PanelPreferencesToolbarProps) {
-  const { onClose, onSave } = props;
+  const { title = '', onClose, onSave } = props;
   return (
-    <div css={styles.toolbar}>
-      <Toolbar>
-        <Toolbar.Item
-          title="close"
-          onClick={onClose}
-          intent="danger"
-          icon="cross"
-          noTooltip
-        />
-        <Toolbar.Item
-          title="save"
-          onClick={onSave}
-          intent="success"
-          icon="tick"
-          noTooltip
-        />
-      </Toolbar>
+    <div css={styles.container}>
+      <div css={styles.title}>{title}</div>
+      <div css={styles.toolbar}>
+        <Toolbar>
+          {onClose && (
+            <Toolbar.Item
+              title="close"
+              onClick={onClose}
+              intent="danger"
+              icon="cross"
+              noTooltip
+            />
+          )}
+          {onSave && (
+            <Toolbar.Item
+              title="save"
+              onClick={onSave}
+              intent="success"
+              icon="tick"
+              noTooltip
+            />
+          )}
+        </Toolbar>
+      </div>
     </div>
   );
 }