Skip to content

Commit c211f00

Browse files
paulgirardpaulgirard
committed
[Filters] revamp style
- remove toggle filter state - delete buttons more visible - simplified dom structure + spacing review - decrease code preview size relates #164
1 parent e3fb0a0 commit c211f00

File tree

7 files changed

+83
-80
lines changed

7 files changed

+83
-80
lines changed

‎src/components/GraphFilters/FilteredGraphSummary.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { FC } from "react";
2+
import { useTranslation } from "react-i18next";
3+
4+
import { filteredGraphsAtom } from "../../core/graph";
5+
import { useReadAtom } from "../../core/utils/atoms";
6+
7+
export const FilteredGraphSummary: FC<{ filterIndex: number }> = ({ filterIndex }) => {
8+
const { t } = useTranslation();
9+
const filteredGraphs = useReadAtom(filteredGraphsAtom);
10+
const relatedGraph = filteredGraphs[filterIndex]?.graph;
11+
12+
return (
13+
<div className="small text-muted">
14+
{relatedGraph.order} {t("graph.model.nodes", { count: relatedGraph.order })}, {relatedGraph.size}{" "}
15+
{t("graph.model.edges", { count: relatedGraph.size })}
16+
</div>
17+
);
18+
};

‎src/components/GraphFilters/RangeFilter.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { RangeFilterType } from "../../core/filters/types";
99
import { inRangeIncluded } from "../../core/filters/utils";
1010
import { graphDatasetAtom, parentFilteredGraphAtom } from "../../core/graph";
1111
import { useReadAtom } from "../../core/utils/atoms";
12+
import { FilteredGraphSummary } from "./FilteredGraphSummary";
1213
import { findRanges, shortenNumber } from "./utils";
1314

1415
interface RangeValue {
@@ -205,7 +206,7 @@ export const RangeFilterEditor: FC<{ filter: RangeFilterType }> = ({ filter }) =
205206
replaceCurrentFilter({ ...filter, keepMissingValues: e.target.checked });
206207
}}
207208
/>
208-
<label className="from-check-label" htmlFor="keepMissingValues">
209+
<label className="from-check-label small" htmlFor="keepMissingValues">
209210
{t("filters.keepMissingValues")}
210211
</label>
211212
</div>
@@ -215,25 +216,26 @@ export const RangeFilterEditor: FC<{ filter: RangeFilterType }> = ({ filter }) =
215216

216217
export const RangeFilter: FC<{
217218
filter: RangeFilterType;
219+
filterIndex: number;
218220
active?: boolean;
219221
editMode?: boolean;
220-
}> = ({ filter, editMode }) => {
222+
}> = ({ filter, editMode, filterIndex, active }) => {
221223
const { t } = useTranslation();
222224

223225
return (
224-
<div>
226+
<>
225227
<div className="fs-5">
226228
{filter.field} ({t(`graph.model.${filter.itemType}`)})
227229
</div>
228-
{editMode ? (
229-
<RangeFilterEditor filter={filter} />
230-
) : (
231-
<div>
232-
<span className="fs-5">
230+
{!editMode && (
231+
<div className="flex-grow-1">
232+
<span className="fs-6">
233233
{filter.min ? `${filter.min}` : "∞"} - {filter.max ? `${filter.max}` : "∞"}
234234
</span>{" "}
235235
</div>
236236
)}
237-
</div>
237+
{active && <FilteredGraphSummary filterIndex={filterIndex} />}
238+
{editMode && <RangeFilterEditor filter={filter} />}
239+
</>
238240
);
239241
};

‎src/components/GraphFilters/ScriptFilter.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { useModal } from "../../core/modals";
1212
import { useReadAtom } from "../../core/utils/atoms";
1313
import { FunctionEditorModal } from "../../views/graphPage/modals/FunctionEditorModal";
1414
import { CodeEditorIcon } from "../common-icons";
15+
import { FilteredGraphSummary } from "./FilteredGraphSummary";
1516

1617
// eslint-disable-next-line no-new-func
1718
const nodeFilterCustomFn = new Function(`return (
@@ -38,9 +39,10 @@ const SCRIPT_JS_DOC = `/**
3839

3940
export const ScriptFilter: FC<{
4041
filter: ScriptFilterType;
42+
filterIndex: number;
4143
active?: boolean;
4244
editMode?: boolean;
43-
}> = ({ filter, editMode }) => {
45+
}> = ({ filter, editMode, active, filterIndex }) => {
4446
const { t } = useTranslation();
4547
const { openModal } = useModal();
4648
const { replaceCurrentFilter } = useFiltersActions();
@@ -51,6 +53,7 @@ export const ScriptFilter: FC<{
5153
<div className="fs-5">
5254
{t("filters.script")} ({t(`graph.model.${filter.itemType}`)})
5355
</div>
56+
{active && <FilteredGraphSummary filterIndex={filterIndex} />}
5457
<div className="position-relative">
5558
{filter.script && (
5659
<>
@@ -60,6 +63,7 @@ export const ScriptFilter: FC<{
6063
<div className="filler-fade-out position-absolute bottom-0"></div>
6164
</>
6265
)}
66+
6367
{editMode && (
6468
<div className={cx(filter.script && "bottom-0 position-absolute w-100")}>
6569
<button

‎src/components/GraphFilters/TermsFilter.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { graphDatasetAtom, parentFilteredGraphAtom } from "../../core/graph";
99
import { useReadAtom } from "../../core/utils/atoms";
1010
import { toString } from "../../core/utils/casting";
1111
import { DEFAULT_SELECT_PROPS } from "../consts";
12+
import { FilteredGraphSummary } from "./FilteredGraphSummary";
1213

1314
const TermsFilterEditor: FC<{ filter: TermsFilterType }> = ({ filter }) => {
1415
const parentGraph = useReadAtom(parentFilteredGraphAtom);
@@ -29,7 +30,7 @@ const TermsFilterEditor: FC<{ filter: TermsFilterType }> = ({ filter }) => {
2930
}, [filter, parentGraph]);
3031

3132
return (
32-
<>
33+
<div className="my-3 w-100">
3334
<Select
3435
{...DEFAULT_SELECT_PROPS}
3536
value={filter.terms ? Array.from(filter.terms).map((t) => ({ label: t, value: t })) : []}
@@ -53,36 +54,38 @@ const TermsFilterEditor: FC<{ filter: TermsFilterType }> = ({ filter }) => {
5354
replaceCurrentFilter({ ...filter, keepMissingValues: e.target.checked });
5455
}}
5556
/>
56-
<label className="from-check-label" htmlFor="keepMissingValues">
57+
<label className="from-check-label small" htmlFor="keepMissingValues">
5758
{t("filters.keepMissingValues")}
5859
</label>
5960
</div>
60-
</>
61+
</div>
6162
);
6263
};
6364

6465
export const TermsFilter: FC<{
6566
filter: TermsFilterType;
67+
filterIndex: number;
6668
active?: boolean;
6769
editMode?: boolean;
68-
}> = ({ filter, editMode }) => {
70+
}> = ({ filter, editMode, filterIndex, active }) => {
6971
const { t, i18n } = useTranslation();
7072

7173
//TODO: adapt language
7274
const listFormatter = new Intl.ListFormat(i18n.language, { style: "long", type: "conjunction" });
7375

7476
return (
75-
<div>
77+
<>
7678
<div className="fs-5">
7779
{filter.field} ({t(`graph.model.${filter.itemType}`)})
7880
</div>
79-
{editMode ? (
80-
<TermsFilterEditor filter={filter} />
81-
) : (
81+
82+
{active && <FilteredGraphSummary filterIndex={filterIndex} />}
83+
{!editMode && (
8284
<div>
8385
<span className="fs-5">{filter.terms ? listFormatter.format(filter.terms) : t("common.all")}</span>
8486
</div>
8587
)}
86-
</div>
88+
{editMode && <TermsFilterEditor filter={filter} />}
89+
</>
8790
);
8891
};

‎src/components/GraphFilters/index.tsx

Lines changed: 33 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
import cx from "classnames";
22
import { FC, useEffect, useState } from "react";
33
import { useTranslation } from "react-i18next";
4-
import { BsCheckSquare } from "react-icons/bs";
54
import { CgRemoveR } from "react-icons/cg";
6-
import { FiEdit } from "react-icons/fi";
7-
import { RiFilterLine, RiFilterOffLine } from "react-icons/ri";
85

96
import { useFilters, useFiltersActions, useGraphDataset } from "../../core/context/dataContexts";
107
import { FilterType } from "../../core/filters/types";
11-
import { filteredGraphsAtom } from "../../core/graph";
12-
import { useReadAtom } from "../../core/utils/atoms";
13-
import { GraphIcon } from "../common-icons";
148
import { FilterCreator } from "./FilterCreator";
159
import { RangeFilter } from "./RangeFilter";
1610
import { ScriptFilter } from "./ScriptFilter";
@@ -24,8 +18,6 @@ const FilterInStack: FC<{
2418
const filters = useFilters();
2519
const { openPastFilter, deleteFutureFilter, deletePastFilter, openFutureFilter } = useFiltersActions();
2620
const { t } = useTranslation();
27-
const filteredGraphs = useReadAtom(filteredGraphsAtom);
28-
const relatedGraph = filteredGraphs[filterIndex]?.graph;
2921

3022
const editMode = !!active && filterIndex === filters.past.length - 1;
3123
// internalEditMode is an internal state which is used to mimic edit/confirm state for the last filter
@@ -48,60 +40,42 @@ const FilterInStack: FC<{
4840
} else openFutureFilter(filterIndex);
4941
}}
5042
>
51-
<div className="d-flex justify-content-between align-items-start">
52-
<div className=" button-container">
53-
{/* filter downstream ongoing edition => disabled */}
54-
{!active && <RiFilterOffLine title={t("filters.desactivated").toString()} className="icon" />}
55-
{active && filterIndex !== filters.past.length - 1 && (
56-
<RiFilterLine title={t("filters.activated").toString()} className="icon" />
57-
)}
58-
{/* upstream filters => can be edited only if no other edit ongoing*/}
59-
{active && filterIndex === filters.past.length - 1 && (
60-
<div
61-
title={filterIndex === filters.past.length - 1 ? undefined : t("filters.no_concurrent_edit").toString()}
62-
>
63-
<button
64-
className="btn btn-icon"
65-
onClick={(e) => {
66-
e.stopPropagation();
67-
setInternalEditMode(!internalEditMode);
68-
}}
69-
title={t("common.edit").toString()}
70-
disabled={filterIndex !== filters.past.length - 1}
71-
>
72-
{internalEditMode ? <BsCheckSquare /> : <FiEdit />}
73-
</button>
74-
</div>
75-
)}
76-
</div>
77-
<div className="flex-grow-1">
78-
{filter.type === "range" && (
79-
<RangeFilter filter={filter} editMode={editMode && internalEditMode} active={active} />
80-
)}
81-
{filter.type === "terms" && (
82-
<TermsFilter filter={filter} editMode={editMode && internalEditMode} active={active} />
83-
)}
84-
{filter.type === "script" && (
85-
<ScriptFilter filter={filter} editMode={editMode && internalEditMode} active={active} />
86-
)}
87-
{active && relatedGraph && (
88-
<div className="small text-muted">
89-
{relatedGraph.order} {t("graph.model.nodes", { count: relatedGraph.order })}, {relatedGraph.size}{" "}
90-
{t("graph.model.edges", { count: relatedGraph.size })}
91-
</div>
92-
)}
93-
</div>
94-
<div className=" button-container">
43+
<div className="d-flex flex-column justify-content-between align-items-start">
44+
{filter.type === "range" && (
45+
<RangeFilter
46+
filter={filter}
47+
filterIndex={filterIndex}
48+
editMode={editMode && internalEditMode}
49+
active={active}
50+
/>
51+
)}
52+
{filter.type === "terms" && (
53+
<TermsFilter
54+
filter={filter}
55+
filterIndex={filterIndex}
56+
editMode={editMode && internalEditMode}
57+
active={active}
58+
/>
59+
)}
60+
{filter.type === "script" && (
61+
<ScriptFilter
62+
filter={filter}
63+
filterIndex={filterIndex}
64+
editMode={editMode && internalEditMode}
65+
active={active}
66+
/>
67+
)}
68+
<div className="w-100 d-flex justify-content-center align-items-center">
9569
<button
96-
className="btn btn-icon"
70+
className="btn btn-outline-dark border-0"
9771
onClick={(e) => {
9872
e.stopPropagation();
9973
if (active) deletePastFilter(filterIndex);
10074
else deleteFutureFilter(filterIndex);
10175
}}
10276
title={t("common.remove").toString()}
10377
>
104-
<CgRemoveR />
78+
<CgRemoveR /> {t("common.remove").toString()}
10579
</button>
10680
</div>
10781
</div>
@@ -129,14 +103,15 @@ const GraphFilters: FC = () => {
129103
return (
130104
<div className="panel-block-grow">
131105
<div
132-
className={cx("filter-item d-flex align-items-center", filters.past.length !== 0 && "cursor-pointer")}
106+
className={cx(
107+
"filter-item d-flex align-items-center",
108+
filters.past.length !== 0 && "cursor-pointer",
109+
filters.past.length === 0 && "edited",
110+
)}
133111
onClick={() => {
134112
if (filters.past.length !== 0) closeAllPastFilters();
135113
}}
136114
>
137-
<div className="button-container">
138-
<GraphIcon className="icon" />
139-
</div>
140115
<div>
141116
<div className="fs-5">{t("filters.full_graph")}</div>
142117
<div className="small text-muted">

‎src/styles/_filters.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
position: relative;
33

44
@extend .mt-2;
5-
@extend .px-1;
5+
@extend .px-2;
66
@extend .py-2;
77
&.inactive {
88
@extend .text-muted;

‎src/styles/_highlightjs.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22

33
div.code-thumb {
44
font-size: 10px;
5-
min-height: 100px;
6-
max-height: 150px;
5+
min-height: 80px;
6+
max-height: 120px;
77
overflow: hidden;
88
pre {
9+
margin-bottom: 0;
910
white-space: pre-wrap; /* css-3 */
1011
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
1112
white-space: -pre-wrap; /* Opera 4-6 */

0 commit comments

Comments
 (0)