Update UI labels from "type" to "label" (#766)

* Update labels * Update changelog * Fix use of empty message for connection detail
aws · Jan 27, 2025 · 825b475 · 825b475
1 parent 7ea1ca2
commit 825b475
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 75 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -2,6 +2,8 @@
 
 ## Upcoming
 
+- **Updated** UI labels to refer to node & edge "labels" instead of "types"
+  ([#766](https://github.com/aws/graph-explorer/pull/766))
 - **Improved** neighbor count retrieval to be more efficient
   ([#744](https://github.com/aws/graph-explorer/pull/744))
 - **Removed** unused `hidden` flag from schema types

diff --git a/packages/graph-explorer/src/components/Tabular/builders/makeIconToggleCell.tsx b/packages/graph-explorer/src/components/Tabular/builders/makeIconToggleCell.tsx
@@ -5,6 +5,7 @@ import { IconButton } from "@/components";
 import type { CellComponentProps } from "../useTabular";
 
 type IconActionCellProps<T extends object> = {
+  title: string;
   on: ReactNode;
   off: ReactNode;
   getValue: (props: CellComponentProps<T>) => boolean;
@@ -30,11 +31,18 @@ const styles = () => css`
 `;
 
 export const makeIconActionCell =
-  <T extends object>({ on, off, getValue, onPress }: IconActionCellProps<T>) =>
+  <T extends object>({
+    title,
+    on,
+    off,
+    getValue,
+    onPress,
+  }: IconActionCellProps<T>) =>
   (props: CellComponentProps<T>) => {
     return (
       <div className={styles()}>
         <IconButton
+          title={title}
           icon={getValue(props) ? on : off}
           size="small"
           variant="text"

diff --git a/packages/graph-explorer/src/hooks/translations/gremlin-translations.json b/packages/graph-explorer/src/hooks/translations/gremlin-translations.json
@@ -10,62 +10,63 @@
     "graph-type": "PG-Gremlin",
     "nodes": "Nodes",
     "edges": "Edges",
-    "search-placeholder": "Search for Node Type",
-    "no-search-title": "No Nodes Types",
-    "no-search-subtitle": "No Nodes Types found with searched criteria",
+    "search-placeholder": "Search for node label",
+    "no-search-title": "No Node Labels",
+    "no-search-subtitle": "No node labels found with searched criteria",
     "no-elements-title": "No Nodes",
-    "no-elements-subtitle": "No Nodes found to be shown in this list"
+    "no-elements-subtitle": "No nodes found to be shown in this list"
   },
   "nodes-styling": {
-    "title": "Nodes Styling",
+    "title": "Node Styling",
     "node-id": "Node Id",
-    "node-type": "Node Type"
+    "node-type": "Node Label"
   },
   "edges-styling": {
-    "title": "Edges Styling",
-    "edge-type": "Edge Type"
+    "title": "Edge Styling",
+    "edge-type": "Edge Label"
   },
   "node-detail": {
     "node-id": "Node Id",
-    "node-type": "Node Type"
+    "node-type": "Node Label"
   },
   "keyword-search": {
-    "node-type": "Node Type",
+    "node-type": "Node label",
+    "node-type-placeholder": "Select a node label",
     "node-attribute": "Attribute",
-    "node-exact-match": "Match Precision"
+    "node-attribute-placeholder": "Select an attribute"
   },
   "entities-filter": {
-    "node-types": "Node Types",
-    "edge-types": "Edge Types"
+    "node-types": "Node Labels",
+    "edge-types": "Edge Labels"
   },
   "node-expand": {
     "edge-selection-title": "Edge Selection",
-    "edge-selection-subtitle": "Select a Node to expand its connections",
+    "edge-selection-subtitle": "Select a node to expand its connections",
     "no-selection-title": "No Selection",
-    "no-selection-subtitle": "Select a Node to expand its connections",
+    "no-selection-subtitle": "Select a node to expand its connections",
     "multi-selection-title": "Multiple Selection",
-    "multi-selection-subtitle": "Select a single Node to expand its connections",
+    "multi-selection-subtitle": "Select a single node to expand its connections",
     "no-connections-title": "Unconnected Node",
     "no-connections-subtitle": "This node has no connection. Therefore, it is not expandable",
     "no-unfetched-title": "Nothing to Expand",
     "no-unfetched-subtitle": "This node has been completely expanded",
-    "neighbors-of-type": "Expand Neighbors of type"
+    "neighbors-of-type": "Expand neighbors with label"
   },
   "entities-tabular": {
     "all-nodes": "All Nodes",
     "all-edges": "All Edges",
     "node-id": "Node Id",
-    "node-type": "Node Type",
-    "nodes-placeholder": "Add a node in the Graph View see its data",
-    "edge-type": "Edge Type",
+    "node-type": "Node Label",
+    "nodes-placeholder": "Add a node in the Graph View to see its data",
+    "edge-type": "Edge Label",
     "source-id": "Source Id",
-    "source-type": "Source Type",
+    "source-type": "Source Label",
     "target-id": "Target Id",
-    "target-type": "Target Type",
-    "edges-placeholder": "Add a node in the Graph View see its connections"
+    "target-type": "Target Label",
+    "edges-placeholder": "Add a node in the Graph View to see its connections"
   },
   "data-explorer": {
     "node-id": "Node Id",
-    "node-type": "Node Type"
+    "node-type": "Node Label"
   }
 }
diff --git a/packages/graph-explorer/src/hooks/translations/openCypher-translations.json b/packages/graph-explorer/src/hooks/translations/openCypher-translations.json
@@ -10,62 +10,63 @@
     "graph-type": "PG-openCypher",
     "nodes": "Nodes",
     "edges": "Edges",
-    "search-placeholder": "Search for Node Type",
-    "no-search-title": "No Nodes Types",
-    "no-search-subtitle": "No Nodes Types found with searched criteria",
+    "search-placeholder": "Search for node label",
+    "no-search-title": "No Node Labels",
+    "no-search-subtitle": "No node labels found with searched criteria",
     "no-elements-title": "No Nodes",
-    "no-elements-subtitle": "No Nodes found to be shown in this list"
+    "no-elements-subtitle": "No nodes found to be shown in this list"
   },
   "nodes-styling": {
-    "title": "Nodes Styling",
+    "title": "Node Styling",
     "node-id": "Node Id",
-    "node-type": "Node Type"
+    "node-type": "Node Label"
   },
   "edges-styling": {
-    "title": "Edges Styling",
-    "edge-type": "Edge Type"
+    "title": "Edge Styling",
+    "edge-type": "Edge Label"
   },
   "node-detail": {
     "node-id": "Node Id",
-    "node-type": "Node Type"
+    "node-type": "Node Label"
   },
   "keyword-search": {
-    "node-type": "Node Type",
+    "node-type": "Node label",
+    "node-type-placeholder": "Select a node label",
     "node-attribute": "Attribute",
-    "node-exact-match": "Match Precision"
+    "node-attribute-placeholder": "Select an attribute"
   },
   "entities-filter": {
-    "node-types": "Node Types",
-    "edge-types": "Edge Types"
+    "node-types": "Node Labels",
+    "edge-types": "Edge Labels"
   },
   "node-expand": {
     "edge-selection-title": "Edge Selection",
-    "edge-selection-subtitle": "Select a Node to expand its connections",
+    "edge-selection-subtitle": "Select a node to expand its connections",
     "no-selection-title": "No Selection",
-    "no-selection-subtitle": "Select a Node to expand its connections",
+    "no-selection-subtitle": "Select a node to expand its connections",
     "multi-selection-title": "Multiple Selection",
-    "multi-selection-subtitle": "Select a single Node to expand its connections",
+    "multi-selection-subtitle": "Select a single node to expand its connections",
     "no-connections-title": "Unconnected Node",
     "no-connections-subtitle": "This node has no connection. Therefore, it is not expandable",
     "no-unfetched-title": "Nothing to Expand",
     "no-unfetched-subtitle": "This node has been completely expanded",
-    "neighbors-of-type": "Expand Neighbors of type"
+    "neighbors-of-type": "Expand neighbors with label"
   },
   "entities-tabular": {
     "all-nodes": "All Nodes",
     "all-edges": "All Edges",
     "node-id": "Node Id",
-    "node-type": "Node Type",
-    "nodes-placeholder": "Add a node in the Graph View see its data",
-    "edge-type": "Edge Type",
+    "node-type": "Node Label",
+    "nodes-placeholder": "Add a node in the Graph View to see its data",
+    "edge-type": "Edge Label",
     "source-id": "Source Id",
-    "source-type": "Source Type",
+    "source-type": "Source Label",
     "target-id": "Target Id",
-    "target-type": "Target Type",
-    "edges-placeholder": "Add a node in the Graph View see its connections"
+    "target-type": "Target Label",
+    "edges-placeholder": "Add a node in the Graph View to see its connections"
   },
   "data-explorer": {
     "node-id": "Node Id",
-    "node-type": "Node Type"
+    "node-type": "Node Label"
   }
 }
diff --git a/packages/graph-explorer/src/hooks/translations/sparql-translations.json b/packages/graph-explorer/src/hooks/translations/sparql-translations.json
@@ -10,19 +10,19 @@
     "graph-type": "RDF-SPARQL",
     "nodes": "Resources",
     "edges": "Predicates",
-    "search-placeholder": "Search for Classes",
-    "no-search-title": "No Classes",
-    "no-search-subtitle": "No Classes found with searched criteria",
+    "search-placeholder": "Search for resource classes",
+    "no-search-title": "No Resource Classes",
+    "no-search-subtitle": "No resource classes found with searched criteria",
     "no-elements-title": "No Resources",
-    "no-elements-subtitle": "No Resources found to be shown in this list"
+    "no-elements-subtitle": "No resources found to be shown in this list"
   },
   "nodes-styling": {
-    "title": "Resources Styling",
+    "title": "Resource Styling",
     "node-id": "Resource URI",
     "node-type": "Class"
   },
   "edges-styling": {
-    "title": "Predicates Styling",
+    "title": "Predicate Styling",
     "edge-type": "Predicate"
   },
   "node-detail": {
@@ -31,38 +31,39 @@
   },
   "keyword-search": {
     "node-type": "Class",
+    "node-type-placeholder": "Select a resource class",
     "node-attribute": "Predicate",
-    "node-exact-match": "Match Precision"
+    "node-attribute-placeholder": "Select a predicate"
   },
   "entities-filter": {
-    "node-types": "Resource Types",
-    "edge-types": "Predicates Types"
+    "node-types": "Resource Classes",
+    "edge-types": "Predicate Classes"
   },
   "node-expand": {
     "edge-selection-title": "Predicate Selection",
-    "edge-selection-subtitle": "Select a Resource to expand its connections",
+    "edge-selection-subtitle": "Select a resource to expand its connections",
     "no-selection-title": "No Selection",
-    "no-selection-subtitle": "Select a Resource to expand its connections",
+    "no-selection-subtitle": "Select a resource to expand its connections",
     "multi-selection-title": "Multiple Selection",
-    "multi-selection-subtitle": "Select a single Resource to expand its connections",
+    "multi-selection-subtitle": "Select a single resource to expand its connections",
     "no-connections-title": "Unconnected Resource",
     "no-connections-subtitle": "This resource has no connection. Therefore, it is not expandable",
     "no-unfetched-title": "Nothing to Expand",
     "no-unfetched-subtitle": "This resource has been completely expanded",
-    "neighbors-of-type": "Expand Neighbors of class"
+    "neighbors-of-type": "Expand neighbors of class"
   },
   "entities-tabular": {
     "all-nodes": "All Resources",
     "all-edges": "All Predicates",
-    "node-id": "Resource URI",
+    "node-id": "URI",
     "node-type": "Class",
-    "nodes-placeholder": "Add resources in the Graph View see their information",
+    "nodes-placeholder": "Add resources in the Graph View to see their information",
     "edge-type": "Predicate",
     "source-id": "Source URI",
     "source-type": "Source Class",
     "target-id": "Target URI",
     "target-type": "Target Class",
-    "edges-placeholder": "Add resources in the Graph View see their predicates"
+    "edges-placeholder": "Add resources in the Graph View to see their predicates"
   },
   "data-explorer": {
     "node-id": "Resource URI",

diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx
@@ -78,8 +78,8 @@ function SearchableVertexTypesList() {
   if (!vtConfigs.length) {
     return (
       <PanelEmptyState
-        title={t("connection-detail.no-types-title")}
-        subtitle={t("connection-detail.no-types-subtitle")}
+        title={t("connection-detail.no-elements-title")}
+        subtitle={t("connection-detail.no-elements-subtitle")}
       />
     );
   }

diff --git a/packages/graph-explorer/src/modules/EntitiesTabular/components/EdgesTabular.tsx b/packages/graph-explorer/src/modules/EntitiesTabular/components/EdgesTabular.tsx
@@ -48,6 +48,7 @@ const EdgesTabular = forwardRef<TabularInstance<ToggleEdge>, any>(
           label: "Visibility",
           accessor: "__is_visible",
           cellComponent: makeIconToggleCell<ToggleEdge>({
+            title: "Toggle Visibility",
             on: <VisibleIcon />,
             off: <NonVisibleIcon style={{ color: "#FA8500" }} />,
             getValue: ({ cell }) => !!cell.value,
@@ -127,7 +128,7 @@ const EdgesTabular = forwardRef<TabularInstance<ToggleEdge>, any>(
         selectedRowIds={selectedRowsIds}
         toggleRowSelected={onSelectRows}
         data={data}
-        columns={columns as any[]}
+        columns={columns}
         onDataFilteredChange={rows => {
           const edgesIds = edges.keys().toArray();
           const ids = rows.map(row => row.original.id);

diff --git a/packages/graph-explorer/src/modules/EntitiesTabular/components/NodesTabular.tsx b/packages/graph-explorer/src/modules/EntitiesTabular/components/NodesTabular.tsx
@@ -54,6 +54,7 @@ const NodesTabular = forwardRef<TabularInstance<ToggleVertex>, any>(
           label: "Visibility",
           accessor: "__is_visible",
           cellComponent: makeIconToggleCell<ToggleVertex>({
+            title: "Toggle Visibility",
             on: <NonVisibleIcon style={{ color: "#FA8500" }} />,
             off: <VisibleIcon />,
             getValue: ({ cell }) => !cell.value,
@@ -84,21 +85,21 @@ const NodesTabular = forwardRef<TabularInstance<ToggleVertex>, any>(
         {
           id: "displayName",
           accessor: "displayName",
-          label: "Display Name",
+          label: "Name",
           overflow: "ellipsis",
           oneLine: true,
         },
         {
           id: "displayDescription",
           accessor: "displayDescription",
-          label: "Display Description",
+          label: "Description",
           overflow: "ellipsis",
           oneLine: true,
           width: 300,
         },
         {
           accessor: "neighborCounts",
-          label: "Total Neighbors",
+          label: "Neighbors",
           overflow: "ellipsis",
           oneLine: true,
           filterType: {