[gephi-lite] Fine-tunes attributes editing

Details:
- Clarifies colors styles for the data table
- Improves table cell hover and interaction management
- Fixes number attributes editing when value is 0
- Fixes autocomplete for all attribute inputs

Author: jacomyal

packages/gephi-lite/src/components/common-icons.tsx

@@ -1,4 +1,5 @@
 import { FieldModelType } from "@gephi/gephi-lite-sdk";
+import { FC } from "react";
 import { IconType } from "react-icons";
 import {
   Bs123,
@@ -15,6 +16,7 @@ import {
 } from "react-icons/bs";
 import { GrOverview } from "react-icons/gr";
 import { ImFilesEmpty } from "react-icons/im";
+import { IconBaseProps } from "react-icons/lib/iconBase";
 import { MdLogin, MdLogout, MdOutlineRefresh, MdOutlineSaveAlt } from "react-icons/md";
 import {
   PiArrowSquareOut,
@@ -118,3 +120,7 @@ export const FieldModelIcons: Record<FieldModelType, IconType> = {
   keywords: BsFillTagsFill,
   date: BsCalendar3,
 };
+export const FieldModelIcon: FC<IconBaseProps & { type: FieldModelType }> = ({ type, ...props }) => {
+  const Icon = FieldModelIcons[type];
+  return <Icon {...props} />;
+};

packages/gephi-lite/src/components/data/Attribute.tsx

@@ -10,7 +10,7 @@ import {
 } from "@gephi/gephi-lite-sdk";
 import { isNil } from "lodash";
 import { DateTime } from "luxon";
-import { FC, createElement, useCallback, useMemo } from "react";
+import { FC, createElement, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ReactLinkify from "react-linkify";
 import { MultiValueProps, OptionProps, SingleValueProps, components } from "react-select";
@@ -73,22 +73,40 @@ export const AttributeEditors: {
     field: FieldModel<ItemType, false, K>;
   }>;
 } = {
-  text: ({ value, onChange }) => (
-    <input
-      className="form-control"
-      type="string"
-      value={value || ""}
-      onChange={(e) => onChange(e.target.value || undefined)}
-    />
-  ),
-  number: ({ value, onChange }) => (
-    <input
-      className="form-control"
-      type="number"
-      value={value || ""}
-      onChange={(e) => onChange(e.target.value ? +e.target.value : undefined)}
-    />
-  ),
+  text: ({ value, onChange }) => {
+    const ref = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+      if (ref.current) ref.current.focus();
+    }, []);
+
+    return (
+      <input
+        ref={ref}
+        autoFocus
+        className="form-control"
+        type="string"
+        value={value ?? ""}
+        onChange={(e) => onChange(e.target.value || undefined)}
+      />
+    );
+  },
+  number: ({ value, onChange }) => {
+    const ref = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+      if (ref.current) ref.current.focus();
+    }, []);
+
+    return (
+      <input
+        ref={ref}
+        autoFocus
+        className="form-control"
+        type="number"
+        value={value ?? ""}
+        onChange={(e) => onChange(e.target.value ? +e.target.value : undefined)}
+      />
+    );
+  },
   category: ({ value, onChange, field }) => {
     const values = useDataCollection(field);
     const options = useMemo(() => Array.from(values).map(optionize), [values]);
@@ -111,6 +129,7 @@ export const AttributeEditors: {
 
     return (
       <CreatableSelect<BaseOption>
+        autoFocus
         menuPosition="absolute"
         value={!isNil(value) ? optionize(value) : undefined}
         onChange={(newValue) => onChange(newValue?.value)}
@@ -150,8 +169,9 @@ export const AttributeEditors: {
 
     return (
       <CreatableSelect<BaseOption, true>
-        menuPosition="absolute"
         isMulti
+        autoFocus
+        menuPosition="absolute"
         value={value?.map(optionize)}
         onChange={(newValue) => onChange(newValue.length ? newValue.map((o) => o.value) : undefined)}
         options={options}
@@ -164,6 +184,7 @@ export const AttributeEditors: {
   },
   date: ({ value, onChange }) => (
     <input
+      autoFocus
       className="form-control"
       type="datetime-local"
       value={value?.toFormat("yyyy-MM-dd'T'HH:mm") ?? ""}

packages/gephi-lite/src/styles/_data-table.scss

@@ -1,7 +1,14 @@
 @use "sass:map";
 
+$table-bg: $gray-200;
+$table-editable-columns-cell-bg: $white;
+$table-editable-columns-cell-hover-bg: $gray-100;
+$table-editable-columns-header-bg: $gray-200;
+$table-non-editable-columns-cell-bg: $gray-100;
+$table-non-editable-columns-header-bg: $gray-300;
+
 .data-table {
-  background: $gray-100;
+  background: $table-bg;
   border: $table-border-color;
   display: grid;
   grid-template-rows: auto 1fr;
@@ -31,8 +38,9 @@
         font-weight: $font-weight-base;
         position: relative;
 
+        background: $table-editable-columns-header-bg;
         &.protected {
-          background: $gray-200;
+          background: $table-non-editable-columns-header-bg;
         }
 
         & > div.content-wrapper {
@@ -95,6 +103,15 @@
 
         padding: map.get($spacers, 1) map.get($spacers, 2);
 
+        background: $table-non-editable-columns-cell-bg;
+        &.editable {
+          background: $table-editable-columns-cell-bg;
+
+          &:hover {
+            background: $table-editable-columns-cell-hover-bg;
+          }
+        }
+
         &.editable {
           padding: 0;
 

packages/gephi-lite/src/views/dataPage/dataTable/DataCell.tsx

@@ -8,10 +8,10 @@ import { useGraphDatasetActions } from "../../../core/context/dataContexts";
 
 export const ReadDataCell = forwardRef<
   HTMLSpanElement,
-  { value: Scalar; field: FieldModel; onDoubleClick?: MouseEventHandler }
->(({ value, field, onDoubleClick }, ref) => {
+  { value: Scalar; field: FieldModel; onClick?: MouseEventHandler }
+>(({ value, field, onClick }, ref) => {
   return (
-    <span ref={ref} className="data-cell" onDoubleClick={onDoubleClick}>
+    <span ref={ref} className="data-cell" onClick={onClick}>
       <RenderItemAttribute value={value} field={field} />
     </span>
   );
@@ -93,7 +93,7 @@ export const DataCell: FC<{ type: ItemType; id: string; field: FieldModel; value
   const [isEditing, setIsEditing] = useState(false);
 
   return !isEditing ? (
-    <ReadDataCell {...props} onDoubleClick={() => setIsEditing(true)} />
+    <ReadDataCell {...props} onClick={() => setIsEditing(true)} />
   ) : (
     <EditDataCell {...props} close={() => setIsEditing(false)} />
   );

packages/gephi-lite/src/views/dataPage/dataTable/useDataTableColumns.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { PiDotsThreeVertical } from "react-icons/pi";
 
 import Dropdown from "../../../components/Dropdown";
+import { FieldModelIcon } from "../../../components/common-icons";
 import { EdgeComponentById } from "../../../components/data/Edge";
 import { NodeComponentById } from "../../../components/data/Node";
 import ConfirmModal from "../../../components/modals/ConfirmModal";
@@ -149,7 +150,7 @@ export const useDataTableColumns = (itemIDs: string[]) => {
         header: ({ header }) => (
           <>
             <span className="column-title" onClick={header.column.getToggleSortingHandler()}>
-              {field.id}
+              <FieldModelIcon type={field.type} /> {field.id}
             </span>
 
             <Arrow