react-science 0.34.0 → 0.36.0

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

@@ -1,15 +1,14 @@
-import { FaEye, FaEyeSlash } from 'react-icons/fa';
-
 import { useAppDispatch } from '../../../app-data/index';
+import { Button } from '../../../components/index';
 
-import { MeasurementsTableProps } from './MeasurementsTable';
+import { MeasurementsTableProps } from '.';
 
 interface MeasurementVisibilityToggleProps {
   id: string;
   isVisible: boolean;
 }
 
-export default function MeasurementVisibilityToggle(
+export function MeasurementVisibilityToggle(
   props: MeasurementVisibilityToggleProps,
 ) {
   const { id, isVisible } = props;
@@ -23,20 +22,22 @@ export default function MeasurementVisibilityToggle(
   }
 
   return isVisible ? (
-    <FaEye onClick={() => setVisibility(false)} style={{ cursor: 'pointer' }} />
+    <Button icon="eye-on" onClick={() => setVisibility(false)} minimal />
   ) : (
-    <FaEyeSlash
+    <Button
+      icon="eye-off"
       onClick={() => setVisibility(true)}
-      style={{ cursor: 'pointer', opacity: 0.6 }}
+      style={{ opacity: 0.6 }}
+      minimal
     />
   );
 }
 
 export function MeasurementSelectedVisibilityChange(props: {
-  openedEyes: boolean;
+  isVisible: boolean;
   kind: MeasurementsTableProps['kind'];
 }) {
-  const { kind, openedEyes } = props;
+  const { kind, isVisible } = props;
   const dispatch = useAppDispatch();
 
   function setVisibility(isVisible: boolean) {
@@ -46,12 +47,14 @@ export function MeasurementSelectedVisibilityChange(props: {
     });
   }
 
-  return openedEyes ? (
-    <FaEye onClick={() => setVisibility(false)} style={{ cursor: 'pointer' }} />
+  return isVisible ? (
+    <Button icon="eye-on" onClick={() => setVisibility(true)} minimal />
   ) : (
-    <FaEyeSlash
-      onClick={() => setVisibility(true)}
-      style={{ cursor: 'pointer', opacity: 0.6 }}
+    <Button
+      icon="eye-off"
+      onClick={() => setVisibility(false)}
+      style={{ opacity: 0.6 }}
+      minimal
     />
   );
 }

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

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
-import { Tab, Tabs } from '@blueprintjs/core';
+import { PanelProps, Tab, Tabs } from '@blueprintjs/core';
 import { css } from '@emotion/react';
+import { useMemo } from 'react';
 
 import {
   kindLabels,
@@ -10,9 +11,9 @@ import {
   useAppState,
 } from '../../../app-data';
 
-import { MeasurementsTable } from './MeasurementsTable';
+import { MeasurementsTable, MeasurementPanelProvider } from '.';
 
-export function MeasurementsPanel() {
+export function MeasurementsPanel({ openPanel }: PanelProps<object>) {
   const appState = useAppState();
   const { data, view } = appState;
 
@@ -36,34 +37,42 @@ export function MeasurementsPanel() {
       payload: id,
     });
   }
+  const measurementState = useMemo(
+    () => ({
+      openPanel,
+    }),
+    [openPanel],
+  );
 
   if (items.length > 0) {
     return (
-      <Tabs
-        selectedTabId={view.selectedKind}
-        onChange={handleTabSelection}
-        css={css`
-          div[role='tablist'] {
-            overflow-x: auto;
-            padding: 2px 0 0 1rem;
-            border-bottom: 1px solid gray;
-          }
-          div[role='tabpanel'] {
-            margin-top: 4px;
-          }
-        `}
-      >
-        {items.map((item) => (
-          <Tab
-            id={item.id}
-            key={item.id}
-            title={item.title}
-            panel={item.content}
-            tagContent={data.measurements[item.id].entries.length}
-            tagProps={{ round: true }}
-          />
-        ))}
-      </Tabs>
+      <MeasurementPanelProvider value={measurementState}>
+        <Tabs
+          selectedTabId={view.selectedKind}
+          onChange={handleTabSelection}
+          css={css`
+            div[role='tablist'] {
+              overflow-x: auto;
+              padding: 2px 0 0 1rem;
+              border-bottom: 1px solid gray;
+            }
+            div[role='tabpanel'] {
+              margin-top: 4px;
+            }
+          `}
+        >
+          {items.map((item) => (
+            <Tab
+              id={item.id}
+              key={item.id}
+              title={item.title}
+              panel={item.content}
+              tagContent={data.measurements[item.id].entries.length}
+              tagProps={{ round: true }}
+            />
+          ))}
+        </Tabs>
+      </MeasurementPanelProvider>
     );
   }
 

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

@@ -1,3 +1,7 @@
+/** @jsxImportSource @emotion/react */
+import { PanelStack2 } from '@blueprintjs/core';
+import { css } from '@emotion/react';
+
 import {
   getExistingMeasurementKinds,
   kindLabels,
@@ -5,7 +9,7 @@ import {
 } from '../../../app-data/index';
 import { Accordion } from '../../../components/index';
 
-import { MeasurementsPanel } from './MeasurementsPanel';
+import { MeasurementsPanel } from '.';
 
 export function MeasurementsPanelAccordion() {
   const appData = useAppData();
@@ -16,7 +20,16 @@ export function MeasurementsPanelAccordion() {
       : 'Measurements';
   return (
     <Accordion.Item title={title} defaultOpened>
-      <MeasurementsPanel />
+      <PanelStack2
+        css={css`
+          height: 100%;
+        `}
+        initialPanel={{
+          renderPanel: MeasurementsPanel,
+        }}
+        showPanelHeader={false}
+        renderActivePanelOnly={false}
+      />
     </Accordion.Item>
   );
 }

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/Button.tsx

@@ -1,11 +1,16 @@
+/** @jsxImportSource @emotion/react */
 import {
   AnchorButton as BlueprintAnchorButton,
   AnchorButtonProps as BlueprintAnchorButtonProps,
   Button as BlueprintButton,
   ButtonProps as BlueprintButtonProps,
+  Tag,
+  TagProps,
   Tooltip,
   TooltipProps,
 } from '@blueprintjs/core';
+import { css } from '@emotion/react';
+import { ReactNode } from 'react';
 
 type BlueprintProps = {
   [key in keyof BlueprintButtonProps &
@@ -14,10 +19,12 @@ type BlueprintProps = {
 };
 export type ButtonProps = BlueprintProps & {
   tooltipProps?: Omit<TooltipProps, 'children'>;
+  tag?: ReactNode;
+  tagProps?: Omit<TagProps, 'children'>;
 };
 
 export function Button(props: ButtonProps) {
-  const { tooltipProps, children, ...buttonProps } = props;
+  const { tooltipProps, children, tag, tagProps, ...buttonProps } = props;
 
   const InnerButton = buttonProps.disabled
     ? BlueprintAnchorButton
@@ -27,9 +34,33 @@ export function Button(props: ButtonProps) {
       fill={tooltipProps?.fill || buttonProps.fill}
       {...tooltipProps}
       renderTarget={({ isOpen, ...targetProps }) => (
-        <InnerButton {...targetProps} {...buttonProps}>
-          {children}
-        </InnerButton>
+        <div style={{ position: 'relative' }}>
+          {tag && (
+            <Tag
+              css={css`
+                position: absolute;
+                top: 0;
+                left: 0;
+                cursor: default;
+                font-size: 0.875em;
+                padding: 2px !important;
+                min-height: 15px;
+                min-width: 15px;
+                line-height: 1em;
+                text-align: center;
+                z-index: 20;
+              `}
+              round
+              intent="success"
+              {...tagProps}
+            >
+              {tag}
+            </Tag>
+          )}
+          <InnerButton {...targetProps} {...buttonProps} style={{}}>
+            {children}
+          </InnerButton>
+        </div>
       )}
     />
   );

package/src/components/button/index.ts

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

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