[gephi-lite] Improves Data table

Details:
- Improves updateNode and updateEdge actions
- Data cells are now editable

Author: jacomyal

package-lock.json

@@ -38,6 +38,7 @@
     "@octokit/auth-oauth-device": "^7.1.2",
     "@octokit/core": "^6.1.3",
     "@ouestware/atoms": "^0.0.1-alpha.3",
+    "@ouestware/hooks": "^0.0.1-alpha.6",
     "@react-sigma/core": "^5.0.2",
     "@sigma/node-image": "^3.0.0",
     "@tanstack/react-table": "^8.21.3",

packages/gephi-lite/package.json

@@ -24,9 +24,11 @@ const Dropdown: FC<{ children: ReactNode; options: Option[] }> = ({ children: ta
       <div className="dropdown-menu show over-modal position-relative">
         {options.map((option, i) =>
           option.type === "divider" ? (
-            <div className="dropdown-divider" key={i} />
+            <div key={i} className="dropdown-divider" />
           ) : option.type === "text" ? (
-            <div className="dropdown-item-text">{option.content}</div>
+            <div key={i} className="dropdown-item-text">
+              {option.content}
+            </div>
           ) : (
             <button key={i} className={cx("dropdown-item", option.disabled && "disabled")} onClick={option.onClick}>
               {option.label}

packages/gephi-lite/src/components/Dropdown.tsx

@@ -241,9 +241,16 @@ const createEdge: Producer<GraphDataset, [string, Attributes, string, string]> =
     };
   };
 };
-const updateNode: Producer<GraphDataset, [string, Attributes]> = (node, attributes) => {
+const updateNode: Producer<GraphDataset, [string, Attributes, { merge?: boolean }?]> = (
+  node,
+  attributes,
+  { merge } = {},
+) => {
   return (state) => {
-    const { data, renderingData } = cleanNode(node, attributes);
+    const { data, renderingData } = cleanNode(
+      node,
+      merge ? { ...state.nodeData[node], ...state.nodeRenderingData[node], ...attributes } : attributes,
+    );
     const newNodeFieldModel = newItemModel<"nodes">("nodes", data, state.nodeFields);
     return {
       ...state,
@@ -253,9 +260,16 @@ const updateNode: Producer<GraphDataset, [string, Attributes]> = (node, attribut
     };
   };
 };
-const updateEdge: Producer<GraphDataset, [string, Attributes]> = (edge, attributes) => {
+const updateEdge: Producer<GraphDataset, [string, Attributes, { merge?: boolean }?]> = (
+  edge,
+  attributes,
+  { merge } = {},
+) => {
   return (state) => {
-    const { data, renderingData } = cleanEdge(edge, attributes);
+    const { data, renderingData } = cleanEdge(
+      edge,
+      merge ? { ...state.edgeData[edge], ...state.edgeRenderingData[edge], ...attributes } : attributes,
+    );
     const newEdgeFieldModel = newItemModel<"edges">("edges", data, state.edgeFields);
     return {
       ...state,

packages/gephi-lite/src/core/graph/index.ts

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .data-table {
   background: $gray-100;
   border: $table-border-color;
@@ -90,6 +92,17 @@
 
       td {
         display: flex;
+
+        padding: map.get($spacers, 1);
+        &.editable {
+          padding: 0;
+
+          .data-cell {
+            width: 100%;
+            padding: map.get($spacers, 1);
+            @extend .text-ellipsis;
+          }
+        }
       }
     }
   }

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

@@ -0,0 +1,93 @@
+import { ItemType, Scalar } from "@gephi/gephi-lite-sdk";
+import { FC, MouseEventHandler, forwardRef, useEffect, useRef, useState } from "react";
+import ReactLinkify from "react-linkify";
+import TetherComponent from "react-tether";
+
+import { useGraphDatasetActions } from "../../../core/context/dataContexts";
+import { DEFAULT_LINKIFY_PROPS } from "../../../utils/url";
+
+export const ReadDataCell = forwardRef<HTMLSpanElement, { value: Scalar; onDoubleClick?: MouseEventHandler }>(
+  ({ value, onDoubleClick }, ref) => {
+    return (
+      <span ref={ref} className="data-cell" onDoubleClick={onDoubleClick}>
+        <ReactLinkify {...DEFAULT_LINKIFY_PROPS}>{value}</ReactLinkify>
+      </span>
+    );
+  },
+);
+
+export const EditDataCell: FC<{ type: ItemType; id: string; field: string; value: Scalar; close: () => void }> = ({
+  type,
+  id,
+  field,
+  close,
+  value: initialValue,
+}) => {
+  const [value, setValue] = useState(initialValue + "");
+  const { updateNode, updateEdge } = useGraphDatasetActions();
+  const update = type === "nodes" ? updateNode : updateEdge;
+
+  const targetWrapper = useRef<HTMLDivElement>(null);
+  const elementWrapper = useRef<HTMLFormElement>(null);
+
+  // Handle interactions:
+  useEffect(() => {
+    const handleClickBody = (e: MouseEvent) => {
+      if (!elementWrapper.current || !targetWrapper.current) return;
+
+      const node = e.target as Node;
+      if (!elementWrapper.current.contains(node) && !targetWrapper.current.contains(node)) {
+        close();
+      }
+    };
+
+    setTimeout(() => {
+      document.body.addEventListener("click", handleClickBody);
+    }, 0);
+    return () => {
+      document.body.removeEventListener("click", handleClickBody);
+    };
+  }, [close]);
+
+  return (
+    <TetherComponent
+      attachment="top left"
+      targetAttachment="top left"
+      className=""
+      constraints={[{ to: "scrollparent", attachment: "together", pin: true }]}
+      renderTarget={(ref) => (
+        <div ref={ref}>
+          <ReadDataCell ref={targetWrapper} value={value} />
+        </div>
+      )}
+      renderElement={(ref) => (
+        <div ref={ref}>
+          <form
+            ref={elementWrapper}
+            className="bg-light"
+            onSubmit={(e) => {
+              e.preventDefault();
+              update(id, { [field]: value }, { merge: true });
+              close();
+            }}
+          >
+            <textarea autoFocus className="form-control" value={value} onChange={(e) => setValue(e.target.value)} />
+            <div className="text-end">
+              <button className="btn btn-small">Save cell</button>
+            </div>
+          </form>
+        </div>
+      )}
+    />
+  );
+};
+
+export const DataCell: FC<{ type: ItemType; id: string; field: string; value: Scalar }> = (props) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  return !isEditing ? (
+    <ReadDataCell value={props.value} onDoubleClick={() => setIsEditing(true)} />
+  ) : (
+    <EditDataCell {...props} close={() => setIsEditing(false)} />
+  );
+};

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

@@ -30,7 +30,11 @@ const TableBodyRow: FC<{
     >
       {row.getVisibleCells().map((cell) => {
         return (
-          <td key={cell.id} style={{ ...getCommonPinningStyles(cell.column) }}>
+          <td
+            key={cell.id}
+            style={{ ...getCommonPinningStyles(cell.column) }}
+            className={cx(!(cell.column.id in SPECIFIC_COLUMNS) && "editable")}
+          >
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </td>
         );

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

@@ -1,7 +1,6 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { PiDotsThreeVertical } from "react-icons/pi";
-import ReactLinkify from "react-linkify";
 
 import Dropdown from "../../../components/Dropdown";
 import { EdgeComponentById } from "../../../components/Edge";
@@ -14,8 +13,8 @@ import {
   useSelectionActions,
 } from "../../../core/context/dataContexts";
 import { useModal } from "../../../core/modals";
-import { DEFAULT_LINKIFY_PROPS } from "../../../utils/url";
 import ConfirmModal from "../../graphPage/modals/ConfirmModal";
+import { DataCell } from "./DataCell";
 import { Arrow, ItemRow, SPECIFIC_COLUMNS } from "./consts";
 
 function getReadOnlyColumn(field: keyof ItemRow, size = 180): ColumnDef<ItemRow> {
@@ -35,7 +34,9 @@ function getReadOnlyColumn(field: keyof ItemRow, size = 180): ColumnDef<ItemRow>
           arrow={header.column.getIsSorted() || null}
           wrapper={({ children }) => (
             <div>
-              <button className="btn small p-0">{children}</button>
+              <button className="btn small p-0" onClick={header.column.getToggleSortingHandler()}>
+                {children}
+              </button>
             </div>
           )}
         />
@@ -251,9 +252,12 @@ export const useDataTableColumns = (itemIDs: string[]) => {
           </>
         ),
         cell: (props) => (
-          <span className="text-ellipsis">
-            <ReactLinkify {...DEFAULT_LINKIFY_PROPS}>{props.row.getValue(`field::${field.id}`)}</ReactLinkify>
-          </span>
+          <DataCell
+            type={type}
+            id={props.row.getValue("id")}
+            field={field.id}
+            value={props.row.getValue(`field::${field.id}`)}
+          />
         ),
       })),
     ],

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

@@ -1,4 +1,4 @@
-import { toNumber } from "@gephi/gephi-lite-sdk";
+import { FieldModel, NodeRenderingData, toNumber } from "@gephi/gephi-lite-sdk";
 import cx from "classnames";
 import { fromPairs, isNil, omit, pick } from "lodash";
 import { FC, useMemo } from "react";
@@ -10,7 +10,6 @@ import { FaTimes } from "react-icons/fa";
 
 import { Modal } from "../../../../components/modals";
 import { useGraphDataset, useGraphDatasetActions, useSelectionActions } from "../../../../core/context/dataContexts";
-import { FieldModel, NodeRenderingData } from "../../../../core/graph/types";
 import { ModalProps } from "../../../../core/modals/types";
 import { useNotifications } from "../../../../core/notifications";
 import { Scalar } from "../../../../core/types";