Skip to content
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

Make more history content searchable #3474

Merged
merged 3 commits into from
Jun 24, 2024
Merged

Make more history content searchable #3474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92d768a
Make more history content searchable
Kadrian Jun 24, 2024
e087d85
Extract search into function
Kadrian Jun 24, 2024
b7d2c6c
Reorganize timeline data logic and search logic
Kadrian Jun 24, 2024
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
195 changes: 6 additions & 189 deletions frontend/src/js/entity-history/History.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import styled from "@emotion/styled";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { useHotkeys } from "react-hotkeys-hook";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";

import type {
EntityInfo,
HistorySources,
ResultUrlWithLabel,
SelectOptionT,
TimeStratifiedInfo,
Expand All @@ -24,13 +23,16 @@ import { EntityHeader } from "./EntityHeader";
import InteractionControl from "./InteractionControl";
import type { LoadingPayload } from "./LoadHistoryDropzone";
import { Navigation } from "./Navigation";
import SearchControl from "./SearchControl";
import SourcesControl from "./SourcesControl";
import { Timeline } from "./Timeline";
import VisibilityControl from "./VisibilityControl";
import { useUpdateHistorySession } from "./actions";
import { EntityId } from "./reducer";
import { TimelineSearchProvider } from "./timelineSearchState";
import SearchControl from "./timeline-search/SearchControl";
import { TimelineSearchProvider } from "./timeline-search/timelineSearchState";
import { useEntityStatus } from "./useEntityStatus";
import { useOpenCloseInteraction } from "./useOpenCloseInteraction";
import { useSourcesControl } from "./useSourcesControl";

const FullScreen = styled("div")`
position: fixed;
Expand Down Expand Up @@ -270,188 +272,3 @@ export const History = () => {
</TimelineSearchProvider>
);
};

export const useDefaultStatusOptions = () => {
const { t } = useTranslation();

return useMemo(
() => [
{
label: t("history.options.check"),
value: t("history.options.check") as string,
},
{
label: t("history.options.noCheck"),
value: t("history.options.noCheck") as string,
},
],
[t],
);
};

const useEntityStatus = ({
currentEntityId,
}: {
currentEntityId: string | null;
}) => {
const defaultStatusOptions = useDefaultStatusOptions();
const [entityStatusOptions, setEntityStatusOptions] =
useState<SelectOptionT[]>(defaultStatusOptions);

const [entityIdsStatus, setEntityIdsStatus] = useState<EntityIdsStatus>({});
const setCurrentEntityStatus = useCallback(
(value: SelectOptionT[]) => {
if (!currentEntityId) return;

setEntityIdsStatus((curr) => ({
...curr,
[currentEntityId]: value,
}));
},
[currentEntityId],
);
const currentEntityStatus = useMemo(
() => (currentEntityId ? entityIdsStatus[currentEntityId] || [] : []),
[currentEntityId, entityIdsStatus],
);

return {
entityStatusOptions,
setEntityStatusOptions,
entityIdsStatus,
setEntityIdsStatus,
currentEntityStatus,
setCurrentEntityStatus,
};
};

const useSourcesControl = () => {
const [sourcesFilter, setSourcesFilter] = useState<SelectOptionT[]>([]);

const sources = useSelector<StateT, HistorySources>(
(state) => state.entityHistory.defaultParams.sources,
);
const allSourcesOptions = useMemo(
() =>
sources.all.map((s) => ({
label: s.label,
value: s.label, // Gotta use label since the value in the entity CSV is the source label as well
})),
[sources.all],
);
const defaultSourcesOptions = useMemo(
() =>
sources.default.map((s) => ({
label: s.label,
value: s.label, // Gotta use label since the value in the entity CSV is the source label as well
})),
[sources.default],
);

// TODO: Figure out whether we still need the current entity unique sources
//
// const currentEntityUniqueSources = useSelector<StateT, string[]>(
// (state) => state.entityHistory.currentEntityUniqueSources,
// );
// const currentEntitySourcesOptions = useMemo(
// () =>
// currentEntityUniqueSources.map((s) => ({
// label: s,
// value: s,
// })),
// [currentEntityUniqueSources],
// );

const sourcesSet = useMemo(
() => new Set(sourcesFilter.map((o) => o.value as string)),
[sourcesFilter],
);

useEffect(
function takeDefaultIfEmpty() {
setSourcesFilter((curr) =>
curr.length === 0 ? defaultSourcesOptions : curr,
);
},
[defaultSourcesOptions],
);

return {
options: allSourcesOptions,
sourcesSet,
sourcesFilter,
setSourcesFilter,
};
};

const useOpenCloseInteraction = () => {
const [isOpen, setIsOpen] = useState<Record<string, boolean>>({});
const isOpenRef = useRef(isOpen);
isOpenRef.current = isOpen;

const toId = useCallback(
(year: number, quarter?: number) => `${year}-${quarter}`,
[],
);

const getIsOpen = useCallback(
(year: number, quarter?: number) => {
if (quarter) {
return isOpen[toId(year, quarter)];
} else {
return [1, 2, 3, 4].every((q) => isOpen[toId(year, q)]);
}
},
[isOpen, toId],
);

const toggleOpenYear = useCallback(
(year: number) => {
const quarters = [1, 2, 3, 4].map((quarter) => toId(year, quarter));
const wasOpen = quarters.some((quarter) => isOpenRef.current[quarter]);

setIsOpen((prev) => ({
...prev,
...Object.fromEntries(quarters.map((quarter) => [quarter, !wasOpen])),
}));
},
[toId],
);

const toggleOpenQuarter = useCallback(
(year: number, quarter: number) => {
const id = toId(year, quarter);

setIsOpen((prev) => ({ ...prev, [id]: !prev[id] }));
},
[toId],
);

const closeAll = useCallback(() => {
setIsOpen({});
}, []);

const openAll = useCallback(() => {
const lastYearsToUse = 20;
const currYear = new Date().getFullYear();
const years = [...Array(lastYearsToUse).keys()].map((i) => currYear - i);

const newIsOpen: Record<string, boolean> = {};

for (const year of years) {
for (const quarter of [1, 2, 3, 4]) {
newIsOpen[toId(year, quarter)] = true;
}
}

setIsOpen(newIsOpen);
}, [toId]);

return {
getIsOpen,
toggleOpenYear,
toggleOpenQuarter,
closeAll,
openAll,
};
};
2 changes: 1 addition & 1 deletion frontend/src/js/entity-history/SearchEntities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ import {
MultiSelectFilterWithValueType,
} from "../standard-query-editor/types";

import { useDefaultStatusOptions } from "./History";
import { LoadingPayload } from "./LoadHistoryDropzone";
import { useDefaultStatusOptions } from "./useDefaultStatusOptions";

export const SearchEntites = ({
onLoad,
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/js/entity-history/TabbableTimeStratifiedInfos.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import SmallTabNavigation from "../small-tab-navigation/SmallTabNavigation";

import { TimeStratifiedChart } from "./TimeStratifiedChart";
import { TimeStratifiedConceptChart } from "./TimeStratifiedConceptChart";
import { isConceptColumn, isMoneyColumn } from "./timeline/util";
import { isConceptColumn, isMoneyColumn } from "./timeline/util/util";

const Container = styled("div")`
align-self: flex-start;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/js/entity-history/TimeStratifiedChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { Bar } from "react-chartjs-2";
import { TimeStratifiedInfo } from "../api/types";
import { exists } from "../common/helpers/exists";

import { formatCurrency } from "./timeline/util";
import { formatCurrency } from "./timeline/util/util";

const TRUNCATE_X_AXIS_LABELS_LEN = 18;

Expand Down
Loading
Loading