Merge pull request #1 from MaastrichtU-BISS/sprint

Sprint

.github/workflows/github_actions.yaml

@@ -0,0 +1,51 @@
+name: Build WebUI
+
+on:
+  push:
+    # Sequence of patterns matched against refs/heads
+    branches:    
+      - '**'
+
+env:
+  REGISTRY: ghcr.io
+
+jobs:
+  containerize:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Extract branch name
+        shell: bash
+        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
+        id: extract_branch
+      - name: downcase REPO
+        run: |
+          echo "REPO=${GITHUB_REPOSITORY,,}" >>${GITHUB_ENV}
+      - name: Log in to the Container registry
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build frontend
+        id: build_frontend
+        run: |
+          cd cee && sh run_build.sh
+      - name: Build container
+        id: docker_build
+        uses: docker/build-push-action@v2
+        if: steps.extract_branch.outputs.branch != 'main'
+        with:
+          context: .
+          push: true
+          tags: ghcr.io/${{ env.REPO }}:${{ steps.extract_branch.outputs.branch }}
+      - name: Build container
+        id: docker_build_main
+        uses: docker/build-push-action@v2
+        if: steps.extract_branch.outputs.branch == 'main'
+        with:
+          context: .
+          push: true
+          tags: ghcr.io/${{ env.REPO }}:${{ steps.extract_branch.outputs.branch }}, ghcr.io/${{ env.REPO }}:latest

.gitignore

@@ -1,8 +1,12 @@
-data/
 env/
-cee/cedar-embeddable-editor*
+**/cee/cedar-embeddable-editor*
+cee/output
+data/
 cee/release*.zip
-src/static/cee
-src/templates/cee.html
 *.pyc
-venv/
+venv/
+**node_modules
+package*.json
+MaterialIcons*
+**/cee/styles.css
+.DS_Store

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.8-bullseye
+
+RUN apt update && apt upgrade -y
+
+ADD src/ /app
+EXPOSE 5000
+WORKDIR /app
+
+COPY requirements.txt requirements.txt
+RUN pip install -r requirements.txt
+
+CMD ["python", "run.py"]

README.md

@@ -2,33 +2,33 @@
 A Cedar template implementation to fill in (and maintain) forms, based on the [Cedar Embeddable Editor](https://github.com/metadatacenter/cedar-embeddable-editor)
 
 ## Prerequisites
-* linux / unix OS
-* Docker Engine
-* NodeJS and NPM
+* Docker Engine (linux) / Docker for Windows / Docker for macOS
+
+Additional prerequisites are needed for development:
+
+* Python >= 3.8
+* NodeJS v16 and NPM
 
 ## How to run
-1. Go to the cee folder, and execute the [build_frontend.sh](cee/build_frontend.sh) file (command: `cd cee && sh build_frontend.sh`)
-2. Start the GraphDB backend:
-   - Go to the [development_environment](development_environment) folder
-   - Run `docker-compose up -d`
-   - Run `sh run.sh`
-3. Run the python backend (which serves the front-end)
-   - Go to the main folder
-   - Create and load dependencies: `python -m venv ./venv && source ./venv/bin/activate && pip install -r requirements.txt
-   - Go to the [src](src) folder and run `python run.py`
+1. Clone or download this GitHub repository to your local PC
+2. Open the downloaded/cloned contents locally in the terminal
+3. Run `docker-compose up -d`
+4. when the previous command is finished, open the following url: [http://localhost:5000](http://localhost:5000)
 
 ## Configure templates
-By default a template is given in [src/template.json](src/template.json). You can change this in the [src/config.yaml](src/config.yaml) file in:
+By default a CEDAR template is given in [src/template.json](src/template.json). You can change this in the [src/config.yaml](src/config.yaml) file in:
 ```
 template:
-    source: file
-    location: <location_of_cedar_json_ld_file>
+    source: cedar
+    templateId: <location_of_cedar_json_ld_file>
 ```
 
-If you want to connect to Cedar itself, it is possible to provide the following information in the [src/config.yaml](src/config.yaml) file:
+If you want to connect to the CEDAR service API, it is possible to provide the following information in the [src/config.yaml](src/config.yaml) file:
 ```
 template:
     source: cedar
     api_key: <your_api_key>
     templateId: <your_cedar_template_uuid>
 ```
+
+Mind that the variable `api_key` is only needed for templates which are not available in Cedar's OpenView.

cee/input/build_frontend.sh

@@ -0,0 +1,29 @@
+version='2.6.41'
+
+cd /build
+
+cp /input/*.ts ./
+
+rm -Rf cedar-embeddable-editor*
+rm -Rf release-*.zip
+
+# Download and unzip release version of CEE
+curl -L -o release-$version.zip https://github.com/metadatacenter/cedar-embeddable-editor/archive/refs/tags/release-$version.zip
+unzip release-$version.zip
+
+# # Override files needed to work in our situation
+# cp app.component.ts cedar-embeddable-editor-release-$version/src/app/app.component.ts
+# cp app.module.ts cedar-embeddable-editor-release-$version/src/app/app.module.ts
+
+# Build project
+cd cedar-embeddable-editor-release-$version
+sed -i "/this.messageHandlerService.traceObject/ a window.location.href = '\\/';" src/app/modules/shared/components/cedar-data-saver/cedar-data-saver.component.ts
+npm install --no-audit
+# node_modules/@angular/cli/bin/ng build --configuration production --baseHref="./static/cee/"
+export NG_CLI_ANALYTICS=ci
+npm run ng build -- --configuration production --output-hashing=none --base-href="./static/cee/"
+
+# copy output
+cp -R ./dist/cedar-embeddable-editor/* /output
+
+cat /output/{runtime,polyfills,main}.js > /output/cedar-embeddable-editor.js

cee/run_build.sh

@@ -0,0 +1,17 @@
+NODE_VERSION=16
+
+docker volume create node-$NODE_VERSION-cedar-build
+
+rm -Rf $(pwd)/output
+
+docker run --rm -v $(pwd)/input:/input -v $(pwd)/output:/output -v node-$NODE_VERSION-cedar-build:/build node:$NODE_VERSION-bullseye /bin/bash /input/build_frontend.sh
+
+mkdir -p $(pwd)/../src/static/cee/node_modules
+# Add static folder prefix to load font type correctly in javascript
+sed 's/MaterialIcons/static\/cee\/MaterialIcons/g' output/cedar-embeddable-editor.js > $(pwd)/../src/static/cee/cedar-embeddable-editor.js
+
+docker run --rm -v $(pwd)/output:/output --workdir /output node:$NODE_VERSION-bullseye npm install @webcomponents/webcomponentsjs
+
+cp -R $(pwd)/output/node_modules $(pwd)/../src/static/cee
+cp $(pwd)/output/styles.css $(pwd)/../src/static/cee/
+cp $(pwd)/output/MaterialIcons-* $(pwd)/../src/static/cee/

docker-compose.yaml

@@ -0,0 +1,25 @@
+version: '3.8'
+services:
+  rdf-store:
+    image: ghcr.io/maastrichtu-cds/fair_tools_docker-graphdb/docker-graphdb:latest
+    ports: 
+      - "7200:7200"
+    environment:
+      - GDB_HEAP_SIZE=2g
+      - GDB_MIN_MEM=1g
+      - GDB_MAX_MEM=2g
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:7200/repositories"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+  semforms:
+    image: ghcr.io/maastrichtu-biss/semanticforms
+    ports:
+      - "5000:5000"
+    volumes:
+      - ./data:/app/data
+      - ./src/config.yaml:/app/config.yaml
+    depends_on:
+      rdf-store:
+        condition: service_healthy

src/config.yaml

@@ -1,8 +1,10 @@
 server:
   storageFolder: ./data
-  rdf_endpoint: http://localhost:7200/repositories/public_dump
-  rdf_endpoint_update: http://localhost:7200/repositories/public_dump/statements
+  server_url: "http://rdf-store:7200"
+  repository_name: "semantic_forms"
+  update_endpoint_suffix: "/statements"
 template:
-  source: file
-  location: template.json
-  instance_base_url: http://localhost/template-instances
+  source: cedar
+  templateId: 102d2c3b-2958-42b1-8baf-8a25ced9aca8
+  instance_base_url: http://localhost/template-instances
+  title_predicate: http://purl.org/dc/terms/title