Skip to content

feat: mc options sorting and count #4444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cemreinanc wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: mc options sorting and count #4444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5d0291
mc choice count and sorting
cemreinanc Mar 1, 2026
0158a58
fix unusual behavior and reuse logic
cemreinanc Mar 3, 2026
f439c99
modify timeline items selection logic and dropdown behavior
cemreinanc Mar 10, 2026
b58da58
Merge remote-tracking branch 'origin/main' into feat/4318-mc-options-…
cemreinanc Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions front_end/src/app/(main)/questions/[id]/components/group_timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { VictoryThemeDefinition } from "victory";

import MultiChoicesChartView from "@/app/(main)/questions/[id]/components/multiple_choices_chart_view";
import CPRevealTime from "@/components/cp_reveal_time";
import { getEffectiveVisibleCount } from "@/constants/questions";
import { useAuth } from "@/contexts/auth_context";
import useTimestampCursor from "@/hooks/use_timestamp_cursor";
import { TimelineChartZoomOption } from "@/types/charts";
Expand Down Expand Up @@ -43,7 +44,6 @@ type Props = QuestionsDataProps & {

preselectedQuestionId?: number;
hideCP?: boolean;
maxVisibleCheckboxes?: number;

defaultZoom?: TimelineChartZoomOption;
chartHeight?: number;
Expand All @@ -69,7 +69,6 @@ const GroupTimeline: FC<Props> = ({

preselectedQuestionId,
hideCP,
maxVisibleCheckboxes = 3,

defaultZoom,
chartHeight,
Expand Down Expand Up @@ -98,6 +97,11 @@ const GroupTimeline: FC<Props> = ({
return [...open, ...other];
}, [baseOptionQuestions, prioritizeOpen]);

const maxVisibleCheckboxes = useMemo(
() => getEffectiveVisibleCount(optionQuestions.length),
[optionQuestions.length]
);

const forecastAvailability = getGroupForecastAvailability(optionQuestions);
const timestamps = useMemo(
() =>
Expand Down
66 changes: 51 additions & 15 deletions ...app/(main)/questions/[id]/components/multiple_choices_chart_view/choices_legend/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import { useTranslations } from "next-intl";
import { FC, useMemo } from "react";
import { FC, useCallback, useEffect, useMemo, useState } from "react";

import ChoiceCheckbox from "@/components/choice_checkbox";
import Button from "@/components/ui/button";
import Checkbox from "@/components/ui/checkbox";
import useAppTheme from "@/hooks/use_app_theme";
import { ChoiceItem } from "@/types/choices";
import cn from "@/utils/core/cn";
import { truncateLabel } from "@/utils/formatters/string";

type Props = {
choices: ChoiceItem[];
onChoiceChange: (choice: string, checked: boolean) => void;
onChoiceHighlight: (choice: string, highlighted: boolean) => void;
onToggleAll: (checked: boolean) => void;
maxLegendChoices: number;
othersToggle?: boolean;
onOthersToggle?: (checked: boolean) => void;
othersDisabled?: boolean;
Expand All @@ -27,23 +27,41 @@ const ChoicesLegend: FC<Props> = ({
onChoiceChange,
onChoiceHighlight,
onToggleAll,
maxLegendChoices,
othersToggle,
onOthersToggle,
othersDisabled,
}) => {
const t = useTranslations();
const { getThemeColor } = useAppTheme();
const mcMode = typeof othersToggle === "boolean" && !!onOthersToggle;
const { legendChoices, dropdownChoices } = useMemo(() => {
const left = choices.slice(0, maxLegendChoices);
const right = choices.slice(maxLegendChoices);
if (mcMode) {
const leftOff = left.filter((c) => !c.active);
return { legendChoices: left, dropdownChoices: [...leftOff, ...right] };
}
return { legendChoices: left, dropdownChoices: right };
}, [choices, maxLegendChoices, mcMode]);

const [isDropdownOpen, setIsDropdownOpen] = useState(false);

const [pinnedChoices, setPinnedChoices] = useState<Set<string>>(
() => new Set(choices.filter((c) => c.active).map((c) => c.choice))
);
useEffect(() => {
if (isDropdownOpen) return;
setPinnedChoices((prev) => {
const next = new Set(prev);
let changed = false;
choices.forEach((c) => {
if (c.active && !next.has(c.choice)) {
next.add(c.choice);
changed = true;
}
});
return changed ? next : prev;
});
}, [choices, isDropdownOpen]);
Comment on lines +43 to +56
Copy link
Contributor

@ncarazon ncarazon Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new pinnedChoices state only adds choices but never removes them. If a user toggles many different choices on/off over time, the legend accumulates all ever-active choices. Is this intentional?

Copy link
Contributor Author

@cemreinanc cemreinanc Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes intentional.

Any item clicked on from the others list promotes to the main legend after the dropdown closes so that users can see the names and colors of the visible items. If users uncheck the legend item, it shouldn't be instantly hidden because maybe they will want to activate it again quickly after, so hiding it instantly will be a bad UX for users. -- Solution could be adding timeout and hiding after that but I found that unnecessary as it will be returned to original state after page navigation.


const { legendChoices, dropdownChoices } = useMemo(
() => ({
legendChoices: choices.filter((c) => pinnedChoices.has(c.choice)),
dropdownChoices: choices.filter((c) => !pinnedChoices.has(c.choice)),
}),
[choices, pinnedChoices]
);

const areAllSelected = useMemo(() => {
const selectedCount = choices.reduce(
Expand All @@ -58,20 +76,24 @@ const ChoicesLegend: FC<Props> = ({
[t, dropdownChoices.length]
);

const handleDropdownOpenChange = useCallback((open: boolean) => {
setIsDropdownOpen(open);
}, []);

return (
<div className="relative flex flex-wrap items-center justify-center gap-[14px] text-xs font-normal">
<div className="relative flex flex-wrap items-center gap-x-3.5 gap-y-2 text-xs font-normal">
{legendChoices.map(({ label, choice, color, active }, idx) => (
<ChoiceCheckbox
key={`multiple-choice-legend-${choice}-${idx}`}
label={label || choice}
label={truncateLabel(label || choice, 30)}
color={color.DEFAULT}
Comment on lines 85 to 89
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Truncate the dropdown labels too.

Line 88 fixes the pinned legend chips, but hidden choices still render label || choice in the popover. Long MC labels can still blow out the dropdown width, so the truncation part of this change is only half-done.

Suggested follow-up 
-                        label={label || choice}
+                        label={truncateLabel(label || choice, 30)}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@front_end/src/app/`(main)/questions/[id]/components/multiple_choices_chart_view/choices_legend/index.tsx
around lines 85 - 89, The legend popover/dropdown still renders full labels for
hidden choices; update the popover item rendering to use the same truncation as
the pinned chips by passing truncateLabel(label || choice, 30) instead of label
|| choice. Locate the popover/dropdown mapping where hidden legend items are
rendered (the code near legendChoices.map / ChoiceCheckbox in
choices_legend/index.tsx) and replace the raw label with truncateLabel(...),
ensuring any component props or keys that display text (e.g., ChoiceCheckbox or
the dropdown item renderer) receive the truncated string.

checked={active}
onChange={(checked) => onChoiceChange(choice, checked)}
onHighlight={(highlighted) => onChoiceHighlight(choice, highlighted)}
/>
))}
{!!dropdownChoices.length && (
<div className="flex items-center gap-1 md:ml-auto">
<div className="flex items-center gap-1">
{mcMode && (
<Checkbox
checked={!!othersToggle}
Expand All @@ -89,6 +111,10 @@ const ChoicesLegend: FC<Props> = ({
<Popover className="relative">
{({ open }) => (
<>
<PopoverOpenSync
open={open}
onChange={handleDropdownOpenChange}
/>
{!mcMode ? (
<PopoverButton
as={Button}
Expand Down Expand Up @@ -146,4 +172,14 @@ const ChoicesLegend: FC<Props> = ({
);
};

const PopoverOpenSync: FC<{
open: boolean;
onChange: (open: boolean) => void;
}> = ({ open, onChange }) => {
useEffect(() => {
onChange(open);
}, [open, onChange]);
return null;
};

export default ChoicesLegend;
116 changes: 17 additions & 99 deletions front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,17 @@ import { VictoryThemeDefinition } from "victory";
import GroupChart from "@/components/charts/group_chart";
import MultipleChoiceChart from "@/components/charts/multiple_choice_chart";
import MCPredictionsTooltip from "@/components/charts/primitives/mc_predictions_tooltip";
import { METAC_COLORS } from "@/constants/colors";
import { getEffectiveVisibleCount } from "@/constants/questions";
import { useAuth } from "@/contexts/auth_context";
import useChartTooltip from "@/hooks/use_chart_tooltip";
import { TickFormat, TimelineChartZoomOption } from "@/types/charts";
import { ChoiceItem, ChoiceTooltipItem } from "@/types/choices";
import { ForecastAvailability, QuestionType, Scaling } from "@/types/question";
import cn from "@/utils/core/cn";
import { buildChoicesWithOthers } from "@/utils/questions/choices";

import ChoicesLegend from "./choices_legend";

const MAX_VISIBLE_CHECKBOXES = 3;

type Props = {
choiceItems: ChoiceItem[];
tooltipTitle?: string;
Expand Down Expand Up @@ -94,12 +93,13 @@ const MultiChoicesChartView: FC<Props> = ({
);
}, [chartHeight]);

const maxPrimary = embedMode ? 2 : MAX_VISIBLE_CHECKBOXES;
const maxPrimary = embedMode
? 2
: getEffectiveVisibleCount(choiceItems.length);
const showOthersToggle = isMC && choiceItems.length > maxPrimary;

const normalizedInitRef = useRef(false);
useEffect(() => {
if (!isMC) return;
if (normalizedInitRef.current) return;
if (!choiceItems.length) return;
const updated = choiceItems.map((it, idx) =>
Expand All @@ -111,7 +111,7 @@ const MultiChoicesChartView: FC<Props> = ({
if (changed) onChoiceItemsUpdate(updated);
normalizedInitRef.current = true;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isMC, choiceItems, maxPrimary, onChoiceItemsUpdate]);
}, [choiceItems, maxPrimary, onChoiceItemsUpdate]);
const computeOthersVisible = useCallback(
(items: ChoiceItem[]) => {
if (!isMC || items.length <= maxPrimary) return false;
Expand Down Expand Up @@ -173,45 +173,21 @@ const MultiChoicesChartView: FC<Props> = ({

const toggleSelectAll = useCallback(
(isAllSelected: boolean) => {
if (isMC && choiceItems.length > maxPrimary) {
const left = choiceItems.slice(0, maxPrimary);
const leftInactive = new Set(
left.filter((c) => !c.active).map((c) => c.choice)
);
const rightChoices = new Set(
choiceItems.slice(maxPrimary).map((c) => c.choice)
);
const dropdownSet = new Set<string>([...leftInactive, ...rightChoices]);
const nextActive = !isAllSelected;
onChoiceItemsUpdate(
choiceItems.map((item) =>
dropdownSet.has(item.choice)
? { ...item, active: nextActive, highlighted: false }
: item
)
);
} else {
if (isAllSelected) {
onChoiceItemsUpdate(
choiceItems.map((item) => ({
...item,
active: false,
highlighted: false,
}))
);
} else {
onChoiceItemsUpdate(
choiceItems.map((item) => ({ ...item, active: true }))
);
}
}
const nextActive = !isAllSelected;
onChoiceItemsUpdate(
choiceItems.map((item) => ({
...item,
active: nextActive,
highlighted: false,
}))
);
},
[isMC, choiceItems, maxPrimary, onChoiceItemsUpdate]
[choiceItems, onChoiceItemsUpdate]
);

const chartChoiceItems = useMemo(
() => (isMC ? buildChartChoiceItems(choiceItems, embedMode) : choiceItems),
[isMC, choiceItems, embedMode]
() => (isMC ? buildChoicesWithOthers(choiceItems) : choiceItems),
[isMC, choiceItems]
);

const totalActiveCount = useMemo(
Expand Down Expand Up @@ -313,7 +289,6 @@ const MultiChoicesChartView: FC<Props> = ({
onChoiceChange={handleChoiceChange}
onChoiceHighlight={handleChoiceHighlight}
onToggleAll={toggleSelectAll}
maxLegendChoices={embedMode ? 2 : MAX_VISIBLE_CHECKBOXES}
othersToggle={showOthersToggle ? !timelineMode : undefined}
onOthersToggle={
showOthersToggle
Expand Down Expand Up @@ -385,63 +360,6 @@ function resolveDefaultZoom(
);
}

function buildChartChoiceItems(
all: ChoiceItem[],
embedMode: boolean
): ChoiceItem[] {
const maxPrimary = embedMode ? 2 : MAX_VISIBLE_CHECKBOXES;
const primary = all.slice(0, maxPrimary);
const right = all.slice(maxPrimary);
const series: ChoiceItem[] = [];
primary.forEach((p) => {
if (p.active) series.push(p);
});
right.forEach((r) => {
if (r.active) series.push(r);
});

const pool = [
...primary.filter((p) => !p.active),
...right.filter((r) => !r.active),
];
if (pool.length === 0) return series.length ? series : primary;

const aggTs = pool[0]?.aggregationTimestamps ?? [];
const userTs = pool[0]?.userTimestamps ?? [];

const sumNullable = (vals: Array<number | null | undefined>) => {
let sum = 0;
let hasAny = false;
for (const v of vals) {
if (v != null) {
sum += v;
hasAny = true;
}
}
return hasAny ? Number(sum.toFixed(6)) : null;
};

const aggregationValues = aggTs.map((_, i) =>
sumNullable(pool.map((o) => o.aggregationValues[i]))
);
const userValues = userTs.map((_, i) =>
sumNullable(pool.map((o) => o.userValues[i]))
);

const othersItem = {
choice: "Others",
color: METAC_COLORS.gray["400"],
active: true,
highlighted: false,
aggregationTimestamps: aggTs,
aggregationValues,
userTimestamps: userTs,
userValues,
} as unknown as ChoiceItem;

return [...series, othersItem];
}

function getSingleActive(all: ChoiceItem[]): ChoiceItem | null {
const actives = all.filter((c) => c.active);
return actives.length === 1 ? actives[0] ?? null : null;
Expand Down
5 changes: 4 additions & 1 deletion front_end/src/components/consumer_post_card/group_forecast_card/numeric_forecast_card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { isNil } from "lodash";
import { useLocale, useTranslations } from "next-intl";
import { FC, useState } from "react";

import { getEffectiveVisibleCount } from "@/constants/questions";
import { PostStatus, PostWithForecasts } from "@/types/post";
import { QuestionType, Scaling } from "@/types/question";
import { getPredictionDisplayValue } from "@/utils/formatters/prediction";
Expand All @@ -23,7 +24,6 @@ type Props = {
};

const NumericForecastCard: FC<Props> = ({ post, forceColorful }) => {
const visibleChoicesCount = 3;
const locale = useLocale();
const t = useTranslations();
const [expanded, setExpanded] = useState(false);
Expand All @@ -33,6 +33,9 @@ const NumericForecastCard: FC<Props> = ({ post, forceColorful }) => {
}

const isDateGroup = checkGroupOfQuestionsPostType(post, QuestionType.Date);
const visibleChoicesCount = getEffectiveVisibleCount(
post.group_of_questions?.questions?.length ?? 0
);

const choices = generateChoiceItemsFromGroupQuestions(
post.group_of_questions,
Expand Down
Loading
Loading