[gephi-lite] Handles invalid and undefined values

This commit fixes #210 and #225.

Details:
- It is now possible to manually clear any cell in the data table
- Invalid values are now rendered in the data table and the selection
  panel

Author: jacomyal

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

@@ -76,6 +76,7 @@ import {
   PiTrash,
   PiUser,
   PiWarning,
+  PiWarningCircle,
   PiWarningOctagon,
   PiX,
 } from "react-icons/pi";
@@ -120,6 +121,7 @@ export const GraphIcon = PiGraph;
 export const GraphIconFill = PiGraphFill;
 export const GuessSettingsIcon = PiMagicWand;
 export const HomeIcon = PiHouseLine;
+export const InvalidDataIcon = PiWarningCircle;
 export const LassoIcon = PiLasso;
 export const LassoIconFill = PiLassoBold;
 export const LayoutsIcon = PiPolygon;

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

@@ -20,13 +20,30 @@ import { castScalarToModelValue, serializeModelValueToScalar } from "../../core/
 import { useDataCollection } from "../../hooks/useDataCollection";
 import { DEFAULT_LINKIFY_PROPS } from "../../utils/url";
 import ColorPicker, { InlineColorPicker } from "../ColorPicker";
-import { FieldModelIcon } from "../common-icons";
+import MessageTooltip from "../MessageTooltip";
+import { FieldModelIcon, InvalidDataIcon } from "../common-icons";
 import { BaseOption, CreatableSelect, optionize } from "../forms/Select";
 
 /**
  * Render values:
  * **************
  */
+export const InvalidAttributeRenderer: FC<{ value: Scalar; expectedType: FieldModelType }> = ({
+  value,
+  expectedType,
+}) => {
+  const { t } = useTranslation("translation");
+  return (
+    <span className="invalid-value">
+      <span>{value}</span>{" "}
+      <MessageTooltip
+        className="message-tooltip"
+        message={t("graph.model.warnings.invalid_data", { value, type: expectedType })}
+        icon={InvalidDataIcon}
+      />
+    </span>
+  );
+};
 export const AttributeRenderers: {
   [K in keyof FieldModelAbstraction]: FC<
     {
@@ -71,11 +88,13 @@ export const RenderKeywords = AttributeRenderers.keywords;
 export const RenderDate = AttributeRenderers.date;
 export const RenderColor = AttributeRenderers.color;
 
-export const RenderItemAttribute: FC<{ field: FieldModelTypeSpec; value: Scalar }> = ({ field, value }) =>
-  createElement(AttributeRenderers[field.type] as FC<{ value?: ModelValueType }>, {
-    ...field,
-    value: castScalarToModelValue(value, field),
-  });
+export const RenderItemAttribute: FC<{ field: FieldModelTypeSpec; value: Scalar }> = ({ field, value }) => {
+  const castValue = castScalarToModelValue(value, field);
+  const AttributeRenderer = AttributeRenderers[field.type] as FC<{ value?: ModelValueType }>;
+
+  if (!isNil(value) && isNil(castValue)) return <InvalidAttributeRenderer value={value} expectedType={field.type} />;
+  return <AttributeRenderer {...field} value={castValue} />;
+};
 
 /**
  * Edit values:

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

@@ -215,6 +215,8 @@ export function serializeModelValueToScalar(
   fieldModel: FieldModelTypeSpec,
   originalScalar: Scalar,
 ): Scalar {
+  if (value === undefined) return undefined;
+
   switch (fieldModel.type) {
     case "number":
       if (typeof value !== "number") return originalScalar;

packages/gephi-lite/src/locales/dev.json

@@ -402,7 +402,7 @@
       "warnings": {
         "missing": "{{nbValues}} missing values",
         "wrong": "{{nbValues}} values are not quantitative",
-        "allMissing": "No values in the graph"
+        "invalid_data": "The value \"{{value}}\" cannot be interpreted as a \"{{type}}\" value."
       },
       "field": {
         "id": "Identifier",

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

@@ -138,7 +138,7 @@ $table-editable-columns-cell-hover-bg: color-mix(
         &.editable {
           padding: 0;
 
-          .tether-target {
+          .tether-target:not(.message-tooltip) {
             width: 100%;
             padding: map.get($spacers, 1) 0;
             @extend .text-ellipsis;

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

@@ -45,13 +45,33 @@
       width: 0;
       height: 0;
       border-left: 0.3em solid transparent;
-      border-left-width: 0.3em;
       border-right: 0.3em solid transparent;
-      border-right-width: 0.3em;
       border-top: 0.6em solid red;
       flex-shrink: 0;
-      border-left-width: 0.3em;
-      border-right-width: 0.3em;
+    }
+  }
+}
+
+.invalid-value {
+  @extend .text-muted;
+  @extend .gl-gap-1;
+  font-style: italic;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  span {
+    @extend .text-truncate;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .message-tooltip {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .gl-btn {
+      @extend .text-dark;
     }
   }
 }