Merge pull request #29 from sybila/feat/observations

Feat/observations

.eslintrc.yml

@@ -3,17 +3,13 @@ env:
   es2021: true
 extends:
   - standard-with-typescript
+  - plugin:wc/recommended
   - plugin:lit/recommended
 overrides: []
 parserOptions:
   ecmaVersion: latest
   sourceType: module
 plugins:
   - '@typescript-eslint'
-rules: {
-  "no-unused-vars": "off",
-  "@typescript-eslint/no-unused-vars": [ "error", {
-    "varsIgnorePattern": "^[A-Z][a-zA-Z]*$",
-    "argsIgnorePattern": "^[A-Z][a-zA-Z]*$"
-  }]
-}
+  - 'wc'
+  - 'lit'

package.json

@@ -25,6 +25,7 @@
     "dataclass": "^2.1.1",
     "lit": "^3.0.2",
     "lodash": "^4.17.21",
+    "tabulator-tables": "^5.6.1",
     "uikit": "^3.17.8",
     "uikit-icons": "^0.5.0"
   },
@@ -35,18 +36,20 @@
     "@types/cytoscape-edgehandles": "^4.0.3",
     "@types/cytoscape-popper": "^2.0.4",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.3.2",
+    "@types/node": "^20.11.19",
     "@types/rollup-plugin-less": "^1.1.4",
+    "@types/tabulator-tables": "^5.5.10",
     "@types/uikit": "^3.14.0",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
     "@vituum/vite-plugin-posthtml": "^1.0.0",
     "eslint": "^8.55.0",
     "eslint-config-standard-with-typescript": "^39.1.1",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-lit": "^1.10.1",
+    "eslint-plugin-lit": "^1.11.0",
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-wc": "^2.0.4",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "typescript": "^4.9.5",

src-tauri/Cargo.toml

@@ -19,7 +19,7 @@ biodivine-lib-bdd = ">=0.5.6, <1.0.0"
 biodivine-lib-param-bn = ">=0.5.0, <1.0.0"
 lazy_static = "1.4.0"
 regex = "1.10.2"
-tauri = { version = "1.4", features = [ "window-set-focus", "window-set-size", "window-close", "window-create", "dialog-all", "shell-open"] }
+tauri = { version = "1.4", features = [ "window-set-focus", "window-set-size", "window-close", "window-create", "dialog-all", "shell-open", "path-all"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 

src-tauri/tauri.conf.json

@@ -25,6 +25,9 @@
         "close": true,
         "setSize": true,
         "setFocus": true
+      },
+      "path": {
+        "all": true
       }
     },
     "bundle": {

src/html/component/content-pane/content-pane.ts

@@ -5,14 +5,15 @@ import { TabData } from '../../util/tab-data'
 import { library, icon } from '@fortawesome/fontawesome-svg-core'
 import '../regulations-editor/regulations-editor'
 import '../functions-editor/functions-editor'
+import '../observations-editor/observations-editor'
 import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
 import { aeonState } from '../../../aeon_events'
 import { ContentData } from '../../util/data-interfaces'
 
 library.add(faLock, faLockOpen)
 
 @customElement('content-pane')
-export class ContentPane extends LitElement {
+export default class ContentPane extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
 
   @property() private readonly tab: TabData = TabData.create()

src/html/component/functions-editor/editor-tile/function-tile.ts

@@ -13,7 +13,7 @@ import { EditorTile } from './editor-tile'
 library.add(faTrash, faMagnifyingGlass)
 
 @customElement('function-tile')
-class FunctionTile extends EditorTile {
+export class FunctionTile extends EditorTile {
   varIndex = 0
   constructor () {
     super()

src/html/component/functions-editor/editor-tile/variable-tile.ts

@@ -12,7 +12,7 @@ import { EditorTile } from './editor-tile'
 library.add(faTrash, faMagnifyingGlass)
 
 @customElement('variable-tile')
-class VariableTile extends EditorTile {
+export class VariableTile extends EditorTile {
   @property() regulations: IRegulationData[] = []
   @property() variables: IVariableData[] = []
 

src/html/component/functions-editor/functions-editor.ts

@@ -11,7 +11,7 @@ import { getNextEssentiality, getNextMonotonicity } from '../../util/utilities'
 import { dialog } from '@tauri-apps/api'
 
 @customElement('functions-editor')
-class FunctionsEditor extends LitElement {
+export class FunctionsEditor extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
   @property() contentData: ContentData = ContentData.create()
   @state() functions: IFunctionData[] = []

src/html/component/menu/menu.ts

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js'
 import style_less from './menu.less?inline'
 
 @customElement('hamburger-menu')
-class Menu extends LitElement {
+export default class Menu extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
 
   render (): TemplateResult {

src/html/component/nav-bar/nav-bar.ts

@@ -8,7 +8,7 @@ import '../search/search'
 import { type TabData } from '../../util/tab-data'
 
 @customElement('nav-bar')
-class NavBar extends LitElement {
+export default class NavBar extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
   @property() tabs: TabData[] = []
 

src/html/component/observations-editor/edit-observation/edit-observation.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script type="module" src="edit-observation.ts"></script>
+  <title>Edit observation</title>
+</head>
+<body>
+  <edit-observation></edit-observation>
+</body>
+</html>

src/html/component/observations-editor/edit-observation/edit-observation.ts

@@ -0,0 +1,65 @@
+import { html, css, unsafeCSS, LitElement, type TemplateResult } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import style_less from './edit-observation.less?inline'
+import { emit, type Event as TauriEvent, once } from '@tauri-apps/api/event'
+import { appWindow } from '@tauri-apps/api/window'
+import { map } from 'lit/directives/map.js'
+import { type IObservation } from '../../../util/data-interfaces'
+
+@customElement('edit-observation')
+export default class EditObservation extends LitElement {
+  static styles = css`${unsafeCSS(style_less)}`
+  @query('#node-name') nameField: HTMLInputElement | undefined
+  @query('#node-id') variableIdField: HTMLInputElement | undefined
+  @state() data: IObservation | undefined
+  id = ''
+
+  async firstUpdated (): Promise<void> {
+    await once('edit_observation_update', (event: TauriEvent<IObservation>) => {
+      this.id = event.payload.id
+      this.data = event.payload
+    })
+    await emit('loaded', {})
+    this.variableIdField?.focus()
+  }
+
+  private async handleSubmit (event: Event): Promise<void> {
+    event.preventDefault()
+    await emit('edit_observation_dialog', {
+      id: this.id,
+      data: this.data
+    })
+    await appWindow.close()
+  }
+
+  private getValue<T>(data: T, key: string): T[keyof T] {
+    const newKey = key as keyof typeof data
+    return data[newKey]
+  }
+
+  private setValue<T>(data: T, key: string, value: string): void {
+    const newKey = key as keyof typeof data
+    data[newKey] = value as T[keyof T]
+  }
+
+  render (): TemplateResult {
+    return html`
+      <form class="uk-form-horizontal uk-flex uk-flex-column uk-flex-between">
+        <div class="fields">        
+        ${map(Object.keys(this.data ?? {}), (key) => {
+          return html`
+            <div class="uk-margin-small">
+              <label class="uk-form-label" for="form-horizontal-text">${key.toUpperCase()}</label>
+              <div class="uk-form-controls">
+                <input class="uk-input" value="${this.getValue(this.data, key)}" @input="${(e: InputEvent) => { this.setValue(this.data, key, (e.target as HTMLInputElement).value) }}" id="node-id" type="text" placeholder="${key}"/>
+              </div>
+            </div>`
+        })}
+        </div>
+
+
+        <button class="uk-button uk-width-1-1" @click="${this.handleSubmit}">Save</button>
+      </form>
+    `
+  }
+}

src/html/component/observations-editor/observations-editor.less

@@ -0,0 +1,86 @@
+@import '/src/uikit-theme';
+
+.accordion {
+  .container {
+    position: relative;
+    margin: 0.5em 0.5em;
+  }
+
+  .container.active .content {
+    height: 100%;
+    padding-top: 2em;
+  }
+
+  .container.active .label::before {
+    content: '-';
+    font-size: 2em;
+  }
+
+  .label {
+    font-size: 1.5em;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .label::before {
+    content: '+';
+    position: absolute;
+    top: 50%;
+    right: -0em;
+    font-size: 2em;
+    transform: translateY(-50%);
+    transition: content 1s;
+
+  }
+
+  .content {
+    position: relative;
+    height: 0;
+    text-align: justify;
+    overflow: hidden;
+  }
+
+  hr {
+    width: 100%;
+    margin-left: 0;
+    border: 1px solid grey;
+  }
+}
+
+.observations {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding-bottom: 3em;
+  max-width: inherit;
+  max-height: inherit;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.header {
+  width: 100%;
+  height: 4em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.import-button {
+  height: 2em;
+  right: -1em;
+}
+
+.heading {
+  justify-self: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .heading {
+    color: white;
+  }
+
+}
+
+@media (prefers-color-scheme: light) {
+}