@vitessce/biomarker-select 3.5.8 → 3.5.9

package/dist/index.js

@@ -22462,7 +22462,7 @@ const ExpandMoreIcon = createSvgIcon(/* @__PURE__ */ React.createElement("path",
 const InfoIcon = createSvgIcon(/* @__PURE__ */ React.createElement("path", {
   d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
 }), "Info");
-const useStyles = makeStyles(() => ({
+const useStyles$1 = makeStyles(() => ({
   header: {
     marginTop: "10px",
     marginBottom: "10px"
@@ -22505,7 +22505,7 @@ function ConfirmatoryCart(props) {
     // eslint-disable-next-line no-unused-vars
     setCurrentStratificationSelection
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [expandedAccordions, setExpandedAccordions] = React__default.useState([
     "agnostic",
     "specific",
@@ -24767,7 +24767,7 @@ function SelectAgnostic(props) {
     currentModalityAgnosticSelection,
     setCurrentModalityAgnosticSelection
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [selectedItem, setSelectedItem] = React__default.useState(null);
   const [potentialItems, setPotentialItems] = React__default.useState([]);
   const handleChange = async (event) => {
@@ -30750,7 +30750,7 @@ function SelectSpecific(props) {
     setCurrentModalitySpecificSelection,
     getEdges
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const queries = useQueries({
     queries: (currentModalityAgnosticSelection == null ? void 0 : currentModalityAgnosticSelection.map((item) => ({
       queryKey: [item.nodeType, item.kgId],
@@ -30886,7 +30886,7 @@ function ConfirmatoryStepper(props) {
     stratifications,
     onFinish
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [activeStep, setActiveStep] = React__default.useState(0);
   const [skipped, setSkipped] = React__default.useState(/* @__PURE__ */ new Set());
   const isStepOptional = (step) => step === 2;
@@ -31028,7 +31028,7 @@ function ExploratoryStepper(props) {
     stratifications,
     onFinish
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [activeStep, setActiveStep] = React__default.useState(0);
   const [skipped, setSkipped] = React__default.useState(/* @__PURE__ */ new Set());
   const isStepOptional = (step) => step === 2;
@@ -31141,7 +31141,7 @@ function ScmdUi(props) {
     stratifications,
     onFinish
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const mode = modeProp || "confirmatory";
   const [tempIsVisible, setTempIsVisible] = useState(true);
   const isConfirmatoryMode = mode === "confirmatory";
@@ -31309,22 +31309,69 @@ function BiomarkerSelectSubscriber(props) {
     }
   ) : null });
 }
+const useStyles = makeStyles((theme) => ({
+  buttonContainer: {
+    position: "absolute",
+    right: 0,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: "100%"
+  },
+  headingContainer: {
+    backgroundColor: "transparent"
+  },
+  headingSectionContainer: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    position: "relative"
+  },
+  headingText: {
+    margin: 0,
+    color: theme.palette.primaryForeground
+  }
+}));
 function ComparativeHeadingSubscriber(props) {
   var _a2, _b;
   const {
     coordinationScopes
   } = props;
   const [{
-    sampleSetSelection
+    sampleSetSelection,
+    featureSelection
+  }, {
+    setSampleSetSelection
+    // TODO: buttons for modification of featureSelection
+    // setFeatureSelection,
   }] = useCoordination(
     COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING],
     coordinationScopes
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sampleSetSelection && sampleSetSelection.length === 2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "row" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "45%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: (_a2 = sampleSetSelection == null ? void 0 : sampleSetSelection[0]) == null ? void 0 : _a2.at(-1) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "5%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: { textAlign: "right" }, children: "vs. " }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "50%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: (_b = sampleSetSelection == null ? void 0 : sampleSetSelection[1]) == null ? void 0 : _b.at(-1) }) })
-  ] }) : null });
+  const classes = useStyles();
+  const swapSampleSets = useCallback(() => {
+    if ((sampleSetSelection == null ? void 0 : sampleSetSelection.length) === 2) {
+      setSampleSetSelection([
+        sampleSetSelection[1],
+        sampleSetSelection[0]
+      ]);
+    }
+  }, [sampleSetSelection, setSampleSetSelection]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.headingContainer, children: [
+    sampleSetSelection && sampleSetSelection.length === 2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.headingSectionContainer, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "45%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: classes.headingText, children: (_a2 = sampleSetSelection == null ? void 0 : sampleSetSelection[0]) == null ? void 0 : _a2.at(-1) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "5%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: classes.headingText, style: { textAlign: "right" }, children: "vs. " }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "50%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: classes.headingText, children: (_b = sampleSetSelection == null ? void 0 : sampleSetSelection[1]) == null ? void 0 : _b.at(-1) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.buttonContainer, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: swapSampleSets, type: "button", children: "Swap" }) })
+    ] }) : null,
+    featureSelection && featureSelection.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.headingSectionContainer, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: classes.headingText, children: "Selected Biomarkers: " }) }),
+      featureSelection == null ? void 0 : featureSelection.map((featureName, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: classes.headingText, children: [
+        featureName,
+        i < featureSelection.length - 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: ", " }) : null
+      ] }) }))
+    ] }) : null
+  ] });
 }
 var EOL = {}, EOF = {}, QUOTE = 34, NEWLINE = 10, RETURN = 13;
 function objectConverter(columns2) {

package/dist-tsc/ComparativeHeadingSubscriber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComparativeHeadingSubscriber.d.ts","sourceRoot":"","sources":["../src/ComparativeHeadingSubscriber.js"],"names":[],"mappings":"AAOA,sEAuBC"}
+{"version":3,"file":"ComparativeHeadingSubscriber.d.ts","sourceRoot":"","sources":["../src/ComparativeHeadingSubscriber.js"],"names":[],"mappings":"AA+BA,sEAuDC"}

package/dist-tsc/ComparativeHeadingSubscriber.js

@@ -1,9 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
 import { useCoordination, } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { makeStyles } from '@material-ui/core';
+const useStyles = makeStyles(theme => ({
+    buttonContainer: {
+        position: 'absolute',
+        right: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        height: '100%',
+    },
+    headingContainer: {
+        backgroundColor: 'transparent',
+    },
+    headingSectionContainer: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        position: 'relative',
+    },
+    headingText: {
+        margin: 0,
+        color: theme.palette.primaryForeground,
+    },
+}));
 export function ComparativeHeadingSubscriber(props) {
     const { coordinationScopes, } = props;
-    const [{ sampleSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING], coordinationScopes);
-    return (_jsx(_Fragment, { children: sampleSetSelection && sampleSetSelection.length === 2 ? (_jsxs("div", { style: { width: '100%', display: 'flex', flexDirection: 'row' }, children: [_jsx("div", { style: { width: '45%' }, children: _jsx("h2", { children: sampleSetSelection?.[0]?.at(-1) }) }), _jsx("div", { style: { width: '5%' }, children: _jsx("h2", { style: { textAlign: 'right' }, children: "vs.\u00A0" }) }), _jsx("div", { style: { width: '50%' }, children: _jsx("h2", { children: sampleSetSelection?.[1]?.at(-1) }) })] })) : null }));
+    const [{ sampleSetSelection, featureSelection, }, { setSampleSetSelection,
+    // TODO: buttons for modification of featureSelection
+    // setFeatureSelection,
+     }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING], coordinationScopes);
+    const classes = useStyles();
+    const swapSampleSets = useCallback(() => {
+        if (sampleSetSelection?.length === 2) {
+            setSampleSetSelection([
+                sampleSetSelection[1],
+                sampleSetSelection[0],
+            ]);
+        }
+    }, [sampleSetSelection, setSampleSetSelection]);
+    return (_jsxs("div", { className: classes.headingContainer, children: [sampleSetSelection && sampleSetSelection.length === 2 ? (_jsxs("div", { className: classes.headingSectionContainer, children: [_jsx("div", { style: { width: '45%' }, children: _jsx("h2", { className: classes.headingText, children: sampleSetSelection?.[0]?.at(-1) }) }), _jsx("div", { style: { width: '5%' }, children: _jsx("h2", { className: classes.headingText, style: { textAlign: 'right' }, children: "vs.\u00A0" }) }), _jsx("div", { style: { width: '50%' }, children: _jsx("h2", { className: classes.headingText, children: sampleSetSelection?.[1]?.at(-1) }) }), _jsx("div", { className: classes.buttonContainer, children: _jsx("button", { onClick: swapSampleSets, type: "button", children: "Swap" }) })] })) : null, featureSelection && featureSelection.length > 0 ? (_jsxs("div", { className: classes.headingSectionContainer, children: [_jsx("div", { children: _jsx("h3", { className: classes.headingText, children: "Selected Biomarkers:\u00A0" }) }), featureSelection?.map((featureName, i) => (_jsx("div", { children: _jsxs("h3", { className: classes.headingText, children: [featureName, i < featureSelection.length - 1 ? (_jsx("span", { children: ",\u00A0" })) : null] }) })))] })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/biomarker-select",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -24,9 +24,9 @@
     "react-window": "^1.8.10",
     "fuse.js": "^7.0.0",
     "d3-dsv": "^1.1.1",
-    "@vitessce/constants-internal": "3.5.8",
-    "@vitessce/vit-s": "3.5.8",
-    "@vitessce/types": "3.5.8"
+    "@vitessce/constants-internal": "3.5.9",
+    "@vitessce/vit-s": "3.5.9",
+    "@vitessce/types": "3.5.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/ComparativeHeadingSubscriber.js

@@ -1,9 +1,33 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   useCoordination,
 } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { makeStyles } from '@material-ui/core';
 
+const useStyles = makeStyles(theme => ({
+  buttonContainer: {
+    position: 'absolute',
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: '100%',
+  },
+  headingContainer: {
+    backgroundColor: 'transparent',
+  },
+  headingSectionContainer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  headingText: {
+    margin: 0,
+    color: theme.palette.primaryForeground,
+  },
+}));
 
 export function ComparativeHeadingSubscriber(props) {
   const {
@@ -12,20 +36,52 @@ export function ComparativeHeadingSubscriber(props) {
 
   const [{
     sampleSetSelection,
+    featureSelection,
+  }, {
+    setSampleSetSelection,
+    // TODO: buttons for modification of featureSelection
+    // setFeatureSelection,
   }] = useCoordination(
     COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING],
     coordinationScopes,
   );
 
+  const classes = useStyles();
+
+  const swapSampleSets = useCallback(() => {
+    if (sampleSetSelection?.length === 2) {
+      setSampleSetSelection([
+        sampleSetSelection[1],
+        sampleSetSelection[0],
+      ]);
+    }
+  }, [sampleSetSelection, setSampleSetSelection]);
+
   return (
-    <>
+    <div className={classes.headingContainer}>
       {sampleSetSelection && sampleSetSelection.length === 2 ? (
-        <div style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>
-          <div style={{ width: '45%' }}><h2>{sampleSetSelection?.[0]?.at(-1)}</h2></div>
-          <div style={{ width: '5%' }}><h2 style={{ textAlign: 'right' }}>vs.&nbsp;</h2></div>
-          <div style={{ width: '50%' }}><h2>{sampleSetSelection?.[1]?.at(-1)}</h2></div>
+        <div className={classes.headingSectionContainer}>
+          <div style={{ width: '45%' }}><h2 className={classes.headingText}>{sampleSetSelection?.[0]?.at(-1)}</h2></div>
+          <div style={{ width: '5%' }}><h2 className={classes.headingText} style={{ textAlign: 'right' }}>vs.&nbsp;</h2></div>
+          <div style={{ width: '50%' }}><h2 className={classes.headingText}>{sampleSetSelection?.[1]?.at(-1)}</h2></div>
+          <div className={classes.buttonContainer}>
+            <button onClick={swapSampleSets} type="button">Swap</button>
+          </div>
+        </div>
+      ) : null}
+      {featureSelection && featureSelection.length > 0 ? (
+        <div className={classes.headingSectionContainer}>
+          <div><h3 className={classes.headingText}>Selected Biomarkers:&nbsp;</h3></div>
+          {featureSelection?.map((featureName, i) => (
+            <div>
+              <h3 className={classes.headingText}>
+                {featureName}
+                {i < featureSelection.length - 1 ? (<span>,&nbsp;</span>) : null}
+              </h3>
+            </div>
+          ))}
         </div>
       ) : null}
-    </>
+    </div>
   );
 }