Merge pull request #157 from aleksbobic/develop

Introduce external datasets as a default data source and fix a few bugs

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+__pycache__
+venv/
+
 # dependencies
 /app/node_modules
 /app/.pnp

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python remote attach",
+            "type": "python",
+            "request": "attach",
+            "port": 5678,
+            "host": "localhost",
+            "pathMappings": [
+                {
+                    "localRoot": "${workspaceFolder}/server/app",
+                    "remoteRoot": "/cs/app"
+                }
+            ]
+        }]
+}

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-    "python.formatting.provider": "black"
+    "python.formatting.provider": "none",
+    "python.linting.flake8Enabled": true,
+    "python.linting.enabled": true,
+    "[python]": {
+        "editor.defaultFormatter": "ms-python.black-formatter"
+    }
 }

README.md

@@ -100,6 +100,11 @@ To configure, disable or enable various csx features visit the `./app/.env.{deve
 |REACT_APP_SURVEY_MESSAGE| The message that should show up when the survey popup displays.  | string |
 |REACT_APP_SURVEY_SHOW_AFTER_HISTORY_DEPTH| Dispaly the survey popup after a user performs a particular number of actions on a graph | number (int) |
 
+### Starting with elastic container
+1. Make sure to delete the previously existing volumes, containers and images.
+2. Make sure that the SEARCH_SOURCE environment vairable in the environment of the server service in docker-compose is set to `elastic`.
+3. Run the following command: `docker-compose --profile elastic up --build`
+
 
 ### Starting the project in production mode 🚀
 
@@ -110,3 +115,7 @@ Open [http://localhost:8880](http://localhost:8880) to view it in the browser.
 
 ### Running production mode with analytics enabled
 In additiona to making sure the flag `REACT_APP_DISABLE_TRACKING` in `./app/.env.production` is set to `false` you must run the docker-compose command with particular parameters: `MATOMO_PASS=your_db_pass docker-compose -f docker-compose.prod.yml --profile analytics up --build --remove-orphans --force-recreate`
+
+To run also with elastic in production make sure to also add `--profile elastic` right after `--profile analytics` and also set the `ELASTIC_PASS` env variable.
+
+To run with mongo just make sure that the `SEARCH_SOURCE` in the environment of the server service is set to `mongo` and that the `MONGO_USER` and `MONGO_PASS` are set.

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "csx",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^1.8.8",
@@ -48,7 +48,7 @@
     "react-flow-renderer": "^10.3.17",
     "react-force-graph-3d": "^1.21.13",
     "react-helmet-async": "^1.3.0",
-    "react-joyride": "^2.3.0",
+    "react-joyride": "^2.5.4",
     "react-markdown": "^8.0.3",
     "react-resize-detector": "^7.1.2",
     "react-router-dom": "^5.2.0",
@@ -121,4 +121,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

app/src/app/App.jsx

@@ -1,16 +1,16 @@
 import { Box, useColorMode, useToast } from '@chakra-ui/react';
-import ControlPanelComponent from 'components/interface/controlpanel/ControlPanel.component';
+import LeftPanel from 'components/interface/leftpanel/LeftPanel.component';
 import NavigationPanelComponent from 'components/interface/navigation/NavigationPanel.component';
 import { observer } from 'mobx-react';
-import OverviewGraphPage from 'pages/graph/Graph.page';
+import GraphPage from 'pages/graph/Graph.page';
 import HomePage from 'pages/home/Home.page';
 import SearchPage from 'pages/search/Search.page';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 
 import {
-    BrowserRouter as Router,
+    Switch as RRSwitch,
     Route,
-    Switch as RRSwitch
+    BrowserRouter as Router
 } from 'react-router-dom';
 import './App.scss';
 
@@ -32,29 +32,44 @@ function CSX() {
     useEffect(() => {
         window.addEventListener('beforeunload', () => {
             store.track.trackEvent(
-                'Global',
-                'Tab Switch',
                 JSON.stringify({
-                    value: 'User closed the tab'
+                    area: 'Global'
+                }),
+                JSON.stringify({
+                    item_type: null
+                }),
+                JSON.stringify({
+                    event_type: 'Tab interaction',
+                    event_action: 'Close tab'
                 })
             );
         });
 
         window.addEventListener('visibilitychange', () => {
             if (document.hidden) {
                 store.track.trackEvent(
-                    'Global',
-                    'Tab Switch',
                     JSON.stringify({
-                        value: 'User switched to a different tab'
+                        area: 'Global'
+                    }),
+                    JSON.stringify({
+                        item_type: null
+                    }),
+                    JSON.stringify({
+                        event_type: 'Tab interaction',
+                        event_action: 'Switch to another tab'
                     })
                 );
             } else {
                 store.track.trackEvent(
-                    'Global',
-                    'Tab Switch',
                     JSON.stringify({
-                        value: 'User returned to the csx tab'
+                        area: 'Global'
+                    }),
+                    JSON.stringify({
+                        item_type: null
+                    }),
+                    JSON.stringify({
+                        event_type: 'Tab interaction',
+                        event_action: 'Return to tab'
                     })
                 );
             }
@@ -63,28 +78,43 @@ function CSX() {
         return () => {
             window.removeEventListener('beforeunload', () => {
                 store.track.trackEvent(
-                    'Global',
-                    'Tab Switch',
                     JSON.stringify({
-                        value: 'User closed the tab'
+                        area: 'Global'
+                    }),
+                    JSON.stringify({
+                        item_type: null
+                    }),
+                    JSON.stringify({
+                        event_type: 'Tab interaction',
+                        event_action: 'Close tab'
                     })
                 );
             });
             window.removeEventListener('visibilitychange', () => {
                 if (document.hidden) {
                     store.track.trackEvent(
-                        'Global',
-                        'Tab Switch',
                         JSON.stringify({
-                            value: 'User switched to a different tab'
+                            area: 'Global'
+                        }),
+                        JSON.stringify({
+                            item_type: null
+                        }),
+                        JSON.stringify({
+                            event_type: 'Tab interaction',
+                            event_action: 'Switch to another tab'
                         })
                     );
                 } else {
                     store.track.trackEvent(
-                        'Global',
-                        'Tab Switch',
                         JSON.stringify({
-                            value: 'User returned to the csx tab'
+                            area: 'Global'
+                        }),
+                        JSON.stringify({
+                            item_type: null
+                        }),
+                        JSON.stringify({
+                            event_type: 'Tab interaction',
+                            event_action: 'Return to tab'
                         })
                     );
                 }
@@ -150,13 +180,13 @@ function CSX() {
                             </Route>
                             <Route path="/graph/detail" label="graphdetail">
                                 <CommentModal />
-                                <ControlPanelComponent />
-                                <OverviewGraphPage />
+                                <LeftPanel />
+                                <GraphPage />
                             </Route>
                             <Route path="/graph" label="graph">
                                 <CommentModal />
-                                <ControlPanelComponent />
-                                <OverviewGraphPage />
+                                <LeftPanel />
+                                <GraphPage />
                             </Route>
                             <Route exact path="/present" label="present">
                                 <PresentPage />