azure / azure-digital-twins-graph-viewer

The Azure Digital Twins Graph Viewer can be used and customized to visualize the spaces, devices, and sensors in your Azure Digital Twins spatial graph.

IMPORTANT NOTE

The Digital Twins Graph Viewer in this repository was built for the Digital Twins early preview released in 2018. It is not compatible with the latest Azure Digital Twins service released in June 2020.

For connecting to the new Azure Digital Twins service, please have a look at the Azure Digital Twins Explorer.

Introduction

This "Azure Digital Twins Graph Viewer" serves as a front-end to the Azure Digital Twins spatial intelligence graph. It provides the following features:

• Visualizing the relationship between spaces, devices and sensors created in the Azure Digital Twins model
• Add, Edit and Delete Spaces, Devices and Sensors
• Changing the hierarchy by moving devices and spaces to different spaces
• Viewing basic properties and values of nodes
• Add a root space and IoT Hub as resource if the digital twin is empty
• Execute direct API calls to do all other digital twin interactions not implemented

The Graph Viewer is built to be a lightweight, adaptable front-end. It uses only client-side code and as such should be easy to deploy in different environments.

Setup instructions

Prerequisites

Before using the Graph Viewer, make sure that your deployment of Azure Digital Twins is complete. You will need to perform at least the following steps:

• Deploy an Azure Digital Twins instance to your Azure subscription.
• Create a root space in your topology. Under the samples directory, you can find an example topology that you could use.

For detailed instructions, please refer to the Azure Digital Twins quick start guide

Creating an Azure AD application

In order to connect to Azure Digital Twins, the Graph Viewer must be registered in Azure Active Directory.

1. Navigate to the Azure Active Directory page in the Azure portal.
2. Create a new application. Be sure to select Web/API and enter the exact URL you will deploy the Graph Viewer to.

3. After creation, take note of the Application ID guid. You will need that later.
4. Go to Settings / Permissions and select the Azure Digital Twins service from the API list. Specify 'Read/Write Access' as the required permission.

5. Confirm the screen and click 'Grant permissions.'
6. Click the 'Edit Manifest' button on the app blade. In the manifest, change the value for the 'oauth2AllowImplicitFlow' setting to 'true' and save.

Prepare files

• Clone or download the repository files to your computer.

Deploy

Upload the files you've prepared in the previous step to your webserver. For example, you could create an Azure web app and deploy using FTP or VSTS. Alternatively, you could run this off a localhost webserver. Just make sure the reply-url in the AzureAD application has been set to the appropriate URL. Running this locally by opening the files is not supported, since the login redirect from AzureAD would fail.

After deploying, you should be able to navigate to your deployment and sign in to the Graph Viewer. When you open the Graph Viewer webpage, enter the following information in the text boxes:

• twinsInstanceRoot: This is the full URL of your Azure Digital Twins instance, ending in azuresmartspaces.net.
• tenant: This is the name or id of your Azure tenant, for example 6f68d89e-8f99-4798-8850-a5d557c3341e
• clientId: This is the application id of the Azure Active Directory application you created in the previous step. It is formatted as a Guid.

Run as Docker container

If you want to run the the Graph Viewer as Docker container on your machine, you can execute the following commands from within the root directory of the repository:

• docker build . -t azure-digital-twins-viewer
• docker run -p 8080:80 azure-digital-twins-viewer

Open your browser and go to http://localhost:8080 to view the Graph viewer locally.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

azure-digital-twins-graph-viewer's Issues

page not responding

Hi there,

ive done all processes but blocked before logging into the site.
when i put in my digital twin root url + tenant id + client id, there is no response from the site, 'sign in' icon does not work.

any help is appreciated.

Spaces and other elements

Hello, I'm having some trouble seeing my provisioned elements in the viewer. I have two registered apps (one native and one web). I can clearly see the provisioned elements following the tutorial here https://docs.microsoft.com/en-us/azure/digital-twins/quickstart-view-occupancy-dotnet#provision-graph in Postman, but not in the Viewer. I can authenticate with both apps and I see no difference between the two in Postman. But, in the viewer, I can only see some elements that I manually created via POST https://{{digital-twins-name}}.{{region}}.azuresmartspaces.net/management/api/v1.0/spaces

Is there something I am doing wrong? It doesn't seem to matter what client ID I use in the appSettings.json file.

Kind regards,
Tudor Mazilu

Document well "Deploy Steps", they are too vague

Hi guys,

It took me a bit to deploy Graph Viewer and this is because of these steps being too generic. Could you please document these please? Do not assume your audience are devs ...

"Upload the files you've prepared in the previous step to your webserver. For example, you could create an Azure web app and deploy using FTP or VSTS. Alternatively, you could run this off a localhost webserver. Just make sure the reply-url in the AzureAD application has been set to the appropriate URL. Running this locally by opening the files is not supported, since the login redirect from AzureAD would fail."

Thank you
--Alina

Spinning wheel

Hi,

I am running the solution in a local docker container. I could sign in correctly, but after logging in, I see the screen but only with a spinning wheel. I have used the '/' on the end for my root URL. Any idea what can be wrong?

thanks,

Remco

Digital twins data isn't loaded when another person tries to login

I have added one person as a contributor to my azure account but when that person tries to view the graph viewer it gives an error message saying no data was returned from digital twins.

Step 6 of README, could be clearer that 'Edit Manifest' button is back on app page

On step 6 of the README, it is not clear where the 'Edit Manifest' button is. I was initially confused as I was not seeing it on the Settings and/or Settings/Required permissions blades. Could be clearer to say return to the app blade.

Trouble signing in

I have deployed the code into a web app in azure but when i try to access the web app, it gives me the below error.

AADSTS50011: The reply url specified in the request does not match the reply urls configured for the application: '1be*****************6d91475'.

the redirect url for the app service i have given is "https://twinsvisualizer.azurewebsites.net/"

If management URL is not correct, progress wheel spins indefinitely.

Repro:

1. In the sign-in page, enter the management URL without a trailing forward-slash (/) character. For example, "https://<>.westus2.azuresmartspaces.net".
2. Fill in the rest of the sign-in details.
   3, Hit 'Sign-in' button.

Expected: Graph is shown.
Actual: The progress wheel spins indefinitely. Also, the browser's debug console shows that there are failed HTTP requests.

No view shown after login

HI - after following your deployment instructions I successfully logged into the graph viewer web app. All I am seeing is a spinning icon in the middle of the page? Can you please advise as to the cause?

App won't render multiple trees

My user has role assignments on two individual spaces that aren't linked to each other. API calls to GET /spaces show all of the spaces in both of these subtrees, but the app only renders the first subtree in the results.

Authentication with B2C tenant

Hi,
I'm trying to deploy your graph viewer with a B2C tenant on a .net core web app.
The web app has no problem authenticating with the tenant on it's own through an application (App1) inside the tenant. But I don't know how to integrate the needed tokens for linking graph viewer to digital twin resource.
But first I'm not sure if I should use the Application ID from the App1 or from TwinsVisualizer like in your Setup.

I'm sorry if I am not very clear, I'm still new to Azure and the used jargon.

Any help is appreciated.
Kind regards
Quentin

Wrong SpaceId from sensors if dragging device to the other space.

The spaceId of the device has been changed if dragging the device from one space to the other. However, the spaceId of the sensors (under the same device) remain as the old ones..

Icons not shown on Mac because of missing font

All icons are not show on a Mac, because font "Segoe MDL2 Assets" is not available.