[gephi-lite] refacto react-select

Same style than bootstrap field
Creating a Select component which is a wrapper of react-select
Using react-select even on simple select
Review graph search components for react-select

Author: sim51

packages/gephi-lite/src/components/GraphAppearance/TransformationMethodPreview.tsx

@@ -6,7 +6,7 @@ import { makeGetValue } from "../../core/appearance/utils";
 
 export const TransformationMethodPreview: FC<{ method?: TransformationMethod }> = ({ method }) => {
   const getValue = makeGetValue(method);
-  const size = 40;
+  const size = 30;
   const margin = 2;
   return (
     <>

packages/gephi-lite/src/components/GraphAppearance/TransformationMethodSelect.tsx

@@ -1,7 +1,8 @@
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { TransformationMethod } from "../../core/appearance/types";
+import { Select } from "../forms/Select";
 import { TransformationMethodPreview } from "./TransformationMethodPreview";
 
 export const TransformationMethodsSelect: FC<{
@@ -11,41 +12,52 @@ export const TransformationMethodsSelect: FC<{
 }> = ({ id, method, onChange }) => {
   const { t } = useTranslation();
 
+  const options = useMemo(
+    () => [
+      { value: "", label: t("appearance.transformation_methods.linear").toString() },
+      { value: "pow-2", label: t("appearance.transformation_methods.pow-2").toString() },
+      { value: "pow-3", label: t("appearance.transformation_methods.pow-3").toString() },
+      { value: "pow-0.5", label: t("appearance.transformation_methods.sqrt").toString() },
+      { value: "log", label: t("appearance.transformation_methods.log").toString() },
+    ],
+    [t],
+  );
+
+  const value = useMemo(() => {
+    const result =
+      typeof method === "object" && "pow" in method ? `pow-${method.pow}` : method === "log" ? "log" : undefined;
+    return { value: result, label: result };
+  }, [method]);
+
   return (
     <>
       <label htmlFor={id || "transformation-method"}>{t("appearance.transformation_methods.title")}</label>
       <div className="d-flex align-items-bottom ">
-        <select
+        <Select
           id={id || "transformation-method"}
-          className="form-select me-2"
+          className="me-2 flex-grow-1 form-control-sm"
+          value={value}
+          options={options}
           onChange={(e) => {
             let method: TransformationMethod | null = null;
-            switch (e.target.value) {
-              case "pow-2":
-                method = { pow: 2 };
-                break;
-              case "pow-3":
-                method = { pow: 3 };
-                break;
-              case "pow-0.5":
-                method = { pow: 0.5 };
-                break;
-              case "log":
-                method = "log";
+            if (e) {
+              switch (e.value) {
+                case "pow-2":
+                  method = { pow: 2 };
+                  break;
+                case "pow-3":
+                  method = { pow: 3 };
+                  break;
+                case "pow-0.5":
+                  method = { pow: 0.5 };
+                  break;
+                case "log":
+                  method = "log";
+              }
             }
             onChange(method);
           }}
-          value={
-            typeof method === "object" && "pow" in method ? `pow-${method.pow}` : method === "log" ? "log" : undefined
-          }
-        >
-          <option value="">{t("appearance.transformation_methods.linear")}</option>
-          <option value="pow-2">{t("appearance.transformation_methods.pow-2")}</option>
-          <option value="pow-3">{t("appearance.transformation_methods.pow-3")}</option>
-          <option value="pow-0.5">{t("appearance.transformation_methods.sqrt")}</option>
-          <option value="log">{t("appearance.transformation_methods.log")}</option>
-          {/* <option disabled>{t("appearance.transformation_methods.spline")} TODO</option> */}
-        </select>
+        />
 
         <TransformationMethodPreview method={method} />
       </div>

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

@@ -2,7 +2,6 @@ import { ItemDataField } from "@gephi/gephi-lite-sdk";
 import { isEqual } from "lodash";
 import { FC, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import Select from "react-select";
 
 import { Color } from "../../../core/appearance/types";
 import { DEFAULT_EDGE_COLOR, DEFAULT_NODE_COLOR, DEFAULT_SHADING_COLOR } from "../../../core/appearance/utils";
@@ -16,7 +15,7 @@ import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../..
 import { FieldModel } from "../../../core/graph/types";
 import { uniqFieldvaluesAsStrings } from "../../../core/graph/utils";
 import { ItemType } from "../../../core/types";
-import { DEFAULT_SELECT_PROPS } from "../../consts";
+import { Select } from "../../forms/Select";
 import { ColorFixedEditor } from "./ColorFixedEditor";
 import { ColorPartitionEditor } from "./ColorPartitionEditor";
 import { ColorRankingEditor } from "./ColorRankingEditor";
@@ -105,7 +104,6 @@ export const ColorItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
       <h3 className="fs-5">{t("appearance.color.title")}</h3>
       <label htmlFor={`${itemType}-colorMode`}>{t("appearance.color.set_color_from")}</label>
       <Select<ColorOption>
-        {...DEFAULT_SELECT_PROPS}
         id={`${itemType}-colorMode`}
         options={options}
         value={selectedOption}

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

@@ -1,14 +1,13 @@
 import { ItemDataField } from "@gephi/gephi-lite-sdk";
 import { FC, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import Select from "react-select";
 
 import { ShadingColor } from "../../../core/appearance/types";
 import { useGraphDataset } from "../../../core/context/dataContexts";
 import { staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
 import { ItemType } from "../../../core/types";
 import ColorPicker from "../../ColorPicker";
-import { DEFAULT_SELECT_PROPS } from "../../consts";
+import { Select } from "../../forms/Select";
 
 type Option = { value: ItemDataField; label: string };
 function stringToOption(field: ItemDataField): Option {
@@ -42,7 +41,6 @@ export const ShadingColorEditor: FC<{
         {t("appearance.color.shading_attribute", { items: t(`graph.model.${itemType}`) })}
       </label>
       <Select<Option>
-        {...DEFAULT_SELECT_PROPS}
         id={`${itemType}-shadingColorAttribute`}
         options={fieldOptions}
         value={stringToOption(color.field)}

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

@@ -1,12 +1,11 @@
 import { capitalize } from "lodash";
 import { FC, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import Select from "react-select";
 
 import { DEFAULT_EDGE_LABEL_SIZE, DEFAULT_NODE_LABEL_SIZE } from "../../../core/appearance/utils";
 import { useAppearance, useAppearanceActions } from "../../../core/context/dataContexts";
 import { ItemType } from "../../../core/types";
-import { DEFAULT_SELECT_PROPS } from "../../consts";
+import { Select } from "../../forms/Select";
 import { SliderInput } from "../../forms/TypedInputs";
 
 export const LabelSizeItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
@@ -32,7 +31,6 @@ export const LabelSizeItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
     <div className="panel-block">
       <label htmlFor={`${itemType}-labelSizesMode`}>{t("appearance.labels.set_labels_size_from")}</label>
       <Select
-        {...DEFAULT_SELECT_PROPS}
         id={`${itemType}-labelSizesMode`}
         options={labelSizeOptions}
         value={selectedOption}

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

@@ -1,7 +1,6 @@
 import { ItemDataField } from "@gephi/gephi-lite-sdk";
 import { FC, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import Select from "react-select";
 
 import { StringAttr } from "../../../core/appearance/types";
 import {
@@ -13,7 +12,7 @@ import {
 import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
 import { FieldModel } from "../../../core/graph/types";
 import { ItemType } from "../../../core/types";
-import { DEFAULT_SELECT_PROPS } from "../../consts";
+import { Select } from "../../forms/Select";
 
 type LabelOption =
   | { value: string; type: "none" | "data" | "fixed"; field?: undefined; label: string }
@@ -72,8 +71,7 @@ export const StringAttrItem: FC<{ itemType: ItemType; itemKey: "images" | "label
     <div className="panel-block">
       <h3 className="fs-5">{t(`appearance.${itemKey}.title`)}</h3>
       <label htmlFor={`${itemType}-${itemKey}sMode`}>{t(`appearance.${itemKey}.set_labels_from`)}</label>
-      <Select<LabelOption>
-        {...DEFAULT_SELECT_PROPS}
+      <Select<LabelOption | null>
         id={`${itemType}-labelsMode`}
         options={labelOptions}
         value={selectedLabelOption}

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

@@ -2,7 +2,6 @@ import { ItemDataField } from "@gephi/gephi-lite-sdk";
 import { isEqual } from "lodash";
 import { FC, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import Select from "react-select";
 
 import { Size } from "../../../core/appearance/types";
 import { DEFAULT_EDGE_SIZE, DEFAULT_NODE_SIZE } from "../../../core/appearance/utils";
@@ -15,7 +14,7 @@ import {
 import { staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
 import { FieldModel } from "../../../core/graph/types";
 import { ItemType } from "../../../core/types";
-import { DEFAULT_SELECT_PROPS } from "../../consts";
+import { Select } from "../../forms/Select";
 import { SizeFixedEditor } from "./SizeFixedEditor";
 import { SizeRankingEditor } from "./SizeRankingEditor";
 
@@ -79,7 +78,6 @@ export const SizeItem: FC<{ itemType: ItemType }> = ({ itemType }) => {
       <h3 className="fs-5">{t("appearance.size.title")}</h3>
       <label htmlFor={`${itemType}-sizeMode`}>{t("appearance.size.set_size_from")}</label>
       <Select<SizeOption>
-        {...DEFAULT_SELECT_PROPS}
         id={`${itemType}-sizeMode`}
         options={options}
         value={selectedOption}

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

@@ -1,7 +1,6 @@
 import { ItemDataField } from "@gephi/gephi-lite-sdk";
 import { FC, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import Select from "react-select";
 
 import {
   useAppearance,
@@ -12,7 +11,7 @@ import {
 import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../../core/graph/dynamicAttributes";
 import { FieldModel } from "../../../core/graph/types";
 import { ItemType } from "../../../core/types";
-import { DEFAULT_SELECT_PROPS } from "../../consts";
+import { Select } from "../../forms/Select";
 
 type LabelOption =
   | { value: string; type: "none"; field?: undefined; label: string }
@@ -54,8 +53,7 @@ export const EdgesZIndexItem: FC = () => {
       <h3 className="fs-5">{t(`appearance.zIndex.title`)}</h3>
       <p className="text-muted">{t(`appearance.zIndex.description`, { items: t("graph.model.edges") })}</p>
       <label htmlFor={`${itemType}-zIndexMode`}>{t(`appearance.zIndex.set_values_from`)}</label>
-      <Select<LabelOption>
-        {...DEFAULT_SELECT_PROPS}
+      <Select<LabelOption | null>
         id={`${itemType}-zIndexMode`}
         options={labelOptions}
         value={selectedLabelOption}

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

@@ -3,7 +3,6 @@ import { capitalize } from "lodash";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CgAddR } from "react-icons/cg";
-import Select from "react-select";
 
 import {
   useDynamicItemData,
@@ -16,7 +15,7 @@ import { FilterType } from "../../core/filters/types";
 import { staticDynamicAttributeKey, staticDynamicAttributeLabel } from "../../core/graph/dynamicAttributes";
 import { FieldModel } from "../../core/graph/types";
 import { ItemType } from "../../core/types";
-import { DEFAULT_SELECT_PROPS } from "../consts";
+import { Select } from "../forms/Select";
 
 export interface FilterOption {
   value: string;
@@ -133,7 +132,6 @@ export const FilterCreator: FC = () => {
         <div>
           {t("filters.filter")}{" "}
           <Select
-            {...DEFAULT_SELECT_PROPS}
             onChange={(o) => setFilterApplicationType(o?.value as ItemType | "topological")}
             options={[
               { label: capitalize(t("graph.model.nodes").toString()), value: "nodes" },
@@ -146,7 +144,6 @@ export const FilterCreator: FC = () => {
           {t("filters.using")}
           {filterOptions.length > 0 && (
             <Select
-              {...DEFAULT_SELECT_PROPS}
               value={selectedFilterOption}
               isClearable={true}
               onChange={(selectedOption) => {

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

@@ -3,7 +3,6 @@ import { useReadAtom } from "@ouestware/atoms";
 import { countBy, flatMap, identity, sortBy, toPairs } from "lodash";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import Select from "react-select";
 
 import { useFiltersActions, useGraphDataset } from "../../core/context/dataContexts";
 import { TermsFilterType } from "../../core/filters/types";
@@ -14,7 +13,7 @@ import {
   mergeStaticDynamicData,
   staticDynamicAttributeLabel,
 } from "../../core/graph/dynamicAttributes";
-import { DEFAULT_SELECT_PROPS } from "../consts";
+import { Select } from "../forms/Select";
 import { FilteredGraphSummary } from "./FilteredGraphSummary";
 
 const TermsFilterEditor: FC<{ filter: TermsFilterType }> = ({ filter }) => {
@@ -46,7 +45,6 @@ const TermsFilterEditor: FC<{ filter: TermsFilterType }> = ({ filter }) => {
   return (
     <div className="my-3 w-100">
       <Select
-        {...DEFAULT_SELECT_PROPS}
         value={filter.terms ? Array.from(filter.terms).map((t) => ({ label: t, value: t })) : []}
         onChange={(options) => {
           const selectedValues = new Set(options.map((o) => o.value));

packages/gephi-lite/src/components/GraphFilters/TopologicalFilter.tsx

@@ -29,6 +29,7 @@ export function TopologicalFilterEditor<ParametersType extends FilterParameter[]
                   <div key={i} className="mt-1">
                     <label className="form-check-label small">{p.label}</label>
                     <GraphSearch
+                      className="form-control-sm"
                       onChange={(option) => {
                         if (option === null || "id" in option) {
                           replaceCurrentFilter({