Remove GraphExplorerAdapter (#736)

src/Explorer/Graph/GraphExplorerComponent/GraphExplorerAdapter.tsx

@@ -1,63 +0,0 @@
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { GraphConfig } from "../../Tabs/GraphTab";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { GraphExplorer, GraphAccessor } from "./GraphExplorer";
-
-interface Parameter {
-  onIsNewVertexDisabledChange: (isEnabled: boolean) => void;
-  onGraphAccessorCreated: (instance: GraphAccessor) => void;
-  onIsFilterQueryLoading: (isFilterQueryLoading: boolean) => void;
-  onIsValidQuery: (isValidQuery: boolean) => void;
-  onIsPropertyEditing: (isEditing: boolean) => void;
-  onIsGraphDisplayed: (isDisplayed: boolean) => void;
-  onResetDefaultGraphConfigValues: () => void;
-
-  graphConfigUiData: ViewModels.GraphConfigUiData;
-  graphConfig?: GraphConfig;
-
-  collectionPartitionKeyProperty: string;
-  graphBackendEndpoint: string;
-  databaseId: string;
-  collectionId: string;
-  masterKey: string;
-
-  onLoadStartKey: number;
-  onLoadStartKeyChange: (newKey: number) => void;
-  resourceId: string;
-}
-
-export class GraphExplorerAdapter implements ReactAdapter {
-  public params: Parameter;
-  public parameters = {};
-  public isNewVertexDisabled: boolean;
-
-  public constructor(params: Parameter) {
-    this.params = params;
-  }
-
-  public renderComponent(): JSX.Element {
-    return (
-      <GraphExplorer
-        onIsNewVertexDisabledChange={this.params.onIsNewVertexDisabledChange}
-        onGraphAccessorCreated={this.params.onGraphAccessorCreated}
-        onIsFilterQueryLoadingChange={this.params.onIsFilterQueryLoading}
-        onIsValidQueryChange={this.params.onIsValidQuery}
-        onIsPropertyEditing={this.params.onIsPropertyEditing}
-        onIsGraphDisplayed={this.params.onIsGraphDisplayed}
-        onResetDefaultGraphConfigValues={this.params.onResetDefaultGraphConfigValues}
-        collectionPartitionKeyProperty={this.params.collectionPartitionKeyProperty}
-        graphBackendEndpoint={this.params.graphBackendEndpoint}
-        databaseId={this.params.databaseId}
-        collectionId={this.params.collectionId}
-        masterKey={this.params.masterKey}
-        onLoadStartKey={this.params.onLoadStartKey}
-        onLoadStartKeyChange={this.params.onLoadStartKeyChange}
-        resourceId={this.params.resourceId}
-        /* TODO Figure out how to make this Knockout-free */
-        graphConfigUiData={this.params.graphConfigUiData}
-        graphConfig={this.params.graphConfig}
-      />
-    );
-  }
-}

src/Explorer/Tabs/GraphTab.tsx

@@ -5,8 +5,12 @@ import StyleIcon from "../../../images/Style.svg";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { GraphAccessor, GraphExplorerError } from "../Graph/GraphExplorerComponent/GraphExplorer";
-import { GraphExplorerAdapter } from "../Graph/GraphExplorerComponent/GraphExplorerAdapter";
+import {
+  GraphAccessor,
+  GraphExplorer,
+  GraphExplorerError,
+  GraphExplorerProps,
+} from "../Graph/GraphExplorerComponent/GraphExplorer";
 import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
 import GraphStylingPane from "../Panes/GraphStylingPane";
 import { NewVertexPanel } from "../Panes/NewVertexPanel/NewVertexPanel";
@@ -36,15 +40,13 @@ interface GraphTabOptions extends ViewModels.TabOptions {
 }
 
 export default class GraphTab extends TabsBase {
-  public readonly html =
-    '<div class="graphExplorerContainer" role="tabpanel" data-bind="react:graphExplorerAdapter, attr: {id: tabId}"></div>';
   // Graph default configuration
   public static readonly DEFAULT_NODE_CAPTION = "id";
   private static readonly LINK_COLOR = "#aaa";
   private static readonly NODE_SIZE = 10;
   private static readonly NODE_COLOR = "orange";
   private static readonly LINK_WIDTH = 1;
-  private graphExplorerAdapter: GraphExplorerAdapter;
+  private graphExplorerProps: GraphExplorerProps;
   private isNewVertexDisabled: ko.Observable<boolean>;
   private isPropertyEditing: ko.Observable<boolean>;
   private isGraphDisplayed: ko.Observable<boolean>;
@@ -70,7 +72,7 @@ export default class GraphTab extends TabsBase {
     this.graphConfig = GraphTab.createGraphConfig();
     // TODO Merge this with this.graphConfig
     this.graphConfigUiData = GraphTab.createGraphConfigUiData(this.graphConfig);
-    this.graphExplorerAdapter = new GraphExplorerAdapter({
+    this.graphExplorerProps = {
       onGraphAccessorCreated: (instance: GraphAccessor): void => {
         this.graphAccessor = instance;
       },
@@ -89,8 +91,9 @@ export default class GraphTab extends TabsBase {
       onResetDefaultGraphConfigValues: () => this.setDefaultGraphConfigValues(),
       graphConfig: this.graphConfig,
       graphConfigUiData: this.graphConfigUiData,
-      onIsFilterQueryLoading: (isFilterQueryLoading: boolean): void => this.isFilterQueryLoading(isFilterQueryLoading),
-      onIsValidQuery: (isValidQuery: boolean): void => this.isValidQuery(isValidQuery),
+      onIsFilterQueryLoadingChange: (isFilterQueryLoading: boolean): void =>
+        this.isFilterQueryLoading(isFilterQueryLoading),
+      onIsValidQueryChange: (isValidQuery: boolean): void => this.isValidQuery(isValidQuery),
       collectionPartitionKeyProperty: options.collectionPartitionKeyProperty,
       graphBackendEndpoint: GraphTab.getGremlinEndpoint(options.account),
       databaseId: options.databaseId,
@@ -103,7 +106,7 @@ export default class GraphTab extends TabsBase {
         }
       },
       resourceId: options.account.id,
-    });
+    };
 
     this.isFilterQueryLoading = ko.observable(false);
     this.isValidQuery = ko.observable(true);
@@ -115,6 +118,14 @@ export default class GraphTab extends TabsBase {
       : `${account.name}.graphs.azure.com:443/`;
   }
 
+  public render(): JSX.Element {
+    return (
+      <div className="graphExplorerContainer" role="tabpanel" id={this.tabId}>
+        <GraphExplorer {...this.graphExplorerProps} />
+      </div>
+    );
+  }
+
   public onTabClick(): void {
     super.onTabClick();
     this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Graph);