@vitessce/statistical-plots 3.5.8 → 3.5.9

package/dist/{deflate-1679ef33.js → deflate-19841f78.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { B as BaseDecoder } from "./index-0f4fe21d.js";
+import { B as BaseDecoder } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{index-0f4fe21d.js → index-dc733355.js}

@@ -2569,6 +2569,9 @@ const DEFAULT_LIGHT2_COLOR = [235, 235, 235];
 function getDefaultColor(theme) {
   return theme === "dark" ? DEFAULT_DARK_COLOR : theme === "light" ? DEFAULT_LIGHT_COLOR$3 : DEFAULT_LIGHT2_COLOR;
 }
+function getDefaultForegroundColor(theme) {
+  return theme === "dark" ? DEFAULT_LIGHT2_COLOR : DEFAULT_DARK_COLOR;
+}
 const PALETTE = [
   [68, 119, 170],
   [136, 204, 238],
@@ -133508,16 +133511,16 @@ function addDecoder(cases2, importFn) {
   }
   cases2.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-d8d7ab7f.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-70f852cc.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-f7587aff.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-9572eac3.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-280f0ee1.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-1679ef33.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-393c67b2.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-12264a36.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-5d24a8e2.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-a83077be.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-19841f78.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-cce11fbc.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-1edd075a.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-8d38cd8b.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset5 = 0;
@@ -207114,7 +207117,8 @@ function Treemap(props) {
     marginTop = 5,
     marginRight = 5,
     marginLeft = 80,
-    marginBottom
+    marginBottom,
+    onNodeClick
   } = props;
   const hierarchyData = useMemo(() => {
     if (!obsCounts) {
@@ -207179,7 +207183,11 @@ function Treemap(props) {
     leaf.append("rect").attr("id", (d) => {
       d.leafUid = getLeafUid();
       return d.leafUid.id;
-    }).attr("fill", (d) => colorScale2(getPathForColoring(d))).attr("fill-opacity", 0.8).attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0);
+    }).attr("fill", (d) => colorScale2(getPathForColoring(d))).attr("fill-opacity", 0.8).attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0).on("click", (e3, d) => {
+      var _a2, _b, _c;
+      const obsSetPath = hierarchyLevels[0] === "obsSet" ? (_b = (_a2 = d.parent) == null ? void 0 : _a2.data) == null ? void 0 : _b[0] : (_c = d.data) == null ? void 0 : _c[0];
+      onNodeClick(obsSetPath);
+    });
     leaf.append("clipPath").attr("id", (d) => {
       d.clipUid = getClipUid();
       return d.clipUid.id;
@@ -207211,7 +207219,8 @@ function Treemap(props) {
     obsSetColorScale,
     sampleSetColorScale,
     obsColorEncoding,
-    hierarchyLevels
+    hierarchyLevels,
+    onNodeClick
   ]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
@@ -207487,6 +207496,9 @@ function TreemapSubscriber(props) {
     sampleSetSelection
     // TODO: consider filtering-related coordination values
   ]);
+  const onNodeClick = useCallback((obsSetPath) => {
+    setObsSetSelection([obsSetPath]);
+  }, [setObsSetSelection]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TitleInfo,
     {
@@ -207523,7 +207535,8 @@ function TreemapSubscriber(props) {
           obsSetColor,
           sampleSetColor,
           obsSetSelection,
-          sampleSetSelection
+          sampleSetSelection,
+          onNodeClick
         }
       ) })
     }
@@ -207596,7 +207609,9 @@ function VolcanoPlot(props) {
     svg.append("g").attr("transform", `translate(0,${height2 - marginBottom})`).call(axisBottom(xScale));
     svg.append("g").attr("transform", `translate(${marginLeft},0)`).call(axisLeft(yScale));
     const titleG = svg.append("g");
-    const fgColor = "black";
+    const fgColor = colorArrayToString(
+      getDefaultForegroundColor(theme)
+    );
     titleG.append("text").attr("text-anchor", "middle").attr("x", -innerHeight / 2).attr("y", 15).attr("transform", "rotate(-90)").text("-log10 p-value").style("font-size", "12px").style("fill", fgColor);
     titleG.append("text").attr("text-anchor", "middle").attr("x", marginLeft + innerWidth / 2).attr("y", height2 - 10).text("log2 fold-change").style("font-size", "12px").style("fill", fgColor);
     const obsSetsColumnNameMappingReversed = Object.fromEntries(
@@ -208369,7 +208384,7 @@ function FeatureSetEnrichmentBarPlot(props) {
       x: {
         field: "minusLog10p",
         type: "quantitative",
-        title: "- log10 p-value"
+        title: "-log10 p-value"
       },
       color: {
         field: "key",

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, e, C, d, a, h, D, f, E, F, c, T, V } from "./index-0f4fe21d.js";
+import { b, e, C, d, a, h, D, f, E, F, c, T, V } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-280f0ee1.js → jpeg-a83077be.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0f4fe21d.js";
+import { B as BaseDecoder } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-12264a36.js → lerc-1edd075a.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-0f4fe21d.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-70f852cc.js → lzw-9572eac3.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0f4fe21d.js";
+import { B as BaseDecoder } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-393c67b2.js → packbits-cce11fbc.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0f4fe21d.js";
+import { B as BaseDecoder } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-d8d7ab7f.js → raw-f7587aff.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0f4fe21d.js";
+import { B as BaseDecoder } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-5d24a8e2.js → webimage-8d38cd8b.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0f4fe21d.js";
+import { B as BaseDecoder } from "./index-dc733355.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist-tsc/FeatureSetEnrichmentBarPlot.js

@@ -113,7 +113,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
             x: {
                 field: 'minusLog10p',
                 type: 'quantitative',
-                title: '- log10 p-value',
+                title: '-log10 p-value',
             },
             color: {
                 field: 'key',

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

@@ -1 +1 @@
-{"version":3,"file":"Treemap.d.ts","sourceRoot":"","sources":["../src/Treemap.js"],"names":[],"mappings":"AAsBA;;;;;;;;GAQG;AACH,yDA0KC"}
+{"version":3,"file":"Treemap.d.ts","sourceRoot":"","sources":["../src/Treemap.js"],"names":[],"mappings":"AAsBA;;;;;;;;GAQG;AACH,yDAkLC"}

package/dist-tsc/Treemap.js

@@ -29,7 +29,7 @@ function uidGenerator(prefix) {
  * @returns
  */
 export default function Treemap(props) {
-    const { obsCounts, obsColorEncoding, hierarchyLevels, theme, width, height, obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, marginTop = 5, marginRight = 5, marginLeft = 80, marginBottom, } = props;
+    const { obsCounts, obsColorEncoding, hierarchyLevels, theme, width, height, obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, marginTop = 5, marginRight = 5, marginLeft = 80, marginBottom, onNodeClick, } = props;
     const hierarchyData = useMemo(() => {
         // Support both sampleSet->obsSet and
         // obsSet->sampleSet hierarchy modes
@@ -114,7 +114,13 @@ export default function Treemap(props) {
             .attr('fill', d => colorScale(getPathForColoring(d)))
             .attr('fill-opacity', 0.8)
             .attr('width', d => d.x1 - d.x0)
-            .attr('height', d => d.y1 - d.y0);
+            .attr('height', d => d.y1 - d.y0)
+            .on('click', (e, d) => {
+            const obsSetPath = (hierarchyLevels[0] === 'obsSet'
+                ? d.parent?.data?.[0]
+                : d.data?.[0]);
+            onNodeClick(obsSetPath);
+        });
         // Append a clipPath to ensure text does not overflow.
         leaf.append('clipPath')
             .attr('id', (d) => {
@@ -142,7 +148,7 @@ export default function Treemap(props) {
     }, [width, height, marginLeft, marginBottom, theme, marginTop, marginRight,
         obsType, sampleType, treemapLeaves, sampleSetColor, sampleSetSelection,
         obsSetSelection, obsSetColor, obsSetColorScale, sampleSetColorScale,
-        obsColorEncoding, hierarchyLevels,
+        obsColorEncoding, hierarchyLevels, onNodeClick,
     ]);
     return (_jsx("svg", { ref: svgRef, style: {
             top: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"TreemapSubscriber.d.ts","sourceRoot":"","sources":["../src/TreemapSubscriber.js"],"names":[],"mappings":"AAyBA,2DA4OC"}
+{"version":3,"file":"TreemapSubscriber.d.ts","sourceRoot":"","sources":["../src/TreemapSubscriber.js"],"names":[],"mappings":"AAyBA,2DAiPC"}

package/dist-tsc/TreemapSubscriber.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable no-unused-vars */
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixIndices, useObsSetsData, useSampleEdgesData, useSampleSetsData, } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
 import { treeToSelectedSetMap, treeToSetSizesBySetNames, mergeObsSets } from '@vitessce/sets-utils';
@@ -99,5 +99,8 @@ export function TreemapSubscriber(props) {
         sampleSetSelection,
         // TODO: consider filtering-related coordination values
     ]);
-    return (_jsx(TitleInfo, { title: `Treemap of ${capitalize(plur(obsType, 2))}`, info: `${commaNumber(obsCount)} ${plur(obsType, obsCount)} from ${commaNumber(sampleCount)} ${plur(sampleType, sampleCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(TreemapOptions, { obsType: obsType, sampleType: sampleType, obsColorEncoding: obsColorEncoding, setObsColorEncoding: setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels: setHierarchyLevels })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(Treemap, { obsCounts: obsCounts, sampleCounts: sampleCounts, obsColorEncoding: obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme: theme, width: width, height: height, obsType: obsType, sampleType: sampleType, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, obsSetSelection: obsSetSelection, sampleSetSelection: sampleSetSelection }) }) }));
+    const onNodeClick = useCallback((obsSetPath) => {
+        setObsSetSelection([obsSetPath]);
+    }, [setObsSetSelection]);
+    return (_jsx(TitleInfo, { title: `Treemap of ${capitalize(plur(obsType, 2))}`, info: `${commaNumber(obsCount)} ${plur(obsType, obsCount)} from ${commaNumber(sampleCount)} ${plur(sampleType, sampleCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, options: (_jsx(TreemapOptions, { obsType: obsType, sampleType: sampleType, obsColorEncoding: obsColorEncoding, setObsColorEncoding: setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels: setHierarchyLevels })), children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(Treemap, { obsCounts: obsCounts, sampleCounts: sampleCounts, obsColorEncoding: obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme: theme, width: width, height: height, obsType: obsType, sampleType: sampleType, obsSetColor: obsSetColor, sampleSetColor: sampleSetColor, obsSetSelection: obsSetSelection, sampleSetSelection: sampleSetSelection, onNodeClick: onNodeClick }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"VolcanoPlot.d.ts","sourceRoot":"","sources":["../src/VolcanoPlot.js"],"names":[],"mappings":"AAWA,6DA6SC"}
+{"version":3,"file":"VolcanoPlot.d.ts","sourceRoot":"","sources":["../src/VolcanoPlot.js"],"names":[],"mappings":"AAYA,6DA+SC"}

package/dist-tsc/VolcanoPlot.js

@@ -7,7 +7,8 @@ import { axisBottom, axisLeft } from 'd3-axis';
 import { extent as d3_extent } from 'd3-array';
 import { select } from 'd3-selection';
 import { isEqual } from 'lodash-es';
-import { capitalize } from '@vitessce/utils';
+import { capitalize, getDefaultForegroundColor } from '@vitessce/utils';
+import { colorArrayToString } from '@vitessce/sets-utils';
 import { getColorScale } from './utils.js';
 export default function VolcanoPlot(props) {
     const { theme, width, height, obsType, featureType, obsSetsColumnNameMapping, sampleSetsColumnNameMapping, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, data, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom = 50, onFeatureClick, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, } = props;
@@ -68,7 +69,7 @@ export default function VolcanoPlot(props) {
             .call(axisLeft(yScale));
         // Axis titles
         const titleG = svg.append('g');
-        const fgColor = 'black'; // TODO: use theme to determine this
+        const fgColor = colorArrayToString(getDefaultForegroundColor(theme));
         // Y-axis title
         titleG
             .append('text')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,12 +29,12 @@
     "react-aria": "^3.28.0",
     "internmap": "^2.0.3",
     "uuid": "^9.0.0",
-    "@vitessce/constants-internal": "3.5.8",
-    "@vitessce/sets-utils": "3.5.8",
-    "@vitessce/utils": "3.5.8",
-    "@vitessce/vega": "3.5.8",
-    "@vitessce/vit-s": "3.5.8",
-    "@vitessce/gl": "3.5.8"
+    "@vitessce/constants-internal": "3.5.9",
+    "@vitessce/sets-utils": "3.5.9",
+    "@vitessce/utils": "3.5.9",
+    "@vitessce/vega": "3.5.9",
+    "@vitessce/vit-s": "3.5.9",
+    "@vitessce/gl": "3.5.9"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/FeatureSetEnrichmentBarPlot.js

@@ -140,7 +140,7 @@ export default function FeatureSetEnrichmentBarPlot(props) {
       x: {
         field: 'minusLog10p',
         type: 'quantitative',
-        title: '- log10 p-value',
+        title: '-log10 p-value',
       },
       color: {
         field: 'key',

package/src/Treemap.js

@@ -47,6 +47,7 @@ export default function Treemap(props) {
     marginRight = 5,
     marginLeft = 80,
     marginBottom,
+    onNodeClick,
   } = props;
 
   const hierarchyData = useMemo(() => {
@@ -154,7 +155,14 @@ export default function Treemap(props) {
         .attr('fill', d => colorScale(getPathForColoring(d)))
         .attr('fill-opacity', 0.8)
         .attr('width', d => d.x1 - d.x0)
-        .attr('height', d => d.y1 - d.y0);
+        .attr('height', d => d.y1 - d.y0)
+        .on('click', (e, d) => {
+          const obsSetPath = (hierarchyLevels[0] === 'obsSet'
+            ? d.parent?.data?.[0]
+            : d.data?.[0]
+          );
+          onNodeClick(obsSetPath);
+        });
 
     // Append a clipPath to ensure text does not overflow.
     leaf.append('clipPath')
@@ -184,7 +192,7 @@ export default function Treemap(props) {
   }, [width, height, marginLeft, marginBottom, theme, marginTop, marginRight,
     obsType, sampleType, treemapLeaves, sampleSetColor, sampleSetSelection,
     obsSetSelection, obsSetColor, obsSetColorScale, sampleSetColorScale,
-    obsColorEncoding, hierarchyLevels,
+    obsColorEncoding, hierarchyLevels, onNodeClick,
   ]);
 
   return (

package/src/TreemapSubscriber.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   TitleInfo,
   useCoordination,
@@ -215,6 +215,10 @@ export function TreemapSubscriber(props) {
     // TODO: consider filtering-related coordination values
   ]);
 
+  const onNodeClick = useCallback((obsSetPath) => {
+    setObsSetSelection([obsSetPath]);
+  }, [setObsSetSelection]);
+
   return (
     <TitleInfo
       title={`Treemap of ${capitalize(plur(obsType, 2))}`}
@@ -255,6 +259,7 @@ export function TreemapSubscriber(props) {
           sampleSetColor={sampleSetColor}
           obsSetSelection={obsSetSelection}
           sampleSetSelection={sampleSetSelection}
+          onNodeClick={onNodeClick}
         />
       </div>
     </TitleInfo>

package/src/VolcanoPlot.js

@@ -6,7 +6,8 @@ import { axisBottom, axisLeft } from 'd3-axis';
 import { extent as d3_extent } from 'd3-array';
 import { select } from 'd3-selection';
 import { isEqual } from 'lodash-es';
-import { capitalize } from '@vitessce/utils';
+import { capitalize, getDefaultForegroundColor } from '@vitessce/utils';
+import { colorArrayToString } from '@vitessce/sets-utils';
 import { getColorScale } from './utils.js';
 
 export default function VolcanoPlot(props) {
@@ -37,13 +38,13 @@ export default function VolcanoPlot(props) {
   const svgRef = useRef();
 
   const computedData = useMemo(() => data.map(d => ({
-        ...d,
-        df: {
-          ...d.df,
-          minusLog10p: d.df.featureSignificance.map(v => -Math.log10(v)),
-          logFoldChange: d.df.featureFoldChange.map(v => Math.log2(v)),
-        },
-      })), [data]);
+    ...d,
+    df: {
+      ...d.df,
+      minusLog10p: d.df.featureSignificance.map(v => -Math.log10(v)),
+      logFoldChange: d.df.featureFoldChange.map(v => Math.log2(v)),
+    },
+  })), [data]);
 
   const [xExtent, yExtent] = useMemo(() => {
     if (!computedData) {
@@ -108,7 +109,9 @@ export default function VolcanoPlot(props) {
 
     // Axis titles
     const titleG = svg.append('g');
-    const fgColor = 'black'; // TODO: use theme to determine this
+    const fgColor = colorArrayToString(
+      getDefaultForegroundColor(theme),
+    );
 
     // Y-axis title
     titleG