Multiple Selection

[alevar]

Support for selection of multiple elements, whether via sets or elems.

Thank you for the fantastic package! I was thinking it would be useful to have more than one slice of the data highlighted at once. For example, multiple elems or sets could be pushed to the selection list and a union of their coverage could be highlighted.

Thank you!

[sgratzl]

can you elaborate? you can already set a set combination or a list of elements as the selection.

see also https://upset.js.org/api/react/modules.html#UpSetSelection

when you give a list of elements all the elements are highlighted.

[alevar]

Thank you for a very prompt response! I was specifically looking for a way to select, and keep selection of multiple combinations.

Here is a mock example illustrating the usage I was hoping to implement. The below example works if setSelection([combinations[0],combinations[1]]); is replaced with setSelection(combinations[0]); . Lastly, reading a bit through the code, I found method for aggregating combinations as follows createSetComposite([combinations[0],combinations[1]]);. The method did combine them as expected, but it seems the selection handling is still unable to highlight multiple combinations (or sets) with either of the input methods I tried.

import React, { useState, useMemo } from 'react';
import { UpSetJS, extractCombinations } from '@upsetjs/react';

function SelectOrganism() {
  const [selection, setSelection] = useState(null);

  const handleSelectionChange = (set) => {
    setSelection([combinations[0],combinations[1]]);
  }

  const elems = [
      { name: 'A', sets: ['S1', 'S2'] },
      { name: 'B', sets: ['S1'] },
      { name: 'C', sets: ['S2'] },
      { name: 'D', sets: ['S1', 'S3'] },
    ];
  const { sets, combinations } = useMemo(() => extractCombinations(elems), [elems]);

  return (
    <UpSetJS
      sets={sets}
      combinations={combinations}
      width={500}
      height={300}
      selection={selection}
      onClick={handleSelectionChange}
    />
  );
}
export default SelectOrganism;