feat: add basic frontent structure

This commit is contained in:
Michal Szczepanski 2024-07-20 20:00:31 +02:00
parent 7db7ea2da4
commit 9d9f6c2173
47 changed files with 17688 additions and 0 deletions

5
.gitignore vendored Normal file

@ -0,0 +1,5 @@
*.iml
*.pyc
tmp
old
data

2
backend/lib/__init__.py Normal file

@ -0,0 +1,2 @@
#!/usr/bin/env python
# -*- coding: utf-8 -*-

64
backend/lib/graph.py Normal file

@ -0,0 +1,64 @@
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import logging
from enum import IntEnum
log = logging.getLogger(__name__)
class NodeStatus(IntEnum):
ERROR_PREPARING = -201
ERROR_STARTING = -202
ERROR_BUSY = -301
ERROR_STOPPING = -401
STALE = 101
PREPARING = 201
PREPARED = 202
STARTING = 203
READY = 204
BUSY = 301
STOPPING = 401
class Task:
data: any
error: any
result: any
class Queue:
def __init__(self, path: str, nodes: list[Node]):
self.path = path
def add(self, task):
class Node:
def __init__(self, name):
self.name = name
self._state: NodeStatus = NodeStatus.STALE
async def prepare(self, data):
if self._state != NodeStatus.STALE:
return
try:
self._state = NodeStatus.PREPARING
log.debug("preparing")
self._state = NodeStatus.READY
except:
self._state = NodeStatus.ERROR_PREPARING
async def run(self, task: Task):
try:
self._state = NodeStatus.BUSY
log.debug("running")
except:
self._state = NodeStatus.ERROR_BUSY
async def stop(self):
try:
self._state = NodeStatus.STOPPING
log.debug("stopping")
self._state = NodeStatus.STALE
except:
self._state = NodeStatus.ERROR_STOPPING

9
backend/main.py Normal file

@ -0,0 +1,9 @@
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import logging
log = logging.getLogger(__name__)
if __name__ == '__main__':
logging.basicConfig(level=logging.DEBUG)
log.debug('start')

9
doc/pyenv/MACOS.md Normal file

@ -0,0 +1,9 @@
```shell
cd $HOME
git clone https://github.com/pyenv/pyenv .pyenv
```
```shell
vi ~/.zshrc
export PATH="$HOME/.pyenv/bin:$PATH"
```

16
doc/specs/node.json Normal file

@ -0,0 +1,16 @@
{
"name": "foo",
"env": {
"hash": "foo",
"dependencies": [
{
"name": "python",
"version": "3.12.3",
"requirements": "requirements.txt"
}
]
},
"installed": {
"path": ""
}
}

16
frontend/.editorconfig Normal file

@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false

42
frontend/.gitignore vendored Normal file

@ -0,0 +1,42 @@
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db

7
frontend/.prettierrc Normal file

@ -0,0 +1,7 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 180,
"overrides": [{ "files": "*.html", "options": { "parser": "angular" } }]
}

4
frontend/.vscode/extensions.json vendored Normal file

@ -0,0 +1,4 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}

20
frontend/.vscode/launch.json vendored Normal file

@ -0,0 +1,20 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}

42
frontend/.vscode/tasks.json vendored Normal file

@ -0,0 +1,42 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}

5
frontend/README.md Normal file

@ -0,0 +1,5 @@
# slow-shit frontend
```shell
ng g component view/foo
```

116
frontend/angular.json Normal file

@ -0,0 +1,116 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"frontend": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/frontend",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kB",
"maximumError": "4kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "frontend:build:production"
},
"development": {
"buildTarget": "frontend:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
}
},
"cli": {
"schematicCollections": [
"@angular-eslint/schematics"
]
}
}

46
frontend/eslint.config.js Normal file

@ -0,0 +1,46 @@
// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");
module.exports = tseslint.config(
{
files: ["**/*.ts"],
ignores: [".vscode", "node_modules", ".angular"],
extends: [
eslint.configs.recommended,
...tseslint.configs.recommended,
...tseslint.configs.stylistic,
...angular.configs.tsRecommended,
],
processor: angular.processInlineTemplates,
rules: {
"@angular-eslint/directive-selector": [
"error",
{
type: "attribute",
prefix: "app",
style: "camelCase",
},
],
"@angular-eslint/component-selector": [
"error",
{
type: "element",
prefix: "app",
style: "kebab-case",
},
],
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unused-vars": "warn"
},
},
{
files: ["**/*.html"],
extends: [
...angular.configs.templateRecommended,
...angular.configs.templateAccessibility,
],
rules: {},
}
);

16832
frontend/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

57
frontend/package.json Normal file

@ -0,0 +1,57 @@
{
"name": "slow-shit",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint",
"lint:fix": "ng lint --fix"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vane/slow-shit.git"
},
"author": "dev",
"license": "LGPL-3.0-or-later",
"bugs": {
"url": "https://github.com/vane/slow-shit/issues"
},
"homepage": "https://github.com/vane/slow-shit#readme",
"dependencies": {
"@angular/animations": "^18.1.0",
"@angular/common": "^18.1.0",
"@angular/compiler": "^18.1.0",
"@angular/core": "^18.1.0",
"@angular/forms": "^18.1.0",
"@angular/platform-browser": "^18.1.0",
"@angular/platform-browser-dynamic": "^18.1.0",
"@angular/router": "^18.1.0",
"@codemirror/lang-python": "^6.1.6",
"codemirror": "^6.0.1",
"codemirror-extension-inline-suggestion": "^0.0.3",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.1.1",
"@angular/cli": "^18.1.1",
"@angular/compiler-cli": "^18.1.0",
"@types/jasmine": "~5.1.0",
"angular-eslint": "18.1.0",
"eslint": "^9.6.0",
"eslint-config-prettier": "^9.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"prettier": "^3.3.3",
"typescript": "~5.5.2",
"typescript-eslint": "8.0.0-alpha.38"
}
}

BIN
frontend/public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

@ -0,0 +1,6 @@
<div>
<h1>Slow things</h1>
<app-graph-component></app-graph-component>
</div>
<router-outlet />

@ -0,0 +1,29 @@
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have the 'frontend' title`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('slow-shit');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello world');
});
});

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {GraphModule} from "./view/graph/graph.module";
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, GraphModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'slow-shit';
}

@ -0,0 +1,8 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

@ -0,0 +1,3 @@
import { Routes } from '@angular/router';
export const routes: Routes = [];

@ -0,0 +1,14 @@
interface GraphNodeType {
name: string
path: string
}
type GraphNodeParams = Record<string, string>;
export interface GraphNode {
name: string
type: string
params?: GraphNodeParams
children: GraphNode[]
parents: GraphNode[]
}

@ -0,0 +1,29 @@
import {Injectable} from "@angular/core";
import {GraphNode} from "../model/GraphModel";
@Injectable({providedIn: 'root'})
export class GraphService {
private _nodes = new Map<string, GraphNode>()
addNode(node: GraphNode) {
if (!node.name) throw new Error(`Node empty name`)
if (this._nodes.has(node.name)) throw new Error(`Node ${node.name} exists`)
this._nodes.set(node.name, node)
}
get nodes() {
return this._nodes
}
delNode(name: string) {
this._nodes.delete(name)
}
values(): GraphNode[] {
return Array.from(this._nodes.values())
}
clear() {
this._nodes.clear()
}
}

@ -0,0 +1,7 @@
export const randomString = (size: number, alphabet = 'abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ'): string => {
let out = ''
for (let i = 0;i<size;i++) {
out += alphabet.charAt(Math.round(Math.random()*alphabet.length))
}
return out
}

@ -0,0 +1,11 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {EditorComponent} from "./editor/editor.component";
@NgModule({
declarations: [EditorComponent],
imports: [CommonModule],
providers: [],
exports: [EditorComponent]
})
export class CodeModule {}

@ -0,0 +1 @@
<div #editor></div>

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

@ -0,0 +1,30 @@
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {basicSetup, EditorView} from "codemirror"
import {python} from '@codemirror/lang-python'
import { inlineSuggestion } from 'codemirror-extension-inline-suggestion';
@Component({
selector: 'app-code-editor',
templateUrl: './editor.component.html',
styleUrl: './editor.component.scss'
})
export class EditorComponent implements AfterViewInit {
@ViewChild('editor') editor: any
private fetchSuggestion = async (state) => {
// or make an async API call here based on editor state
return 'hello';
};
ngAfterViewInit() {
console.log(this.editor)
const e = new EditorView({
extensions: [basicSetup, python(), inlineSuggestion({
fetchFn: fetchSuggestion,
delay: 500,
})],
parent: this.editor.nativeElement
})
console.log(e.state)
}
}

@ -0,0 +1,10 @@
<div>
<input type="text" [value]="nodeName" (change)="handleTextChange($event)">
<button (click)="handleAddNodeClick($event)">Add Node</button>
<div style="padding: 10px" *ngFor="let node of graphService.nodes | keyvalue">
<app-graph-node [node]="node.value"></app-graph-node>
</div>
<div>
<app-code-editor></app-code-editor>
</div>
</div>

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

@ -0,0 +1,30 @@
import {Component} from '@angular/core';
import {GraphService} from "../../service/GraphService";
import {randomString} from "../../utils/utils";
@Component({
selector: 'app-graph-component',
templateUrl: './graph.component.html',
styleUrl: './graph.component.scss',
})
export class GraphComponent {
nodeName: string = randomString(10)
testItems = ['a', 'b']
constructor(readonly graphService: GraphService) {
}
handleTextChange = (event: any) => {
this.nodeName = event.target.value
}
handleAddNodeClick = (event: MouseEvent) => {
console.log('handleAddNodeClick', this.nodeName, event)
try {
this.graphService.addNode({name: this.nodeName, type: "foo", children: [], parents: []})
this.nodeName = randomString(10)
} catch (e: any) {
alert(e.toString())
}
}
}

@ -0,0 +1,14 @@
import {NgModule} from "@angular/core";
import {GraphComponent} from "./graph.component";
import {CommonModule} from "@angular/common";
import {NodeComponent} from "./node/node.component";
import {GraphService} from "../../service/GraphService";
import {CodeModule} from "../code/code.module";
@NgModule({
declarations: [GraphComponent, NodeComponent],
imports: [CommonModule, CodeModule],
providers: [GraphService],
exports: [GraphComponent]
})
export class GraphModule {}

@ -0,0 +1,12 @@
<div style="border: 1px solid #ff0000;border-radius: 2px;width: 200px;">
<p>{{node?.name}}</p>
<p>{{node?.type}}</p>
<div>
<button (click)="handleAddClick()">+</button>
<button>Definition</button>
</div>
<div *ngIf="node && node.children.length > 0">
<p>Children</p>
<div *ngFor="let child of node.children">{{child.name}}</div>
</div>
</div>

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

@ -0,0 +1,27 @@
import {Component, Input, OnInit} from '@angular/core';
import {GraphNode} from "../../../model/GraphModel";
import {GraphService} from "../../../service/GraphService";
import {randomString} from "../../../utils/utils";
@Component({
selector: 'app-graph-node',
templateUrl: './node.component.html',
styleUrl: './node.component.scss'
})
export class NodeComponent implements OnInit {
@Input() node?: GraphNode
constructor(readonly graphService: GraphService) {
}
ngOnInit() {
console.log('on init', this.node)
}
handleAddClick = () => {
if (!this.node) return
const node = {name: randomString(10), type: "foo", children: [], parents: [this.node]}
this.node.children.push(node)
this.graphService.addNode(node)
}
}

13
frontend/src/index.html Normal file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slow-shit</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

6
frontend/src/main.ts Normal file

@ -0,0 +1,6 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));

1
frontend/src/styles.scss Normal file

@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

@ -0,0 +1,15 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts"
],
"include": [
"src/**/*.d.ts"
]
}

32
frontend/tsconfig.json Normal file

@ -0,0 +1,32 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

@ -0,0 +1,15 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}