Select data

Selections are a fundamental part of Qlik’s Associative Engine. All fields and the associations between them are contained within the Associative Model. When you apply a selection you aren’t only applying a filter in the data model, but also exposing the associations between your data sources.

Applying selections

Selections can be applied with methods exposed on the model returned from the useModel hook.

Since a generic object can hold multiple hypercubes, you always need to specify which hypercube you want to select in by providing the JSON path of it as the first argument:

import { useModel, useEffect } from '@nebula.js/stardust';
// ...
component() {
  const model = useModel();

  useEffect(() => {
    model.selectHyperCubeCells('/qHyperCubeDef', [1], []);
  }, [model])
}

Selection patterns

There are two different patterns of selections: instant and modal.

Instant selections

As the name indicates, this type of pattern is immediate and filters both the source of the selections and everything that’s affected by it.

In the following example, as soon as a value is selected in the bar chart, the filtering is applied instantaneously and both charts are immediately updated with the filtered data:

Modal selections

When a modal selection is initiated, the source of the selection enters a form of modal state that allows a user to modify selections before confirming the changes.

In the following example, the user first selects one value in the bar chart, at which point other charts are updated just as before. The bar chart however still has all the data available and allows the user to select another value, before confirming the changes and updating the bar chart itself:

To implement this type of pattern you need to useSelections instead of useModel and follow a few simple steps:

1. Enter the modal state by calling begin.
2. Select values using select and the method selectHyperCubeCells.
3. Provide visual feedback to the user of what has been selected by for example changing the opacity of selected values.
4. Keep track of when the modal state has been exited to reset the visual feedback.

import { useSelections, useElement, useEffect } from '@nebula.js/stardust';
// ...
component() {
  const element = useElement();
  const selections = useSelections();

  useEffect(() => {
    const clicked = () => {
      const clickedOnRow = 1;
      const column = 0;

      // 1. enter modal state if not already in it
      if (!selections.isActive()) {
        selections.begin(['/qHyperCubeDef']);
      }
      // 2. select the clicked row
      selections.select({
        method: "selectHyperCubeCells",
        params: ['/qHyperCubeDef', [clickedOnRow], [column]]
      });
    }

    element.addEventListener('click', clicked);
    return () => {
      element.removeEventListener('click', clicked);
    }
  }, [element, model, selections]);

  useEffect(() => {
    if (layout.qSelectionInfo.qInSelections) {
      // 3. update with visual feedback on active selections
      // YOUR CODE HERE
    } else {
      // 4. normal update
      // YOUR CODE HERE
    }
  }, [layout]);
}