@vitessce/scatterplot-gating 3.1.1 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { G } from "./index-c974ea79.js";
1
+ import { G } from "./index-4ac2413a.js";
2
2
  import "react";
3
3
  import "@vitessce/vit-s";
4
4
  import "react-dom";
@@ -1,4 +1,4 @@
1
- import { B as BaseDecoder } from "./index-c974ea79.js";
1
+ import { B as BaseDecoder } from "./index-4ac2413a.js";
2
2
  import "react";
3
3
  import "@vitessce/vit-s";
4
4
  import "react-dom";
@@ -1,5 +1,5 @@
1
1
  import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
2
- import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-c974ea79.js";
2
+ import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-4ac2413a.js";
3
3
  import "react";
4
4
  import "@vitessce/vit-s";
5
5
  import "react-dom";
@@ -1,4 +1,4 @@
1
- import { B as BaseDecoder } from "./index-c974ea79.js";
1
+ import { B as BaseDecoder } from "./index-4ac2413a.js";
2
2
  import "react";
3
3
  import "@vitessce/vit-s";
4
4
  import "react-dom";
@@ -1,4 +1,4 @@
1
- import { B as BaseDecoder } from "./index-c974ea79.js";
1
+ import { B as BaseDecoder } from "./index-4ac2413a.js";
2
2
  import "react";
3
3
  import "@vitessce/vit-s";
4
4
  import "react-dom";
@@ -1,4 +1,4 @@
1
- import { B as BaseDecoder } from "./index-c974ea79.js";
1
+ import { B as BaseDecoder } from "./index-4ac2413a.js";
2
2
  import "react";
3
3
  import "@vitessce/vit-s";
4
4
  import "react-dom";
@@ -1,4 +1,4 @@
1
- import { B as BaseDecoder } from "./index-c974ea79.js";
1
+ import { B as BaseDecoder } from "./index-4ac2413a.js";
2
2
  import "react";
3
3
  import "@vitessce/vit-s";
4
4
  import "react-dom";
@@ -1 +1 @@
1
- {"version":3,"file":"GatingScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/GatingScatterplotOptions.js"],"names":[],"mappings":"AAMA,0EAyHC"}
1
+ {"version":3,"file":"GatingScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/GatingScatterplotOptions.js"],"names":[],"mappings":"AAKA,0EAsIC"}
@@ -1,11 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import React from 'react';
3
- import plur from 'plur';
2
+ import React, { useId } from 'react';
4
3
  import { TableCell, TableRow, TextField } from '@material-ui/core';
5
4
  import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
6
- import { capitalize } from '@vitessce/utils';
5
+ import { capitalize, pluralize as plur } from '@vitessce/utils';
7
6
  export default function GatingScatterplotOptions(props) {
8
7
  const { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform, setGatingFeatureValueTransform, gatingFeatureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient, geneSelectOptions, transformOptions, } = props;
8
+ const gatingScatterplotOptionsId = useId();
9
9
  const classes = usePlotOptionsStyles();
10
10
  // Handlers for custom option field changes.
11
11
  const handleGeneSelectChange = (event) => {
@@ -44,11 +44,11 @@ export default function GatingScatterplotOptions(props) {
44
44
  }
45
45
  }
46
46
  };
47
- return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: capitalize(plur(featureType, geneSelectOptions?.length)) }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { multiple: true, className: classes.select, value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v), onChange: handleGeneSelectChange, inputProps: {
48
- id: 'scatterplot-gene-select',
49
- }, children: geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name))) }, "gating-gene-select") })] }, "gene-option-row"), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Transform" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
50
- id: 'scatterplot-transform-select',
51
- }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }, "gating-transform-select") })] }, "transform-option-row"), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Transform Coefficient" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(TextField, { label: "Number", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, InputLabelProps: {
47
+ return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`, children: capitalize(plur(featureType, geneSelectOptions?.length)) }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { multiple: true, className: classes.select, value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v), onChange: handleGeneSelectChange, inputProps: {
48
+ id: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`,
49
+ }, children: geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`, children: "Transform" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
50
+ id: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`,
51
+ }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, InputLabelProps: {
52
52
  shrink: true,
53
- } }) })] }, "transform-coefficient-option-row")] }));
53
+ }, id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}` }) })] })] }));
54
54
  }
@@ -1,9 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React, { useState, useEffect, useCallback, useMemo, } from 'react';
3
- import plur from 'plur';
4
3
  import { extent } from 'd3-array';
5
4
  import { isEqual } from 'lodash-es';
6
- import { capitalize, commaNumber, getCellColors, getValueTransformFunction, VALUE_TRANSFORM_OPTIONS, } from '@vitessce/utils';
5
+ import { pluralize as plur, capitalize, commaNumber, getCellColors, getValueTransformFunction, VALUE_TRANSFORM_OPTIONS, } from '@vitessce/utils';
7
6
  import { TitleInfo, useDeckCanvasSize, useReady, useUrls, useUint8FeatureSelection, useExpressionValueGetter, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, } from '@vitessce/vit-s';
8
7
  import { getCellSetPolygons, mergeObsSets, setObsSelection } from '@vitessce/sets-utils';
9
8
  import { Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions, getPointSizeDevicePixels, getPointOpacity, EmptyMessage, } from '@vitessce/scatterplot';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vitessce/scatterplot-gating",
3
- "version": "3.1.1",
3
+ "version": "3.1.2",
4
4
  "author": "Gehlenborg Lab",
5
5
  "homepage": "http://vitessce.io",
6
6
  "repository": {
@@ -19,12 +19,11 @@
19
19
  "@material-ui/core": "~4.12.3",
20
20
  "d3-array": "^2.4.0",
21
21
  "lodash-es": "^4.17.21",
22
- "plur": "^5.1.0",
23
- "@vitessce/constants-internal": "3.1.1",
24
- "@vitessce/scatterplot": "3.1.1",
25
- "@vitessce/sets-utils": "3.1.1",
26
- "@vitessce/utils": "3.1.1",
27
- "@vitessce/vit-s": "3.1.1"
22
+ "@vitessce/constants-internal": "3.1.2",
23
+ "@vitessce/scatterplot": "3.1.2",
24
+ "@vitessce/sets-utils": "3.1.2",
25
+ "@vitessce/utils": "3.1.2",
26
+ "@vitessce/vit-s": "3.1.2"
28
27
  },
29
28
  "devDependencies": {
30
29
  "react": "^18.0.0",
@@ -1,8 +1,7 @@
1
- import React from 'react';
2
- import plur from 'plur';
1
+ import React, { useId } from 'react';
3
2
  import { TableCell, TableRow, TextField } from '@material-ui/core';
4
3
  import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
5
- import { capitalize } from '@vitessce/utils';
4
+ import { capitalize, pluralize as plur } from '@vitessce/utils';
6
5
 
7
6
  export default function GatingScatterplotOptions(props) {
8
7
  const {
@@ -19,6 +18,8 @@ export default function GatingScatterplotOptions(props) {
19
18
  transformOptions,
20
19
  } = props;
21
20
 
21
+ const gatingScatterplotOptionsId = useId();
22
+
22
23
  const classes = usePlotOptionsStyles();
23
24
 
24
25
  // Handlers for custom option field changes.
@@ -62,19 +63,22 @@ export default function GatingScatterplotOptions(props) {
62
63
 
63
64
  return (
64
65
  <>
65
- <TableRow key="gene-option-row">
66
- <TableCell className={classes.labelCell}>
67
- {capitalize(plur(featureType, geneSelectOptions?.length))}
66
+ <TableRow>
67
+ <TableCell className={classes.labelCell} variant="head" scope="row">
68
+ <label
69
+ htmlFor={`scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`}
70
+ >
71
+ {capitalize(plur(featureType, geneSelectOptions?.length))}
72
+ </label>
68
73
  </TableCell>
69
- <TableCell className={classes.inputCell}>
74
+ <TableCell className={classes.inputCell} variant="body">
70
75
  <OptionSelect
71
- key="gating-gene-select"
72
76
  multiple
73
77
  className={classes.select}
74
78
  value={[gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v)}
75
79
  onChange={handleGeneSelectChange}
76
80
  inputProps={{
77
- id: 'scatterplot-gene-select',
81
+ id: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`,
78
82
  }}
79
83
  >
80
84
  {geneSelectOptions.map(name => (
@@ -85,18 +89,21 @@ export default function GatingScatterplotOptions(props) {
85
89
  </OptionSelect>
86
90
  </TableCell>
87
91
  </TableRow>
88
- <TableRow key="transform-option-row">
89
- <TableCell className={classes.labelCell}>
90
- Transform
92
+ <TableRow>
93
+ <TableCell className={classes.labelCell} variant="head" scope="row">
94
+ <label
95
+ htmlFor={`scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`}
96
+ >
97
+ Transform
98
+ </label>
91
99
  </TableCell>
92
- <TableCell className={classes.inputCell}>
100
+ <TableCell className={classes.inputCell} variant="body">
93
101
  <OptionSelect
94
- key="gating-transform-select"
95
102
  className={classes.select}
96
103
  value={gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform}
97
104
  onChange={handleTransformChange}
98
105
  inputProps={{
99
- id: 'scatterplot-transform-select',
106
+ id: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`,
100
107
  }}
101
108
  >
102
109
  {transformOptions.map(opt => (
@@ -107,19 +114,24 @@ export default function GatingScatterplotOptions(props) {
107
114
  </OptionSelect>
108
115
  </TableCell>
109
116
  </TableRow>
110
- <TableRow key="transform-coefficient-option-row">
111
- <TableCell className={classes.labelCell}>
112
- Transform Coefficient
117
+ <TableRow>
118
+ <TableCell className={classes.labelCell} variant="head" scope="row">
119
+ <label
120
+ htmlFor={`scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`}
121
+ >
122
+ Transform Coefficient
123
+ </label>
113
124
  </TableCell>
114
- <TableCell className={classes.inputCell}>
125
+ <TableCell className={classes.inputCell} variant="body">
115
126
  <TextField
116
- label="Number"
127
+ label="Transform Coefficient"
117
128
  type="number"
118
129
  onChange={handleTransformCoefficientChange}
119
130
  value={gatingFeatureValueTransformCoefficient}
120
131
  InputLabelProps={{
121
132
  shrink: true,
122
133
  }}
134
+ id={`scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`}
123
135
  />
124
136
  </TableCell>
125
137
  </TableRow>
@@ -1,10 +1,10 @@
1
1
  import React, {
2
2
  useState, useEffect, useCallback, useMemo,
3
3
  } from 'react';
4
- import plur from 'plur';
5
4
  import { extent } from 'd3-array';
6
5
  import { isEqual } from 'lodash-es';
7
6
  import {
7
+ pluralize as plur,
8
8
  capitalize, commaNumber,
9
9
  getCellColors,
10
10
  getValueTransformFunction, VALUE_TRANSFORM_OPTIONS,