Synchronization with high number of labels with long strings

Changelog.md

@@ -10,6 +10,7 @@ The next release will include the following feature enhancements and bug fixes:
 
 **Bug fixes**
 
+- Fixed Synchronization with high number of labels with long strings (<https://github.com/aws/graph-explorer/pull/206>)
 - Fixed loading spinner rotation when synchronizing schema (<<https://github.com/aws/graph-explorer/pull/207>)
 - Fixed highlight not persisting on selected graph element (<https://github.com/aws/graph-explorer/pull/187>)
 - Bumped @types/semver to 7.5.2 in lockfile

packages/graph-explorer/src/components/Select/internalComponents/SelectListBox.tsx

@@ -25,7 +25,9 @@ const SelectListBox = (props: ListBoxProps<SelectOption>) => {
     filter: nodes =>
       !search || !props.searchable
         ? nodes
-        : new Set([...nodes].filter(node => node.value.label.includes(search))),
+        : new Set(
+            [...nodes].filter(node => node.value?.label.includes(search))
+          ),
   });
   const { listBoxProps } = useListBox(props, state, listBoxRef);
 

packages/graph-explorer/src/connector/AbstractConnector.ts

@@ -6,9 +6,11 @@ import type {
   VertexTypeConfig,
 } from "../core";
 
-export type QueryOptions = {
-  disableCache?: boolean;
-};
+export type QueryOptions =
+  RequestInit
+  & {
+    disableCache?: boolean;
+  };
 
 export type VertexSchemaResponse = Pick<
   VertexTypeConfig,
@@ -259,12 +261,9 @@ export abstract class AbstractConnector {
    * This method performs requests and cache their responses.
    */
   protected async requestQueryTemplate<TResult = any>(
-    queryTemplate: string,
     options?: QueryOptions
   ): Promise<TResult> {
-    const encodedQuery = encodeURIComponent(queryTemplate);
-    const uri = `${this.basePath}${encodedQuery}&format=json`;
-    return this.request<TResult>(uri, options);
+    return this.request<TResult>(this.basePath, options);
   }
 
   protected async request<TResult = any>(
@@ -296,7 +295,7 @@ export abstract class AbstractConnector {
       );
     }
 
-    return this._requestAndCache<TResult>(currentUri, fetchOptions, options) as Promise<TResult>;
+    return this._requestAndCache<TResult>(currentUri, { ...fetchOptions, ...options }) as Promise<TResult>;
   }
 
   private _getAuthHeaders() {
@@ -313,10 +312,9 @@ export abstract class AbstractConnector {
 
   private async _requestAndCache<TResult = any>(
     url: string,
-    init?: RequestInit,
-    options?: Pick<QueryOptions, "disableCache">
+    options?: QueryOptions
   ) {
-    const response = await fetch(url, init);
+    const response = await fetch(url, options);
     const data = await response.json();
     if (options?.disableCache !== true) {
       this._setToCache(url, { data, updatedAt: new Date().getTime() });

packages/graph-explorer/src/connector/gremlin/GremlinConnector.ts

@@ -19,7 +19,7 @@ import keywordSearch from "./queries/keywordSearch";
 import { GraphSummary } from "./types";
 
 export default class GremlinConnector extends AbstractConnector {
-  protected readonly basePath = "/?gremlin=";
+  protected readonly basePath = "/gremlin";
   private readonly _summaryPath = "/pg/statistics/summary?mode=detailed";
 
   // Stores the id type before casting it to string
@@ -76,7 +76,11 @@ export default class GremlinConnector extends AbstractConnector {
 
   private _gremlinFetch<TResult>(options?: QueryOptions) {
     return async (queryTemplate: string) => {
-      return super.requestQueryTemplate<TResult>(queryTemplate, {
+      const body = { gremlin: queryTemplate };
+
+      return super.requestQueryTemplate<TResult>({
+        method: "POST",
+        body: JSON.stringify(body),
         disableCache: options?.disableCache,
       });
     };

packages/graph-explorer/src/connector/openCypher/openCypherConnector.ts

@@ -19,7 +19,7 @@ import fetchSchema from "./queries/fetchSchema";
 import { GraphSummary } from "./types";
 
 export default class OpenCypherConnector extends AbstractConnector {
-  protected readonly basePath = "/openCypher?query=";
+  protected readonly basePath = "/openCypher";
   private readonly _summaryPath = "/pg/statistics/summary?mode=detailed";
 
   async fetchSchema(options?: QueryOptions): Promise<SchemaResponse> {
@@ -69,7 +69,13 @@ export default class OpenCypherConnector extends AbstractConnector {
 
   private _openCypherFetch<TResult>(options?: QueryOptions) {
     return async (queryTemplate: string) => {
-      return super.requestQueryTemplate<TResult>(queryTemplate, {
+      const body = `query=${encodeURIComponent(queryTemplate)}`;
+      return super.requestQueryTemplate<TResult>({
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body,
         disableCache: options?.disableCache,
       });
     };

packages/graph-explorer/src/connector/sparql/SPARQLConnector.ts

@@ -24,7 +24,7 @@ import oneHopNeighborsBlankNodesIdsTemplate from "./templates/oneHopNeighbors/on
 import { BlankNodesMap, GraphSummary, SPARQLNeighborsRequest } from "./types";
 
 export default class SPARQLConnector extends AbstractConnector {
-  protected readonly basePath = "/sparql?query=";
+  protected readonly basePath = "/sparql";
   private readonly _summaryPath = "/rdf/statistics/summary?mode=detailed";
 
   private _blankNodes: BlankNodesMap = new Map();
@@ -147,8 +147,15 @@ export default class SPARQLConnector extends AbstractConnector {
 
   private _sparqlFetch<TResult>(options?: QueryOptions) {
     return async (queryTemplate: string) => {
-      return super.requestQueryTemplate<TResult>(queryTemplate, {
+      const body = `query=${encodeURIComponent(queryTemplate)}&format=json`;
+
+      return super.requestQueryTemplate<TResult>({
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
         disableCache: options?.disableCache,
+        body,
       });
     };
   }

packages/graph-explorer/src/connector/sparql/types.ts

@@ -125,6 +125,11 @@ export type SPARQLKeywordSearchRequest = {
    * Skip the given number of results.
    */
   offset?: number;
+  /**
+   * Filter by exact matching values.
+   * 
+   */
+  exactMatch?: boolean;
 };
 
 export type SPARQLBlankNodeNeighborsRequest = {

packages/graph-explorer/src/modules/KeywordSearch/useKeywordSearch.ts

@@ -53,14 +53,10 @@ const useKeywordSearch = ({ isOpen }: { isOpen: boolean }) => {
     setSelectedAttribute(value as string);
   }, []);
 
-  const onExactMatchChange = useCallback((value: string) => {
-    if (value === "Exact") {
-      setExactMatch(true);
-    }
-    else {
-      setExactMatch(false);
-    }
-  }, []);
+  const onExactMatchChange = useCallback(
+    (value: string | string[]) => {
+      setExactMatch(Array.isArray(value) ? value[0] === "Exact" : value === "Exact");
+    }, []);
 
   const onNeighborsLimitChange = useCallback(() => {
     setNeighborsLimit(neighborsLimit => !neighborsLimit);

packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx

@@ -165,7 +165,7 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
               size={"small"}
               iconPlacement={"start"}
               onPress={() => {
-                fetchNode(cell.row.original);
+                fetchNode(cell.row.original, pageSize);
               }}
             >
               {isInExplorer ? "Sent to Explorer" : "Send to Explorer"}
@@ -176,7 +176,14 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
     });
 
     return vtColumns;
-  }, [entities.nodes, fetchNode, t, textTransform, vertexConfig?.attributes]);
+  }, [
+    entities.nodes,
+    fetchNode,
+    pageSize,
+    t,
+    textTransform,
+    vertexConfig?.attributes,
+  ]);
 
   const selectOptions = useMemo(() => {
     const options =