upocek / componentdrivendevelopment

Graph visualization app

Have you ever wondered is it possible to combine software code like puzzles?🧩🤔 In this project we "turned our brains on" to wire independent components into a masterpiece.✨

All in One

WhatsApp.Video.2023-03-11.at.12.22.23.mp4

Software components

Parsers

Parsers are components that convert specific data into a graph structure. In this app, we provided three different parser options: Wikipedia Parser, XML Parser, and JSON Parser.✂️

Main Component

Main Component is the central view where the selected graph is displayed. It is a placeholder for the other three components that can visualize graphs in distinct ways: Simple Visualization, Advanced Visualization, and AR Visualization. 🎯

AR Visualizator

AR Visualizator component lets the user to view his/her graph in augmented reality mode. 😲

Bird View

Bird View component is minimized graph visualization shown from the bird's perspective, and additionally provides zoom in/out functions. 🐥

TreeView

TreeView is tree data structure component that unfolds dynamically, lets user to see parent-child relationship and overcomes cycles in graph. 🌴

Search And Filter

Search And Filter component lets the user apply filters on graph and keyword searches, and as a result, displays a graph based on those needs.🔍

Applied Filters List

Applied Filters List is a component that enables the user to see all applied filters and searches and to remove them dynamically so the node selection meets his new criteria.🧾

Installation

First step

1. Choose a directory
2. Open CMD or Bash
3. Create a virtual environment
4. Activate it

To achieve this follow below.

For Windows users:

python -m venv venv

If you’re using Python on Windows and you haven’t configured the PATH and PATHEXT variables, then you might need to provide the full path to your Python executable:

C:\Users\Name\AppData\Local\Programs\Python\Python310\python -m venv venv

For activation run following command:

venv\Scripts\activate

For Linux and MacOS users:

python3 -m venv venv

For activation run following command:

source venv/bin/activate

Second step

Clone this repository in current directory by typing following command:

git clone https://gitlab.com/sok_2022_2023/tim02.git

Third step

Change location directory location

cd ./tim02

Fourth step

For all required packages to be installed in your venv run the following.

For Windows users:

python -m pip install -r requirements.txt

For Linux and MacOS users:

python3 -m pip install -r requirements.txt

Fifth step

Run installation script:

For Windows users:

.\run.bat

For Linux and MacOS users:

./run.sh

Sixth step

Open your browser on http://127.0.0.1:8000/ and check it out!