Skip to content

Commit

Permalink
feat(vis-type: scatter): selecting points from multiple facets (#469)
Browse files Browse the repository at this point in the history
  • Loading branch information
oltionchampari authored Aug 16, 2024
1 parent 51d52ed commit 18ebcd2
Showing 1 changed file with 18 additions and 6 deletions.
24 changes: 18 additions & 6 deletions src/vis/scatter/ScatterVis.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function ScatterVis({
value: config.showLegend,
});
const [layout, setLayout] = useState<Partial<PlotlyTypes.Layout>>(null);

const [isShiftPressed, setIsShiftPressed] = useState(false);
const [isSelecting, setIsSelecting] = useState(false);

// TODO: This is a little bit hacky, Also notification should be shown to the user
Expand Down Expand Up @@ -293,7 +293,7 @@ export function ScatterVis({
}

return data.map((d) => {
const textIndices = !config.showLabelLimit ? (d.selectedpoints ?? []) : (d.selectedpoints ?? []).slice(0, config.showLabelLimit);
const textIndices = !config.showLabelLimit ? d.selectedpoints ?? [] : (d.selectedpoints ?? []).slice(0, config.showLabelLimit);
const text = config.showLabels === ELabelingOptions.ALWAYS ? d.text : isSelecting ? '' : (d.text ?? []).map((t, i) => (textIndices.includes(i) ? t : ''));

return { ...d, text };
Expand Down Expand Up @@ -388,23 +388,35 @@ export function ScatterVis({
}}
onUpdate={() => {
d3.select(id).selectAll('.legend').selectAll('.traces').style('opacity', 1);
window.addEventListener('keydown', (event) => {
if (event.key === 'Shift') {
setIsShiftPressed(true);
}
});
window.addEventListener('keyup', (event) => {
if (event.key === 'Shift') {
setIsShiftPressed(false);
}
});
}}
onSelecting={() => {
setIsSelecting(true);
}}
onSelected={(sel) => {
if (sel) {
let indices = [];
// @ts-ignore
if (sel.points[0]?.binNumber !== undefined) {
// @ts-ignore
const selInidices = sel.points?.map((d) => d?.pointIndices).flat(1);
const indices = sel.points[0]?.data?.customdata?.filter((_, i) => selInidices.includes(i)) as string[];
selectionCallback(indices);
indices = sel.points[0]?.data?.customdata?.filter((_, i) => selInidices.includes(i)) as string[];
} else {
selectionCallback(sel ? sel.points?.map((d) => (d as any).id) : []);
indices = sel.points?.map((d) => (d as any).id);
}
const selected = Array.from(new Set(isShiftPressed ? [...selectedList, ...indices] : indices));
selectionCallback(selected);
setIsSelecting(false);
setConfig({ ...config, selectedPointsCount: sel.points.length });
setConfig({ ...config, selectedPointsCount: selected.length });
}
}}
/>
Expand Down

0 comments on commit 18ebcd2

Please sign in to comment.