Inspiration

The key inspiration to develop Omniview was to bring a new creative and unique way for Monday users to view and interact with their boards following the 'Monday visualise your work' theme that's across the platform. Giving the end users a new and creative way to visualise and interact with their boards.

This project brings a new and exciting way for Monday users to interact with their boards and using Omniview will help them to identify bottlenecks, dependencies and add to their work in almost '3D' like way!

What it does

Omniview allows users to view and interact with their boards in a visual, creative and unique way. Currently supporting three highly used and popular column types (People, Dependency and Connect Board) users can select one of these columns within the App and with the use of an advance data driven graphic they can visualise their board and connect items to other items, users and teams.

The data stays with the user as this App is running client side with React JS and GraphQL it doesn't store any data, oh... and it's virtually infinitely scalable!

Features:

  1. Supports 3 highly used and popular Monday Column types
  2. Add new Items in your board in a visual way
  3. Connect Item to Item dependencies
  4. Connect Item to Person dependencies
  5. Connect Item to Team dependencies
  6. Highlight key dependencies

Features by Column Types:

A. People Column Type

  1. View task to user and team dependencies
  2. Add Users and Team to the graph that are in your account
  3. Link Items to Users
  4. View item information
  5. Add new Items

B. Dependency Column Type

  1. View Task to Task
  2. View item information
  3. Add new Items (Due to API mutation capability it is not yet possible to link this type of Column - However, you can use a Connect Board Column Type and connect it to the same board which will give your this feature)

C. Connect Board Column Type

  1. View Task to Task dependencies
  2. Add item from connected board to your graph
  3. Link Items from current board to connected board Items
  4. View item information
  5. Add new Items

enter image description here

How I built it

I started building Omniview using the MondaySDK and D3 to create the visuals for the applications. Utilising the Monday API Playground I was able to create the GraphQL queries which I then used in the application to allow it to query the boards and mutations to allow it to create new connections and new items.

Referenced the Monday Design System and used a UI library to make Omniview feel like a Monday styled app. I used ngrok and the Monday Apps framework publish my application.

Challenges I ran into

The two main challenges I run into were with the Monday GraphQL API and the data I could get from it. After researching and attending a webinar I realised that the Dependency column did not support mutations and as I originally thought from the API Documentation that the Item Link column supported mutations I had to remove the feature of Dependency within boards until the API becomes available (However, after I did a bit more research on this I realised that the Connect Board allows users to connect it to the existing board which I have build the features to support this to be linked as the API supports mutations.)

The other challenge was not using the monday.api from the start. As I found Apollo was one of the key tools for GraphQL integrations and the fact it caches data I went for that. However, I ended up refactoring my code to remove Apollo and use the monday.api instead as it offers a much better seamless authorisation.

Accomplishments that I'm proud of

I'm proud of the overall project as this was the first event time I used React, GraphQL and D3... I feel that this app is 'out of the ordinary' but definitely one of those apps that will become a must have in the future for all users!

What I learned

As this was my first ever project using React and GraphQL, it was a steep learning curve and learnt a lot! One of the fun parts of this project was learning and working with D3 and trying to make it so that it benefits Monday users. It was interesting to see how Force-Directed Graphs work and how they use advanced data graphics, gravity parameters and other elements to work.

Furthermore, working with GraphQL for the first time ever it was very different to using REST. Especially the fact you cannot just make a query and bring in all the data as you would with REST but rather you have to be mindful of the complexity of the request. I prefer using GraphQL over REST as it simplifies the number of calls and the data you get back.

What's next for Omniview App

This is not the end for Omniview! Users will benefit from the future release features which will include but not limited to:

  1. Delete Items/Links Users will be able to delete items within the Omniview App Users will be able to delete dependency links between Item to Items, People and Teams
  2. Connect Dependency Column types (once the API becomes available) Users will be able to connect item to item using the Dependencies Column
  3. Mixed views Users will be able to select multiple columns at ones to see more complex relationships and view of their boards

Omniview Project Logo

Built With

  • creativity
  • d3.js
  • dedication
  • graphql
  • mondaysdk
  • passion
  • react
Share this project:

Updates