Merge pull request #71 from Azure-Samples/development

Development

client/package.json

@@ -15,12 +15,14 @@
     "cytoscape-fcose": "^1.2.0",
     "cytoscape-klay": "^3.1.3",
     "fast-json-patch": "^3.0.0-1",
+    "file": "^0.2.2",
     "golden-layout": "^1.5.9",
     "http-proxy-middleware": "^1.0.3",
     "json-markup": "^1.1.3",
     "jsoneditor": "^8.6.1",
     "jsoneditor-react": "^3.0.0",
     "jsonld-graph": "^3.0.10",
+    "jsonlint": "^1.6.3",
     "msal": "^1.2.1",
     "node-sass": "^4.14.1",
     "office-ui-fabric-react": "^7.117.4",
@@ -32,6 +34,7 @@
     "react-excel-renderer": "^1.1.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.3",
+    "system": "^2.0.1",
     "typescript": "^3.7.5",
     "uuid": "^7.0.1"
   },

client/src/components/ConsoleComponent/ConsoleComponent.js

@@ -24,7 +24,7 @@ export class ConsoleComponent extends Component {
       try {
         const twin = await apiService.getTwinById(arg1);
         const properties = await new ModelService().getProperties(twin.$metadata.$model);
-        const prop = properties.filter(p => p.name === arg3);
+        const prop = Object.keys(properties).filter(p => p === arg3);
 
         if (prop <= 0) {
           this.pushToStdout("*** Property doesn\"t exist!");

client/src/components/GraphViewerComponent/GraphViewerCommandBarComponent/GraphViewerCommandBarComponent.js

@@ -32,15 +32,6 @@ export class GraphViewerCommandBarComponent extends Component {
   }
 
   farItems = [
-    {
-      key: "hideTwins",
-      text: "Hide Selected Twins",
-      ariaLabel: "hide selected twins",
-      iconProps: { iconName: "Hide" },
-      onClick: () => this.onTwinsHide(),
-      iconOnly: true,
-      className: this.buttonClass
-    },
     {
       key: "deleteTwin",
       text: "Delete Selected Twins",
@@ -102,6 +93,52 @@ export class GraphViewerCommandBarComponent extends Component {
       iconOnly: true,
       commandBarButtonAs: () => this.renderRelationshipExpansionItem()
     },
+    {
+      key: "showTwins",
+      text: "Show All",
+      iconProps: { iconName: "RedEye" },
+      onClick: () => this.props.onShowAll(),
+      iconOnly: true,
+      className: this.buttonClass
+    },
+    {
+      key: "hideTwins",
+      text: "Hide",
+      ariaLabel: "show all twins",
+      iconProps: { iconName: "Hide" },
+      iconOnly: true,
+      split: true,
+      onClick: () => this.props.onTriggerHide(),
+      className: `${this.buttonClass} command-bar-dropdown`,
+      subMenuProps: {
+        items: [
+          {
+            key: "hide-others",
+            text: "Hide all others",
+            ariaLabel: "Hide all others",
+            onClick: () => this.props.onHideOthers()
+          },
+          {
+            key: "hide-non-children",
+            text: "Hide non-children",
+            ariaLabel: "Hide non children",
+            onClick: () => this.props.onHideNonChildren()
+          },
+          {
+            key: "hide-selected",
+            text: "Hide selected",
+            ariaLabel: "Hide selected",
+            onClick: () => this.props.onHide()
+          },
+          {
+            key: "hide-with-children",
+            text: "Hide selected and children",
+            ariaLabel: "Hide selected and children",
+            onClick: () => this.props.onHideWithChildren()
+          }
+        ]
+      }
+    },
     {
       key: "expansionMode",
       text: "Expansion Mode",
@@ -205,9 +242,10 @@ export class GraphViewerCommandBarComponent extends Component {
   }
 
   render() {
-    const { selectedNode, selectedNodes, onTwinDelete, onRelationshipCreate, query, onGetCurrentNodes, selectedEdge } = this.props;
-    this.farItems.find(i => i.key === "hideTwins").disabled = !selectedNodes || selectedNodes.length < 1;
+    const { selectedNode, selectedNodes, onTwinDelete, onRelationshipCreate, query, onGetCurrentNodes, selectedEdge, canShowAll } = this.props;
     this.farItems.find(i => i.key === "deleteTwin").disabled = !selectedNode;
+    this.farItems.find(i => i.key === "hideTwins").disabled = !selectedNodes || selectedNodes.length !== 1;
+    this.farItems.find(i => i.key === "showTwins").disabled = !canShowAll;
     this.farItems.find(i => i.key === "getRelationship").disabled = !selectedNodes || selectedNodes.length !== 1;
     this.farItems.find(i => i.key === "addRelationship").disabled = !selectedNodes || selectedNodes.length !== 2;
     this.farItems.find(i => i.key === "deleteRelationship").disabled = !selectedEdge;
@@ -224,7 +262,7 @@ export class GraphViewerCommandBarComponent extends Component {
         item.iconProps = { iconName: item.key === this.state.relTypeLoading ? "CheckMark" : "" };
         return item;
       });
-
+    this.farItems.find(i => i.key === "hideTwins").subMenuProps.items.forEach(item => item.iconProps = { iconName: item.key === this.props.hideMode ? "CheckMark" : "" });
     return (
       <>
         <CommandBar className="gv-commandbar"

client/src/components/GraphViewerComponent/GraphViewerComponent.js

@@ -27,7 +27,9 @@ export class GraphViewerComponent extends React.Component {
       selectedNode: null,
       selectedNodes: null,
       selectedEdge: null,
-      layout: "Klay"
+      layout: "Klay",
+      hideMode: "hide-others",
+      canShowAll: false
     };
     this.cyRef = React.createRef();
     this.commandRef = React.createRef();
@@ -77,7 +79,7 @@ export class GraphViewerComponent extends React.Component {
   }
 
   async getData(query) {
-    const { isLoading } = this.state;
+    const { isLoading, selectedNode } = this.state;
     if (!query || isLoading) {
       return;
     }
@@ -88,6 +90,14 @@ export class GraphViewerComponent extends React.Component {
     try {
       const allTwins = await this.getTwinsData(query);
       await this.getRelationshipsData(allTwins, 30, false, true, REL_TYPE_OUTGOING);
+      if (selectedNode) {
+        const selected = allTwins.find(t => t.$dtId === selectedNode.id);
+        if (selected) {
+          eventService.publishSelection(selected);
+        } else {
+          eventService.publishSelection();
+        }
+      }
     } catch (exc) {
       if (exc.errorCode !== "user_cancelled") {
         exc.customMessage = "Error fetching data for graph";
@@ -239,12 +249,18 @@ export class GraphViewerComponent extends React.Component {
     eventService.publishSelection();
   }
 
-  onTwinsHide = () => {
-    const { selectedNodes } = this.state;
-    if (selectedNodes.length > 0) {
-      this.cyRef.current.hideSelectedTwins();
-    }
-  }
+  onHide = () => this.setState({ hideMode: "hide-selected" });
+
+  onHideOthers = () => this.setState({ hideMode: "hide-others" });
+
+  onHideNonChildren = () => this.setState({ hideMode: "hide-non-children" });
+
+  onHideWithChildren = () => this.setState({ hideMode: "hide-with-children" });
+
+  onShowAll = () => {
+    this.cyRef.current.showAllNodes();
+    this.setState({ canShowAll: false });
+  };
 
   onRelationshipCreate = async relationship => {
     if (relationship) {
@@ -266,17 +282,46 @@ export class GraphViewerComponent extends React.Component {
     this.cyRef.current.doLayout();
   }
 
+  onTriggerHide = () => {
+    const { selectedNodes, hideMode } = this.state;
+    if (selectedNodes && selectedNodes.length > 0) {
+      switch (hideMode) {
+        case "hide-selected":
+          this.cyRef.current.hideSelectedTwins();
+          break;
+        case "hide-others":
+          this.cyRef.current.hideOtherTwins();
+          break;
+        case "hide-non-children":
+          this.cyRef.current.hideNonChildren();
+          break;
+        case "hide-with-children":
+          this.cyRef.current.hideWithChildren();
+          break;
+        default:
+          break;
+      }
+    }
+    this.setState({ canShowAll: true });
+  }
+
   render() {
-    const { selectedNode, selectedNodes, selectedEdge, isLoading, query, progress, layout } = this.state;
+    const { selectedNode, selectedNodes, selectedEdge, isLoading, query, progress, layout, hideMode, canShowAll } = this.state;
     return (
       <div className="gc-grid">
         <div className="gc-toolbar">
           <GraphViewerCommandBarComponent className="gc-commandbar" buttonClass="gc-toolbarButtons" ref={this.commandRef}
             selectedNode={selectedNode} selectedNodes={selectedNodes} query={query} selectedEdge={selectedEdge}
-            layouts={Object.keys(GraphViewerCytoscapeLayouts)} layout={layout}
+            layouts={Object.keys(GraphViewerCytoscapeLayouts)} layout={layout} hideMode={hideMode}
             onRelationshipCreate={this.onRelationshipCreate}
             onTwinDelete={this.onTwinDelete}
-            onTwinsHide={this.onTwinsHide}
+            onHideOthers={this.onHideOthers}
+            onHideNonChildren={this.onHideNonChildren}
+            onHide={this.onHide}
+            onHideWithChildren={this.onHideWithChildren}
+            onTriggerHide={this.onTriggerHide}
+            onShowAll={this.onShowAll}
+            canShowAll={canShowAll}
             onLayoutClicked={() => this.cyRef.current.doLayout()}
             onZoomToFitClicked={() => this.cyRef.current.zoomToFit()}
             onCenterClicked={() => this.cyRef.current.center()}