add new single value filter field

README.md

@@ -13,7 +13,7 @@ Network Navigator lets you explore node-link data by panning over and zooming in
 -   Install [yarn](https://yarnpkg.com/lang/en/docs/install)
 -   Run `yarn` on the project directory, which will install all the dependencies
 -   Run `yarn package` which compile the `network-navigator`, and `network-navigator-powerbi` packages.
-    -   Compiling `network-navigator-powerbi` will also create a `.pbiviz` file in the `packages/network-navigator/powerbi/dist` directory, which can be imported directly in [Power BI](https://app.powerbi.com/)
+    -   Compiling `network-navigator-powerbi` will also create a `.pbiviz` file in the `packages/network-navigator-powerbi/dist` directory, which can be imported directly in [Power BI](https://app.powerbi.com/)
 
 ## Test
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@essex/powerbi-visuals-network-navigator",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"license": "MIT",
 	"private": true,
 	"scripts": {

packages/network-navigator-powerbi/capabilities.json

@@ -5,6 +5,11 @@
 			"displayName": "Source Node",
 			"kind": "GroupingOrMeasure"
 		},
+        {
+			"name": "SINGLE_VALUE_COLUMN",
+			"displayName": "Render on single value",
+			"kind": "GroupingOrMeasure"
+		},
 		{
 			"name": "TARGET_NODE",
 			"displayName": "Target Node",
@@ -71,6 +76,11 @@
 								"to": "SOURCE_NODE"
 							}
 						},
+						{
+							"bind": {
+								"to": "SINGLE_VALUE_COLUMN"
+							}
+						},
 						{
 							"bind": {
 								"to": "TARGET_NODE"

packages/network-navigator-powerbi/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@essex/network-navigator-powerbi",
 	"description": "default_template_value",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"license": "MIT",
 	"author": "Microsoft",
 	"scripts": {

packages/network-navigator-powerbi/pbiviz.json

@@ -4,7 +4,7 @@
 		"displayName": "Network Navigator",
 		"visualClassName": "Visual",
 		"guid": "NetworkNavigator1550434005853",
-		"version": "3.0.0",
+		"version": "3.1.0",
 		"description": "This visual is experimental and not actively being developed, only major issues will be addressed. Network Navigator lets you explore node-link data by panning over and zooming into a force-directed node layout (which can be precomputed or animated live). From an initial overview of all nodes, you can use simple text search to enlarge matching nodes in ways that guide subsequent navigation. Network nodes can also be color-coded based on additional attributes of the dataset and filtered by linked visuals.",
 		"supportUrl": "https://github.com/Microsoft/PowerBI-visuals-NetworkNavigator",
 		"gitHubUrl": "https://github.com/Microsoft/PowerBI-visuals-NetworkNavigator"

packages/network-navigator-powerbi/src/configs/DATA_ROLES.ts

@@ -15,6 +15,13 @@ export const DATA_ROLES = {
 		displayName: 'Source Node',
 		name: 'SOURCE_NODE',
 	},
+	/**
+	 * The source node
+	 */
+	singleValueColumn: {
+		displayName: 'Single Value Column',
+		name: 'SINGLE_VALUE_COLUMN',
+	},
 
 	/**
 	 * The target node

packages/network-navigator-powerbi/src/configs/converter.ts

@@ -5,17 +5,17 @@
 
 import powerbi from 'powerbi-visuals-api'
 
-import { INetworkNavigatorSelectableNode } from './models'
-import { DATA_ROLES } from './DATA_ROLES'
-import * as models from 'powerbi-models'
-
-import DataView = powerbi.DataView
-import ISelectionIdBuilder = powerbi.visuals.ISelectionIdBuilder
 import {
 	INetworkNavigatorData,
 	INetworkNavigatorLink,
 	VisualSettings,
 } from '@essex/network-navigator'
+import * as models from 'powerbi-models'
+import { DATA_ROLES } from './DATA_ROLES'
+import { INetworkNavigatorSelectableNode } from './models'
+
+import DataView = powerbi.DataView
+import ISelectionIdBuilder = powerbi.visuals.ISelectionIdBuilder
 
 /**
  * Converts the powerbi data view into an internal data structure
@@ -24,6 +24,7 @@ import {
 function converter(
 	dataView: DataView,
 	settings: VisualSettings,
+	activateSingleValueFilter: () => void,
 	columnToFilter?: powerbi.DataViewMetadataColumn,
 	createIdBuilder?: () => ISelectionIdBuilder,
 ): INetworkNavigatorData<INetworkNavigatorSelectableNode> {
@@ -62,7 +63,18 @@ function converter(
 	const edgeColorValueIdx = colMap[roles.edgeColorValue.name]
 	const sourceNodeWeightIdx = colMap[roles.sourceNodeWeight.name]
 	const targetNodeWeightIdx = colMap[roles.targetNodeWeight.name]
+	const nodeFilterIdx = colMap[roles.singleValueColumn.name]
 
+	if (
+		nodeFilterIdx !== undefined &&
+		new Set(table.rows.map(x => x[nodeFilterIdx])).size > 1
+	) {
+		activateSingleValueFilter()
+		return {
+			nodes: [],
+			links: [],
+		}
+	}
 	/**
 	 * Creates a node with the given value if the node has not already been seen/created
 	 */

packages/network-navigator-powerbi/src/style/visual.less

@@ -131,3 +131,13 @@ body {
 #search-filter-box:focus-visible {
 	outline: unset;
 }
+
+#node-filtered {
+    display: flex;
+    margin: auto;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}

packages/network-navigator-powerbi/src/visual.ts

@@ -115,6 +115,7 @@ export class Visual implements IVisual {
 			options.dataViews &&
 			options.dataViews.length &&
 			options.dataViews[0]
+
 		this._dataView = dataView
 		const dataViewTable = dataView && dataView.table
 		const dataChanged = this._dataViewTable !== dataViewTable
@@ -135,9 +136,12 @@ export class Visual implements IVisual {
 						n => n.roles[DATA_ROLES.filterField.name],
 					)[0]
 
+					this.networkNavigator.deactivateSingleValueMessage()
 					const newData = converter(
 						dataView,
 						this.visualSettings,
+						() =>
+							this.networkNavigator.activateSingleValueMessage(),
 						filterColumn,
 						() => this.host.createSelectionIdBuilder(),
 					)

packages/network-navigator/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@essex/network-navigator",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "",
 	"main": "src/index.ts",
 	"publishConfig": {

packages/network-navigator/src/NetworkNavigator.ts

@@ -1,3 +1,4 @@
+import { nodeCount } from './defaults'
 /*
  *  Power BI Visual CLI
  *
@@ -40,7 +41,6 @@ import {
 	gravity,
 	linkDistance,
 	linkStrength,
-	nodeCount,
 } from './defaults'
 import type {
 	INetworkNavigatorConfiguration,
@@ -225,10 +225,11 @@ export class NetworkNavigator {
 				config: { default: number; min: number; max: number },
 			): number => {
 				const { default: defaultValue, min, max } = config
+				const assignedValue = <number>newConfig[settingName][name]
 
 				let newValue = max
-					? Math.min(<number>newConfig[settingName][name], max)
-					: newConfig[settingName][name]
+					? Math.min(assignedValue, max)
+					: assignedValue
 				return (
 					(min ? Math.max(<number>newValue, min) : newValue) ||
 					defaultValue
@@ -354,6 +355,18 @@ export class NetworkNavigator {
 			this.redrawSelection()
 		}
 	}
+	/**
+	 * Shows the single value message
+	 */
+	public activateSingleValueMessage() {
+		this.element.singleValueMessage.css('display', 'flex')
+	}
+	/**
+	 * Hides the single value message
+	 */
+	public deactivateSingleValueMessage() {
+		this.element.singleValueMessage.css('display', 'none')
+	}
 
 	/**
 	 * Gets the currently selected node

packages/network-navigator/src/VisualSettings.ts

@@ -35,7 +35,7 @@ class SearchSettings {
 
 class LayoutSettings {
 	public animate: boolean = DEFAULT_CONFIGURATION.animate
-	public maxNodeCount?: number = DEFAULT_CONFIGURATION.maxNodeCount
+	public maxNodeCount: number = DEFAULT_CONFIGURATION.maxNodeCount
 	public maxNodeSize?: number = DEFAULT_CONFIGURATION.maxNodeSize
 	public minNodeSize: number = DEFAULT_CONFIGURATION.minNodeSize
 	public linkDistance: number = DEFAULT_CONFIGURATION.linkDistance

packages/network-navigator/src/templates/GraphElement.ts

@@ -48,6 +48,9 @@ export class GraphElement {
 	public get filterBox() {
 		return this.element.find('#search-filter-box')
 	}
+	public get singleValueMessage() {
+		return this.element.find('#single-value-message')
+	}
 
 	public get textFilter(): string {
 		return <string>this.filterBox.val()
@@ -64,6 +67,7 @@ export class GraphElement {
                 </div>
             </div>
             <div class="svg-container">
+                <h3 id="single-value-message">Make a selection to view the graph</h3>
             </div>
         </div>
     `