Add visualize page

docs/README.md

@@ -8,9 +8,11 @@ Additional features: Export documents to JSON. Import documents from JSON. ISODa
 Screenshots
 -----------
 
-![MongoDB PHP GUI](https://raw.githubusercontent.com/SamuelTS/MongoDB-PHP-GUI/master/docs/screenshots/new-mpg-database-query.png)
+![MongoDB PHP GUI - Visualize Database](https://raw.githubusercontent.com/SamuelTS/MongoDB-PHP-GUI/master/docs/screenshots/newest-mpg-database-visualize.png)
 
-![MongoDB PHP GUI](https://raw.githubusercontent.com/SamuelTS/MongoDB-PHP-GUI/master/docs/screenshots/new-mpg-collection-indexes.png)
+![MongoDB PHP GUI - Query Database](https://raw.githubusercontent.com/SamuelTS/MongoDB-PHP-GUI/master/docs/screenshots/newest-mpg-database-query.png)
+
+![MongoDB PHP GUI - Manage Indexes](https://raw.githubusercontent.com/SamuelTS/MongoDB-PHP-GUI/master/docs/screenshots/newest-mpg-collection-indexes.png)
 
 Installation
 ------------
@@ -24,7 +26,7 @@ Thanks
 ------
 
 ❤️ Thanks to [Limber](https://github.com/nimbly/Limber), [Capsule](https://github.com/nimbly/Capsule), [Font Awesome](https://fontawesome.com/), [Bootstrap](https://getbootstrap.com/), [CodeMirror](https://github.com/codemirror/codemirror) and [JsonView](https://github.com/pgrabovets/json-view).<br>
-Special thanks to [MongoDB PHP library](https://github.com/mongodb/mongo-php-library) and [SQL to MongoDB Query Converter](https://github.com/vincentrussell/sql-to-mongo-db-query-converter). ❤️
+Thanks also to [MongoDB PHP lib](https://github.com/mongodb/mongo-php-library), [vis.js](https://github.com/visjs) and [SQL to MongoDB Query Converter](https://github.com/vincentrussell/sql-to-mongo-db-query-converter). ❤️
 
 Copyright
 ---------

index.php

@@ -18,7 +18,7 @@
  * 
  * @var string
  */
-define('MPG_APP_VERSION', '1.0.5');
+define('MPG_APP_VERSION', '1.0.6');
 
 /**
  * Development mode?

routes.php

@@ -66,6 +66,16 @@
 	CollectionController::class . '@renderImportViewAction'
 );
 
+$router->get(
+	MPG_SERVER_PATH . '/visualizeDatabase',
+	DatabaseController::class . '@renderVisualizeViewAction'
+);
+
+$router->get(
+	MPG_SERVER_PATH . '/ajaxDatabaseGetNetworkGraph',
+	DatabaseController::class . '@getNetworkGraphAction'
+);
+
 $router->get(
 	MPG_SERVER_PATH . '/queryDatabase',
 	DatabaseController::class . '@renderQueryViewAction'

src/Controllers/DatabaseController.php

@@ -31,6 +31,107 @@ public static function getDatabaseNames() : array {
 
     }
 
+    public function renderVisualizeViewAction() : Response {
+
+        LoginController::ensureUserIsLogged();
+
+        return new Response(200, $this->renderView('database.visualize'));
+
+    }
+
+    public function getNetworkGraphAction() : Response {
+
+        $networkGraph = [
+            'visData' => [
+                'nodes' => [
+                    [
+                        'id' => 1,
+                        'label' => 'MongoDB server',
+                        'shape' => 'image',
+                        'image' => MPG_BASE_URL . '/static/images/leaf-icon.svg',
+                        'size' => 32
+                    ]
+                ],
+                'edges' => []
+            ],
+            'mapping' => [
+
+                1 => [
+                    'databaseName' => null,
+                    'collectionName' => null
+                ]
+
+            ]
+        ];
+
+        $nodeCounter = 1;
+
+        try {
+
+            foreach (MongoDBHelper::getClient()->listDatabases() as $databaseInfo) {
+
+                $nodeCounter++;
+
+                $databaseNode = [
+                    'id' => $nodeCounter,
+                    'label' => 'DB: ' . $databaseInfo['name'],
+                    'shape' => 'image',
+                    'image' => MPG_BASE_URL . '/static/images/database-icon.svg',
+                    'size' => 24
+                ];
+
+                $database = MongoDBHelper::getClient()->selectDatabase(
+                    $databaseInfo['name']
+                );
+
+                foreach ($database->listCollections() as $collectionInfo) {
+
+                    $nodeCounter++;
+
+                    $collectionNode = [
+                        'id' => $nodeCounter,
+                        'label' => 'Coll: ' . $collectionInfo['name'],
+                        'shape' => 'image',
+                        'image' => MPG_BASE_URL . '/static/images/document-icon.svg',
+                        'size' => 24
+                    ];
+
+                    array_push($networkGraph['visData']['nodes'], $collectionNode);
+
+                    array_push($networkGraph['visData']['edges'], [
+                        'from' => $databaseNode['id'],
+                        'to' => $collectionNode['id']
+                    ]);
+
+                    $networkGraph['mapping'][ $collectionNode['id'] ] = [
+                        'databaseName' => $databaseInfo['name'],
+                        'collectionName' => $collectionInfo['name']
+                    ];
+
+                }
+
+                array_push($networkGraph['visData']['nodes'], $databaseNode);
+
+                array_push($networkGraph['visData']['edges'], [
+                    'from' => 1, // MongoDB server
+                    'to' => $databaseNode['id']
+                ]);
+
+                $networkGraph['mapping'][ $databaseNode['id'] ] = [
+                    'databaseName' => $databaseInfo['name'],
+                    'collectionName' => null
+                ];
+
+            }
+
+        } catch (\Throwable $th) {
+            return new JsonResponse(500, ErrorNormalizer::normalize($th, __METHOD__));
+        }
+
+        return new JsonResponse(200, $networkGraph);
+
+    }
+
     public function renderQueryViewAction() : Response {
 
         LoginController::ensureUserIsLogged();

static/css/mpg.css

@@ -145,6 +145,12 @@
 
 }
 
+.vis-network:focus {
+
+    outline: none;
+
+}
+
 code {
 
     font-size: 100%;

static/js/mpg.database.query.js

@@ -489,6 +489,8 @@ MPG.eventListeners.addCollections = function() {
 
                     document.querySelector('#mpg-output-code').innerHTML = '';
 
+                    document.querySelector('#mpg-find-button').click();
+
                 },
                 JSON.stringify(requestBody)
             );