Skip to content

Commit 8c5a2ee

Browse files
sim51sim51
committed
WIP!
1 parent 3049a3a commit 8c5a2ee

File tree

17 files changed

+124
-91
lines changed

17 files changed

+124
-91
lines changed

‎packages/gephi-lite/src/components/GraphAppearance/color/ColorItem.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ItemDataField } from "@gephi/gephi-lite-sdk";
22
import { isEqual } from "lodash";
33
import { FC, useMemo } from "react";
44
import { useTranslation } from "react-i18next";
5-
import Select from "react-select";
65

76
import { Color } from "../../../core/appearance/types";
87
import { DEFAULT_EDGE_COLOR, DEFAULT_NODE_COLOR, DEFAULT_SHADING_COLOR } from "../../../core/appearance/utils";
@@ -16,7 +15,7 @@ import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../..
1615
import { FieldModel } from "../../../core/graph/types";
1716
import { uniqFieldvaluesAsStrings } from "../../../core/graph/utils";
1817
import { ItemType } from "../../../core/types";
19-
import { DEFAULT_SELECT_PROPS } from "../../consts";
18+
import { Select } from "../../forms/Select";
2019
import { ColorFixedEditor } from "./ColorFixedEditor";
2120
import { ColorPartitionEditor } from "./ColorPartitionEditor";
2221
import { ColorRankingEditor } from "./ColorRankingEditor";
@@ -105,7 +104,6 @@ export const ColorItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
105104
<h3 className="fs-5">{t("appearance.color.title")}</h3>
106105
<label htmlFor={`${itemType}-colorMode`}>{t("appearance.color.set_color_from")}</label>
107106
<Select<ColorOption>
108-
{...DEFAULT_SELECT_PROPS}
109107
id={`${itemType}-colorMode`}
110108
options={options}
111109
value={selectedOption}

‎packages/gephi-lite/src/components/GraphAppearance/color/ShadingColorEditor.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { ItemDataField } from "@gephi/gephi-lite-sdk";
22
import { FC, useMemo } from "react";
33
import { useTranslation } from "react-i18next";
4-
import Select from "react-select";
54

65
import { ShadingColor } from "../../../core/appearance/types";
76
import { useGraphDataset } from "../../../core/context/dataContexts";
87
import { staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
98
import { ItemType } from "../../../core/types";
109
import ColorPicker from "../../ColorPicker";
11-
import { DEFAULT_SELECT_PROPS } from "../../consts";
10+
import { Select } from "../../forms/Select";
1211

1312
type Option = { value: ItemDataField; label: string };
1413
function stringToOption(field: ItemDataField): Option {
@@ -42,7 +41,6 @@ export const ShadingColorEditor: FC<{
4241
{t("appearance.color.shading_attribute", { items: t(`graph.model.${itemType}`) })}
4342
</label>
4443
<Select<Option>
45-
{...DEFAULT_SELECT_PROPS}
4644
id={`${itemType}-shadingColorAttribute`}
4745
options={fieldOptions}
4846
value={stringToOption(color.field)}

‎packages/gephi-lite/src/components/GraphAppearance/label/LabelSizeItem.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { capitalize } from "lodash";
22
import { FC, useMemo } from "react";
33
import { useTranslation } from "react-i18next";
4-
import Select from "react-select";
54

65
import { DEFAULT_EDGE_LABEL_SIZE, DEFAULT_NODE_LABEL_SIZE } from "../../../core/appearance/utils";
76
import { useAppearance, useAppearanceActions } from "../../../core/context/dataContexts";
87
import { ItemType } from "../../../core/types";
9-
import { DEFAULT_SELECT_PROPS } from "../../consts";
8+
import { Select } from "../../forms/Select";
109
import { SliderInput } from "../../forms/TypedInputs";
1110

1211
export const LabelSizeItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
@@ -32,7 +31,6 @@ export const LabelSizeItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
3231
<div className="panel-block">
3332
<label htmlFor={`${itemType}-labelSizesMode`}>{t("appearance.labels.set_labels_size_from")}</label>
3433
<Select
35-
{...DEFAULT_SELECT_PROPS}
3634
id={`${itemType}-labelSizesMode`}
3735
options={labelSizeOptions}
3836
value={selectedOption}

‎packages/gephi-lite/src/components/GraphAppearance/label/StringAttrItem.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { ItemDataField } from "@gephi/gephi-lite-sdk";
22
import { FC, useCallback, useMemo } from "react";
33
import { useTranslation } from "react-i18next";
4-
import Select from "react-select";
54

65
import { StringAttr } from "../../../core/appearance/types";
76
import {
@@ -13,7 +12,7 @@ import {
1312
import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
1413
import { FieldModel } from "../../../core/graph/types";
1514
import { ItemType } from "../../../core/types";
16-
import { DEFAULT_SELECT_PROPS } from "../../consts";
15+
import { Select } from "../../forms/Select";
1716

1817
type LabelOption =
1918
| { value: string; type: "none" | "data" | "fixed"; field?: undefined; label: string }
@@ -72,8 +71,7 @@ export const StringAttrItem: FC<{ itemType: ItemType; itemKey: "images" | "label
7271
<div className="panel-block">
7372
<h3 className="fs-5">{t(`appearance.${itemKey}.title`)}</h3>
7473
<label htmlFor={`${itemType}-${itemKey}sMode`}>{t(`appearance.${itemKey}.set_labels_from`)}</label>
75-
<Select<LabelOption>
76-
{...DEFAULT_SELECT_PROPS}
74+
<Select<LabelOption | null>
7775
id={`${itemType}-labelsMode`}
7876
options={labelOptions}
7977
value={selectedLabelOption}

‎packages/gephi-lite/src/components/GraphAppearance/size/SizeItem.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ItemDataField } from "@gephi/gephi-lite-sdk";
22
import { isEqual } from "lodash";
33
import { FC, useMemo } from "react";
44
import { useTranslation } from "react-i18next";
5-
import Select from "react-select";
65

76
import { Size } from "../../../core/appearance/types";
87
import { DEFAULT_EDGE_SIZE, DEFAULT_NODE_SIZE } from "../../../core/appearance/utils";
@@ -15,7 +14,7 @@ import {
1514
import { staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
1615
import { FieldModel } from "../../../core/graph/types";
1716
import { ItemType } from "../../../core/types";
18-
import { DEFAULT_SELECT_PROPS } from "../../consts";
17+
import { Select } from "../../forms/Select";
1918
import { SizeFixedEditor } from "./SizeFixedEditor";
2019
import { SizeRankingEditor } from "./SizeRankingEditor";
2120

@@ -79,7 +78,6 @@ export const SizeItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
7978
<h3 className="fs-5">{t("appearance.size.title")}</h3>
8079
<label htmlFor={`${itemType}-sizeMode`}>{t("appearance.size.set_size_from")}</label>
8180
<Select<SizeOption>
82-
{...DEFAULT_SELECT_PROPS}
8381
id={`${itemType}-sizeMode`}
8482
options={options}
8583
value={selectedOption}

‎packages/gephi-lite/src/components/GraphAppearance/zIndex/EdgesZIndexItem.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { ItemDataField } from "@gephi/gephi-lite-sdk";
22
import { FC, useMemo } from "react";
33
import { useTranslation } from "react-i18next";
4-
import Select from "react-select";
54

65
import {
76
useAppearance,
@@ -12,7 +11,7 @@ import {
1211
import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
1312
import { FieldModel } from "../../../core/graph/types";
1413
import { ItemType } from "../../../core/types";
15-
import { DEFAULT_SELECT_PROPS } from "../../consts";
14+
import { Select } from "../../forms/Select";
1615

1716
type LabelOption =
1817
| { value: string; type: "none"; field?: undefined; label: string }
@@ -54,8 +53,7 @@ export const EdgesZIndexItem: FC = () => {
5453
<h3 className="fs-5">{t(`appearance.zIndex.title`)}</h3>
5554
<p className="text-muted">{t(`appearance.zIndex.description`, { items: t("graph.model.edges") })}</p>
5655
<label htmlFor={`${itemType}-zIndexMode`}>{t(`appearance.zIndex.set_values_from`)}</label>
57-
<Select<LabelOption>
58-
{...DEFAULT_SELECT_PROPS}
56+
<Select<LabelOption | null>
5957
id={`${itemType}-zIndexMode`}
6058
options={labelOptions}
6159
value={selectedLabelOption}

‎packages/gephi-lite/src/components/GraphFilters/FilterCreator.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { capitalize } from "lodash";
33
import { FC, useEffect, useState } from "react";
44
import { useTranslation } from "react-i18next";
55
import { CgAddR } from "react-icons/cg";
6-
import Select from "react-select";
76

87
import {
98
useDynamicItemData,
@@ -16,7 +15,7 @@ import { FilterType } from "../../core/filters/types";
1615
import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../core/graph/dynamicAttributes";
1716
import { FieldModel } from "../../core/graph/types";
1817
import { ItemType } from "../../core/types";
19-
import { DEFAULT_SELECT_PROPS } from "../consts";
18+
import { Select } from "../forms/Select";
2019

2120
export interface FilterOption {
2221
value: string;
@@ -133,7 +132,6 @@ export const FilterCreator: FC = () => {
133132
<div>
134133
{t("filters.filter")}{" "}
135134
<Select
136-
{...DEFAULT_SELECT_PROPS}
137135
onChange={(o) => setFilterApplicationType(o?.value as ItemType | "topological")}
138136
options={[
139137
{ label: capitalize(t("graph.model.nodes").toString()), value: "nodes" },
@@ -146,7 +144,6 @@ export const FilterCreator: FC = () => {
146144
{t("filters.using")}
147145
{filterOptions.length > 0 && (
148146
<Select
149-
{...DEFAULT_SELECT_PROPS}
150147
value={selectedFilterOption}
151148
isClearable={true}
152149
onChange={(selectedOption) => {

‎packages/gephi-lite/src/components/GraphFilters/TermsFilter.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useReadAtom } from "@ouestware/atoms";
33
import { countBy, flatMap, identity, sortBy, toPairs } from "lodash";
44
import { FC, useEffect, useState } from "react";
55
import { useTranslation } from "react-i18next";
6-
import Select from "react-select";
76

87
import { useFiltersActions, useGraphDataset } from "../../core/context/dataContexts";
98
import { TermsFilterType } from "../../core/filters/types";
@@ -14,7 +13,7 @@ import {
1413
mergeStaticDynamicData,
1514
staticDynamicAttributeLabel,
1615
} from "../../core/graph/dynamicAttributes";
17-
import { DEFAULT_SELECT_PROPS } from "../consts";
16+
import { Select } from "../forms/Select";
1817
import { FilteredGraphSummary } from "./FilteredGraphSummary";
1918

2019
const TermsFilterEditor: FC<{ filter: TermsFilterType }> = ({ filter }) => {
@@ -46,7 +45,6 @@ const TermsFilterEditor: FC<{ filter: TermsFilterType }> = ({ filter }) => {
4645
return (
4746
<div className="my-3 w-100">
4847
<Select
49-
{...DEFAULT_SELECT_PROPS}
5048
value={filter.terms ? Array.from(filter.terms).map((t) => ({ label: t, value: t })) : []}
5149
onChange={(options) => {
5250
const selectedValues = new Set(options.map((o) => o.value));

‎packages/gephi-lite/src/components/GraphSearch.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ItemType } from "../core/types";
1010
import { EdgeComponentById } from "./Edge";
1111
import { NodeComponentById } from "./Node";
1212
import { SearchIcon } from "./common-icons";
13-
import { DEFAULT_SELECT_PROPS } from "./consts";
13+
import { DEFAULT_SELECT_PROPS } from "./forms/Select";
1414

1515
export interface OptionItem {
1616
id: string;

‎packages/gephi-lite/src/components/consts.ts

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎packages/gephi-lite/src/components/forms/GraphMetadataForm.tsx

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { FC } from "react";
22
import { useTranslation } from "react-i18next";
33

44
import { useGraphDataset, useGraphDatasetActions } from "../../core/context/dataContexts";
5+
import { Select } from "./Select";
56

67
const GraphTypeValues = ["directed", "undirected", "mixed"] as const;
7-
type GraphType = (typeof GraphTypeValues)[number];
88

99
export const GraphMetadataForm: FC = () => {
1010
const { metadata } = useGraphDataset();
@@ -83,22 +83,12 @@ export const GraphMetadataForm: FC = () => {
8383
<label htmlFor="graph-type" className="form-label">
8484
{t("graph.metadata.graph-type")}
8585
</label>
86-
<select
86+
<Select
8787
id="graph-type"
88-
value={metadata?.type || "undirected"}
89-
onChange={(e) => {
90-
setGraphMeta({
91-
...metadata,
92-
type: e.target.value as GraphType,
93-
});
94-
}}
95-
>
96-
{GraphTypeValues.map((v) => (
97-
<option key={v} value={v}>
98-
{t(`graph.model.${v}`)}
99-
</option>
100-
))}
101-
</select>
88+
value={{ value: metadata?.type || "mixed", label: t(`graph.model.${metadata?.type || "mixed"}`) }}
89+
options={GraphTypeValues.map((v) => ({ value: v, label: t(`graph.model.${v}`) }))}
90+
onChange={(e) => setGraphMeta({ ...metadata, type: e ? e.value : "mixed" })}
91+
/>
10292
</div>
10393
</form>
10494
);

‎packages/gephi-lite/src/components/forms/Select.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import ReactSelect, { Props as ReactSelectProps } from "react-select";
2+
3+
export const DEFAULT_SELECT_PROPS = {
4+
classNamePrefix: "react-select",
5+
menuPosition: "fixed" as ReactSelectProps["menuPosition"],
6+
};
7+
8+
export interface DefaultOption {
9+
value: string;
10+
label: string | JSX.Element;
11+
}
12+
13+
export function Select<T = DefaultOption, IsMulti extends boolean = false>(props: ReactSelectProps<T, IsMulti>) {
14+
return (
15+
<ReactSelect<T, IsMulti>
16+
{...DEFAULT_SELECT_PROPS}
17+
{...props}
18+
components={{
19+
IndicatorSeparator: null,
20+
}}
21+
/>
22+
);
23+
}

‎packages/gephi-lite/src/components/forms/TypedInputs.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import Slider from "rc-slider";
44
import { MarkObj } from "rc-slider/lib/Marks";
55
import { SliderProps } from "rc-slider/lib/Slider";
66
import React, { FC, InputHTMLAttributes, ReactNode, useMemo } from "react";
7-
import Select from "react-select";
87

98
import MessageTooltip from "../MessageTooltip";
10-
import { DEFAULT_SELECT_PROPS } from "../consts";
9+
import { Select } from "./Select";
1110

1211
interface BaseTypedInputProps {
1312
id: string;
@@ -173,10 +172,9 @@ export const EnumInput: FC<
173172
{label}
174173
</label>
175174
<Select<EnumOption>
176-
{...DEFAULT_SELECT_PROPS}
177175
isDisabled={disabled}
178176
isClearable={!required}
179-
className={className}
177+
className={cx("form-control-sm", className)}
180178
placeholder={placeholder}
181179
value={option || null}
182180
options={options}

0 commit comments

Comments
 (0)