Skip to content

Commit db476d4

Browse files
patconclaude
andcommitted
Show ungrouped dots as light gray when excluded from analysis
When the ungrouped toggle is inactive, unpainted map dots change from black to light gray (#cccccc) to visually reinforce the exclusion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 3eccaad commit db476d4

2 files changed

Lines changed: 8 additions & 4 deletions

File tree

src/components/convo-explorer/App.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -837,6 +837,7 @@ export const App: React.FC<AppProps> = ({ testAnimation = false, kedroBaseUrl, i
837837
preloadedPipelineData={preloadedData?.pipelineData}
838838
onLoadFile={onLoadFile}
839839
displayMask={showFilteredParticipants ? undefined : displayMask}
840+
unpaintedColor={isUnpaintedGrouped ? undefined : "#cccccc"}
840841
/>
841842
</div>
842843
</div>

src/components/convo-explorer/D3Map.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ type D3MapProps = {
5454
onLoadFile?: () => void;
5555
/** Display mask parallel to data: true = visible, false = hidden. When undefined, all points visible. */
5656
displayMask?: boolean[];
57+
/** Color for unpainted points in groups mode. Defaults to UNPAINTED_COLOR (black). */
58+
unpaintedColor?: string;
5759
};
5860

5961
const PREFERRED_KEDRO_PIPELINE = 'mean_localmap_bestkmeans';
@@ -80,6 +82,7 @@ export const D3Map: React.FC<D3MapProps> = ({
8082
preloadedPipelineData,
8183
onLoadFile,
8284
displayMask,
85+
unpaintedColor = UNPAINTED_COLOR,
8386
}) => {
8487
const svgRef = React.useRef<SVGSVGElement>(null);
8588
const containerRef = React.useRef<d3.Selection<SVGGElement, unknown, null, undefined> | null>(null);
@@ -273,13 +276,13 @@ export const D3Map: React.FC<D3MapProps> = ({
273276
}
274277
}
275278

276-
if (colorValue == null) {
277-
return UNPAINTED_COLOR;
279+
if (colorValue == null || colorValue === UNPAINTED_VALUE) {
280+
return unpaintedColor;
278281
}
279282

280283
// For groups/votes mode, treat colorValue as palette index
281284
return palette[colorValue % palette.length];
282-
}, [layerMode, metricsType, palette, continuousColorScale]);
285+
}, [layerMode, metricsType, palette, continuousColorScale, unpaintedColor]);
283286

284287
// --- Point opacity helper for display mask ---
285288
const getPointOpacity = React.useCallback((index: number) => {
@@ -797,7 +800,7 @@ export const D3Map: React.FC<D3MapProps> = ({
797800
.attr("opacity", displayMask
798801
? (d: any) => getPointOpacity(d.originalIndex)
799802
: 1);
800-
}, [pointColors, palette, layerMode, getPointColor, getPointOpacity, displayMask]);
803+
}, [pointColors, palette, layerMode, getPointColor, getPointOpacity, displayMask, unpaintedColor]);
801804

802805
function pointInPolygon([x, y]: [number, number], vs: [number, number][]) {
803806
let inside = false;

0 commit comments

Comments
 (0)