react-science 0.19.2 → 0.20.0

package/lib-esm/components/spinner/FullSpinner.js

@@ -1,17 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, keyframes } from '@emotion/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
 const spin = keyframes `
   100% {
     transform: rotate(360deg);
   }
 `;
-const spinnerStyle = css `
-  height: 40px;
-  width: 40px;
+const Spinner = styled.svg `
+  height: ${({ height }) => `${height || 40}px`};
+  width: ${({ width }) => `${width || 40}px`};
   animation: ${spin} 0.8s linear infinite;
 `;
-export function FullSpinner() {
+export function FullSpinner(props) {
     // First div is used when using nextjs/dynamic even after component is loaded
     return (_jsx("div", { style: { height: '100%' }, children: _jsx("div", { style: {
                 display: 'flex',
@@ -19,6 +19,6 @@ export function FullSpinner() {
                 width: '100%',
                 alignItems: 'center',
                 justifyContent: 'center',
-            }, children: _jsxs("svg", { css: spinnerStyle, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { style: { opacity: 0.25 }, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { style: { opacity: 0.75 }, fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }) }));
+            }, children: _jsxs(Spinner, { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { style: { opacity: 0.25 }, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { style: { opacity: 0.75 }, fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }) }));
 }
 //# sourceMappingURL=FullSpinner.js.map

package/lib-esm/components/spinner/FullSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullSpinner.js","sourceRoot":"","sources":["../../../src/components/spinner/FullSpinner.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,IAAI,GAAG,SAAS,CAAA;;;;CAIrB,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,CAAA;;;eAGT,IAAI;CAClB,CAAC;AAEF,MAAM,UAAU,WAAW;IACzB,6EAA6E;IAC7E,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAC5B,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;aACzB,YAED,eACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,aAEnB,iBACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,GACf,EACF,eACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GACnH,IACE,GACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"FullSpinner.js","sourceRoot":"","sources":["../../../src/components/spinner/FullSpinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,IAAI,GAAG,SAAS,CAAA;;;;CAIrB,CAAC;AAOF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAkB;YAChC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,MAAM,IAAI,EAAE,IAAI;WACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,EAAE,IAAI;eAC7B,IAAI;CAClB,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,6EAA6E;IAC7E,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAC5B,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;aACzB,YAED,MAAC,OAAO,OACF,KAAK,EACT,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,aAEnB,iBACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,GACf,EACF,eACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GACnH,IACM,GACN,GACF,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "description": "React components to build analysis UI",
   "exports": {
     "./app": {

package/src/app/about/AboutDialogToolbarButton.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { Modal, Toolbar, useOnOff } from '../../components/index';
@@ -10,12 +9,10 @@ interface AboutDialogToolbarButtonProps {
   body: ReactNode;
 }
 
-const aboutDialogToolbarButtonCss = {
-  root: css`
-    max-width: 600px;
-    padding: 10px;
-  `,
-};
+const ModalBody = styled.div`
+  max-width: 600px;
+  padding: 10px;
+`;
 
 export function AboutDialogToolbarButton(props: AboutDialogToolbarButtonProps) {
   const { name, icon, body } = props;
@@ -33,7 +30,7 @@ export function AboutDialogToolbarButton(props: AboutDialogToolbarButtonProps) {
       <Modal isOpen={isOpenDialog} onRequestClose={closeDialog}>
         <Modal.Header>{name}</Modal.Header>
         <Modal.Body>
-          <div css={aboutDialogToolbarButtonCss.root}>{body}</div>
+          <ModalBody>{body}</ModalBody>
         </Modal.Body>
       </Modal>
     </>

package/src/app/explorer/MeasurementExplorer.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useState } from 'react';
 import { FaExchangeAlt, FaArrowsAltH } from 'react-icons/fa';
 
@@ -14,12 +13,36 @@ interface ExplorerInfo {
   flipHorizontalAxis: boolean;
 }
 
+const MeasurementExplorerRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const MeasurementExplorerContent = styled.div`
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+`;
+
+const MeasurementExplorerSelect = styled.select`
+  cursor: pointer;
+  border: 1px solid black;
+  padding: 1px;
+  margin-left: 2px;
+`;
+
+const MeasurementExplorerAction = styled.div`
+  padding: 1px;
+  display: flex;
+`;
+
 export function MeasurementExplorer(props: MeasurementExplorerProps) {
   const {
     measurement: { data },
     width = '100%',
     height = '100%',
   } = props;
+
   function defaultInfo(dataIndex: number) {
     const varNames = Object.keys(data[dataIndex].variables);
     return {
@@ -28,10 +51,12 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
       yVariableName: varNames.includes('y') ? 'y' : varNames[1],
     };
   }
+
   const [info, setInfo] = useState<ExplorerInfo>({
     flipHorizontalAxis: false,
     ...defaultInfo(0),
   });
+
   /* variables for this measurement are mapped into `id - label (units)`
     `id` necessary bc files may have repeated labels
   */
@@ -55,30 +80,13 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
       return null;
     });
   }
+
   return (
-    <div
-      style={{ width, height }}
-      css={css`
-        display: flex;
-        flex-direction: column;
-      `}
-    >
-      <div
-        css={css`
-          display: flex;
-          justify-content: space-around;
-          margin-bottom: 20px;
-        `}
-      >
+    <MeasurementExplorerRoot style={{ width, height }}>
+      <MeasurementExplorerContent>
         <div>
           <label>dataIndex: </label>
-          <select
-            css={css`
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `}
+          <MeasurementExplorerSelect
             onChange={({ target }) => {
               const value = Number(target.value);
               if (value !== undefined && !Number.isNaN(value)) {
@@ -95,17 +103,11 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
                 {i}
               </option>
             ))}
-          </select>
+          </MeasurementExplorerSelect>
         </div>
         <div>
           <label>xVariable: </label>
-          <select
-            css={css`
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `}
+          <MeasurementExplorerSelect
             onChange={({ target }) => {
               const value = target.value;
               if (value) {
@@ -115,14 +117,11 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
             value={info.xVariableName}
           >
             {dropdownVariables('x')}
-          </select>
+          </MeasurementExplorerSelect>
         </div>
         <div>
           <FaExchangeAlt
-            css={css`
-              margin-top: 2px;
-              cursor: pointer;
-            `}
+            style={{ marginTop: 2, cursor: 'pointer' }}
             size="20"
             onClick={() =>
               setInfo(({ xVariableName, yVariableName, ...info }) => ({
@@ -135,13 +134,7 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
         </div>
         <div>
           <label>yVariable :</label>
-          <select
-            css={css`
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `}
+          <MeasurementExplorerSelect
             onChange={({ target }) => {
               const value = target.value;
               if (value) {
@@ -151,22 +144,17 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
             value={info.yVariableName}
           >
             {dropdownVariables('y')}
-          </select>
+          </MeasurementExplorerSelect>
         </div>
-        <div
-          css={css`
-            padding: 1px;
-            display: flex;
-          `}
-        >
+        <MeasurementExplorerAction>
           Flip horizontal axis:
           <FaArrowsAltH
-            css={css`
-              cursor: pointer;
-              border: 1px solid black;
-              padding: 1px;
-              margin-left: 2px;
-            `}
+            style={{
+              cursor: 'pointer',
+              border: '1px solid black',
+              padding: 1,
+              marginLeft: 2,
+            }}
             size="28"
             onClick={() =>
               setInfo(({ flipHorizontalAxis, ...other }) => ({
@@ -175,9 +163,9 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
               }))
             }
           />
-        </div>
-      </div>
+        </MeasurementExplorerAction>
+      </MeasurementExplorerContent>
       <MeasurementPlot {...props} {...info} />
-    </div>
+    </MeasurementExplorerRoot>
   );
 }

package/src/app/helpers/MeasurementPlot.tsx

@@ -31,6 +31,7 @@ export function MeasurementPlot(props: MeasurementPlotProps) {
     </PlotController>
   );
 }
+
 function MeasurementComponent(props: MeasurementPlotProps) {
   const {
     measurementDisplay,

package/src/app/helpers/react-plot.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { type ReactNode, useMemo } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import {
@@ -16,11 +15,20 @@ import {
 
 import type { MeasurementPlotProps } from './MeasurementPlot';
 
-export function BasicComponent(
-  props: MeasurementPlotProps & {
-    children: ReactNode[] | ReactNode;
-  },
-) {
+interface BasicComponentProps extends MeasurementPlotProps {
+  children: ReactNode[] | ReactNode;
+}
+
+const BasicComponentRoot = styled.div`
+  user-drag: none;
+  -webkit-user-drag: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+`;
+
+export function BasicComponent(props: BasicComponentProps) {
   const {
     children,
     measurement,
@@ -38,6 +46,7 @@ export function BasicComponent(
     showVerticalGrid = true,
     flipHorizontalAxis = false,
   } = props;
+
   const {
     info: { title },
     data,
@@ -58,36 +67,32 @@ export function BasicComponent(
 
     return { x, y };
   }, [data, dataIndex, xVariableName, yVariableName]);
+
   const direction = new Set(['vertical', 'horizontal']);
+
   const rectZoom = useRectangularZoom({
     disabled: zoom !== 'rectangular',
   });
+
   const axisZoom = useAxisZoom({
     direction: zoom === 'vertical' ? 'vertical' : 'horizontal',
     disabled: !direction.has(zoom),
   });
+
   useAxisWheelZoom({
     direction: wheelZoom === 'vertical' ? 'vertical' : 'horizontal',
     axisId: wheelZoom === 'vertical' ? 'y' : 'x',
     disabled: !direction.has(wheelZoom),
   });
+
   const crossHairAnnot = useCrossHair({
     disabled: !crossHair,
   });
+
   usePan();
 
   return (
-    <div
-      style={{ width, height }}
-      css={css`
-        user-drag: none;
-        -webkit-user-drag: none;
-        user-select: none;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-      `}
-    >
+    <BasicComponentRoot style={{ width, height }}>
       <ResponsiveChart width={width} height={height}>
         {({ width, height }) => (
           <Plot width={width} height={height}>
@@ -116,6 +121,6 @@ export function BasicComponent(
           </Plot>
         )}
       </ResponsiveChart>
-    </div>
+    </BasicComponentRoot>
   );
 }

package/src/app/kinds/iv/plot-view/IvPlotView.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { FaCompress } from 'react-icons/fa';
 import { PlotController } from 'react-plot';
 
@@ -9,31 +8,31 @@ import { Toolbar } from '../../../../components/index';
 import IvMeasurementsPlot from './IvMeasurementsPlot';
 import IvPlotVariablesSelector from './IvPlotVariablesSelector';
 
+const IvPlotRoot = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+`;
+
+const PlotRoot = styled.div`
+  padding: 5px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
 export function IvPlotView() {
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: row;
-        height: 100%;
-      `}
-    >
+    <IvPlotRoot>
       <VerticalToolbar />
-      <div
-        css={css`
-          padding: 5px;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-        `}
-      >
+      <PlotRoot>
         <PlotController>
           <IvMeasurementsPlot />
         </PlotController>
 
         <IvPlotVariablesSelector />
-      </div>
-    </div>
+      </PlotRoot>
+    </IvPlotRoot>
   );
 }
 

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

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useLayoutEffect, useRef } from 'react';
 
 interface MeasurementCheckboxProps {
@@ -8,7 +7,7 @@ interface MeasurementCheckboxProps {
   indeterminate?: boolean;
 }
 
-const checkboxCss = css`
+const InputMeasurementCheckBox = styled.input`
   color: #6366f1;
   border-color: #d1d5db;
   border-radius: 0.25rem;
@@ -28,8 +27,7 @@ export function MeasurementCheckbox(props: MeasurementCheckboxProps) {
   }, [indeterminate]);
 
   return (
-    <input
-      css={checkboxCss}
+    <InputMeasurementCheckBox
       type="checkbox"
       checked={checked}
       onChange={onSelectCheckbox}

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

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useRef } from 'react';
 
 import {
@@ -22,7 +21,7 @@ interface MeasurementColorPreviewProps {
   color: ColorConfig;
 }
 
-const colorPreviewCss = css`
+const ColorPreviewButton = styled.button`
   width: 1em;
   height: 1em;
 `;
@@ -46,14 +45,13 @@ export default function MeasurementColorPreview(
 
   return (
     <>
-      <button
+      <ColorPreviewButton
         type="button"
         ref={setReferenceElement}
-        css={colorPreviewCss}
         onClick={toggle}
       >
         <ColorPreview color={color} />
-      </button>
+      </ColorPreviewButton>
       {isOpened && (
         <Portal>
           <div