feat: establish socket.io connection

Author: ngfelixl

NOTES.md

@@ -1,16 +1,19 @@
 These are notes for the stream implementation of Nodeplotlib.
 
 ## General
+
 - A plot window (**apps/web**) tries to connect to the server via a realtime api (e.g. websockets).
 - The server recognizes the count of connected apps.
 - If the user executes the `plot` function several times, it will only open a window if there is no
   open connection to a **apps/web**.
 
 ## Server lifecycle
+
 - The server starts with the execution of the `plot` function if there is no active server running.
 - The server stops if all **apps/web** are disconnected (and there were connections before).
 
 ## The plot function
+
 - The plot function can either handle a `Plot` or an `Observable<Plot>`.
   - It creates an `Observable<Plot>` by using Rxjs' `of` observable constructor.
 - The plot streams are saved in a Plots Set.
@@ -21,13 +24,25 @@ These are notes for the stream implementation of Nodeplotlib.
   the server as mentioned in the **server lifecycle** section.
 
 ## The stack function
+
 - Is the `stack` function really needed? Stack served the purpose that only one window opens which
   could display several plots.
 
 ## Backlog
+
 - The user can remove plots from the frontend. If that happened it submits a message to the
   backend so that the subscription can be cancelled and the plot stream can be removed from the plots set.
 
 ## Frontend only
+
 - The user has the possibility to rearrange plots per drag and drop.
-- The user can resize the individual plot windows.
+- The user can resize the individual plot windows.
+
+## Development
+
+To start the app for development purposes run
+
+```
+npm run build web -- --watch
+npm start dev-server
+```

angular.json

@@ -1,6 +1,39 @@
 {
   "version": 1,
   "projects": {
+    "core": {
+      "root": "libs/core",
+      "sourceRoot": "libs/core/src",
+      "projectType": "library",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/node:package",
+          "outputs": ["{options.outputPath}"],
+          "options": {
+            "outputPath": "dist/libs/core",
+            "tsConfig": "libs/core/tsconfig.lib.json",
+            "packageJson": "libs/core/package.json",
+            "main": "libs/core/src/index.ts",
+            "assets": ["libs/core/*.md"]
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "outputs": ["{options.outputFile}"],
+          "options": {
+            "lintFilePatterns": ["libs/core/**/*.ts"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/core"],
+          "options": {
+            "jestConfig": "libs/core/jest.config.js",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
     "dev-server": {
       "root": "apps/dev-server",
       "sourceRoot": "apps/dev-server/src",
@@ -13,7 +46,14 @@
             "outputPath": "dist/apps/dev-server",
             "main": "apps/dev-server/src/main.ts",
             "tsConfig": "apps/dev-server/tsconfig.app.json",
-            "assets": ["apps/dev-server/src/assets"]
+            "assets": [
+              "apps/dev-server/src/assets",
+              {
+                "glob": "**/*",
+                "input": "dist/apps/web",
+                "output": "web"
+              }
+            ]
           },
           "configurations": {
             "production": {
@@ -86,66 +126,54 @@
       }
     },
     "nodeplotlib": {
-      "root": "libs/nodeplotlib",
-      "sourceRoot": "libs/nodeplotlib/src",
-      "projectType": "library",
+      "root": "apps/nodeplotlib",
+      "sourceRoot": "apps/nodeplotlib/src",
+      "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@nrwl/node:package",
+          "builder": "@nrwl/node:build",
           "outputs": ["{options.outputPath}"],
           "options": {
-            "outputPath": "dist/libs/nodeplotlib",
-            "tsConfig": "libs/nodeplotlib/tsconfig.lib.json",
-            "packageJson": "libs/nodeplotlib/package.json",
-            "main": "libs/nodeplotlib/src/index.ts",
-            "assets": ["libs/nodeplotlib/*.md"]
-          }
-        },
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "outputs": ["{options.outputFile}"],
-          "options": {
-            "lintFilePatterns": ["libs/nodeplotlib/**/*.ts"]
+            "outputPath": "dist/apps/nodeplotlib",
+            "main": "apps/nodeplotlib/src/main.ts",
+            "tsConfig": "apps/nodeplotlib/tsconfig.app.json",
+            "assets": [
+              "apps/nodeplotlib/src/assets",
+              "apps/nodeplotlib/src/package.json"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "extractLicenses": true,
+              "inspect": false,
+              "fileReplacements": [
+                {
+                  "replace": "apps/nodeplotlib/src/environments/environment.ts",
+                  "with": "apps/nodeplotlib/src/environments/environment.prod.ts"
+                }
+              ]
+            }
           }
         },
-        "test": {
-          "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/nodeplotlib"],
-          "options": {
-            "jestConfig": "libs/nodeplotlib/jest.config.js",
-            "passWithNoTests": true
-          }
-        }
-      }
-    },
-    "server": {
-      "root": "libs/server",
-      "sourceRoot": "libs/server/src",
-      "projectType": "library",
-      "architect": {
-        "build": {
-          "builder": "@nrwl/node:package",
-          "outputs": ["{options.outputPath}"],
+        "serve": {
+          "builder": "@nrwl/node:execute",
           "options": {
-            "outputPath": "dist/libs/server",
-            "tsConfig": "libs/server/tsconfig.lib.json",
-            "packageJson": "libs/server/package.json",
-            "main": "libs/server/src/index.ts",
-            "assets": ["libs/server/*.md"]
+            "buildTarget": "nodeplotlib:build"
           }
         },
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "outputs": ["{options.outputFile}"],
           "options": {
-            "lintFilePatterns": ["libs/server/**/*.ts"]
+            "lintFilePatterns": ["apps/nodeplotlib/**/*.ts"]
           }
         },
         "test": {
           "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/server"],
+          "outputs": ["coverage/apps/nodeplotlib"],
           "options": {
-            "jestConfig": "libs/server/jest.config.js",
+            "jestConfig": "apps/nodeplotlib/jest.config.js",
             "passWithNoTests": true
           }
         }

apps/dev-server/src/main.ts

@@ -3,17 +3,6 @@
  * This is only a minimal backend to get started.
  */
 
-import { NestFactory } from '@nestjs/core';
-import { ServerModule } from '@npl/server';
+import { bootstrap, plot } from '@npl/core';
 
-async function bootstrap() {
-  const app = await NestFactory.create(ServerModule);
-  app.enableCors();
-  await app.listen(3333);
-  console.log(
-    'Server runnng at',
-    `http://localhost:${app.getHttpServer().address().port}`
-  );
-}
-
-bootstrap();
+plot([]);

libs/nodeplotlib/.eslintrc.json apps/nodeplotlib/.eslintrc.json

@@ -8,8 +8,8 @@ module.exports = {
   },
   testEnvironment: 'node',
   transform: {
-    '^.+\\.[tj]sx?$': 'ts-jest',
+    '^.+\\.[tj]s$': 'ts-jest',
   },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/nodeplotlib',
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/apps/nodeplotlib',
 };

libs/nodeplotlib/jest.config.js apps/nodeplotlib/jest.config.js

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

libs/.gitkeep apps/nodeplotlib/src/app/.gitkeep

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};

apps/nodeplotlib/src/assets/.gitkeep

@@ -0,0 +1 @@
+export { plot, Plot, Layout } from '@npl/core';

apps/nodeplotlib/src/environments/environment.prod.ts

@@ -0,0 +1,6 @@
+{
+  "name": "npl",
+  "version": "0.8.0-rc0",
+  "license": "MIT",
+  "main": "main.js"
+}

apps/nodeplotlib/src/environments/environment.ts

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["node"]
+  },
+  "exclude": ["**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

apps/nodeplotlib/src/main.ts

@@ -4,7 +4,7 @@
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "./tsconfig.app.json"
     },
     {
       "path": "./tsconfig.spec.json"

apps/nodeplotlib/src/package.json

@@ -5,11 +5,5 @@
     "module": "commonjs",
     "types": ["jest", "node"]
   },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.spec.js",
-    "**/*.spec.jsx",
-    "**/*.d.ts"
-  ]
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }

apps/nodeplotlib/tsconfig.app.json

@@ -1,19 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
-import { OverviewComponent } from './components/overview/overview.component';
-import { StackComponent } from './components/stack/stack.component';
-import { StacksComponent } from './components/stacks/stacks.component';
+import { PlotsComponent } from './components/plots/plots.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
 
 const routes: Route[] = [
-  {
-    path: 'plots',
-    component: StacksComponent,
-    children: [
-      { path: '', component: OverviewComponent },
-      { path: ':id', component: StackComponent },
-    ],
-  },
+  { path: 'plots', component: PlotsComponent },
   { path: 'tutorial', component: TutorialComponent },
   { path: '**', redirectTo: 'plots' },
 ];

libs/server/tsconfig.json apps/nodeplotlib/tsconfig.json

@@ -7,22 +7,27 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { OverviewComponent } from './components/overview/overview.component';
-import { StackComponent } from './components/stack/stack.component';
-import { StacksComponent } from './components/stacks/stacks.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
 import { PlotsService } from './services/plots.service';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
 import { PlotComponent } from './components/plot/plot.component';
+import { PlotsComponent } from './components/plots/plots.component';
+import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
+import { SocketService } from './services/socket.service';
+
+const config: SocketIoConfig = {
+  url: '',
+  options: { transports: ['polling'] },
+};
 
 @NgModule({
   declarations: [
     AppComponent,
     TutorialComponent,
-    StacksComponent,
-    StackComponent,
     OverviewComponent,
     PlotComponent,
+    PlotsComponent,
   ],
   imports: [
     AppRoutingModule,
@@ -33,8 +38,9 @@ import { PlotComponent } from './components/plot/plot.component';
     HttpClientModule,
     MatSidenavModule,
     MatListModule,
+    SocketIoModule.forRoot(config),
   ],
-  providers: [PlotsService],
+  providers: [PlotsService, SocketService],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

libs/server/tsconfig.spec.json apps/nodeplotlib/tsconfig.spec.json

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SocketService } from '../../services/socket.service';
 
 @Component({
   selector: 'npl-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {}
+export class AppComponent {
+  constructor(private socketService: SocketService) {}
+}

apps/web/src/app/app-routing.module.ts

@@ -0,0 +1 @@
+<p>plots works!</p>

apps/web/src/app/app.module.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotsComponent } from './plots.component';
+
+describe('PlotsComponent', () => {
+  let component: PlotsComponent;
+  let fixture: ComponentFixture<PlotsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PlotsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlotsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/web/src/app/components/app/app.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'npl-plots',
+  templateUrl: './plots.component.html',
+  styleUrls: ['./plots.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PlotsComponent {}