Dev

.github/conda/meta.yaml

@@ -24,6 +24,7 @@ requirements:
   - uvicorn
   - clingraph
   - Pillow
+  - clingexplaid
 
 build:
   number: {{ build }}

.github/deploy.yml

@@ -16,7 +16,7 @@ pip:
 conda:
     package_name:
         'clinguin'
-    os: 
+    os:
         - 'ubuntu-latest'
     channels_release:
         - 'potassco'
@@ -48,6 +48,7 @@ conda:
           - uvicorn
           - clingraph
           - Pillow
+          - clingexplaid
 
       build:
         noarch: python

.github/requirements.txt

@@ -5,4 +5,5 @@ fastapi==0.103.*
 networkx
 uvicorn
 clingraph
-Pillow
+Pillow
+clingexplaid

.pylintrc

@@ -31,4 +31,4 @@ variable-rgx=^[a-z][a-z0-9]*((_[a-z0-9]+)*_?)?$
 good-names=_,M,N,B,A,Nn,Bn,An
 
 [MESSAGE CONTROL]
-disable=W0719,W0122,C0206,C0201,W0718,R0902,C0103
+disable=W0719,W0122,C0206,C0201,W0718,R0902,C0103,E1129

README.md

@@ -1,7 +1,7 @@
 # Clinguin
 
 Clinguin enables ASP developers to **create interactive User Interface** (UI) prototypes **using only ASP**.
-UIs are defined as sets of facts,  which are then rendered by a fronted to provide continuous interaction with ASP solvers based on user-triggered events.
+UIs are defined as sets of facts,  which are then rendered to provide continuous interaction with the ASP solver *clingo* based on user-triggered events.
 
 ***Your UI definition would look like this!***
 
@@ -35,7 +35,7 @@ Clinguin includes a wide range of [clingo](https://potassco.org/clingo/) functio
 
 ***Is clinguin missing something for your application?***
 
-No worries! Clinguin can be extended with different functionalities and even frontend languages, take a look [at this guide](https://clinguin.readthedocs.io/en/latest/clinguin/backends.html#creating-your-own-backend).
+No worries! Clinguin can be extended with different functionalities and even frontend languages, take a look [at this guide](https://clinguin.readthedocs.io/en/latest/clinguin/development/customBackend.html).
 
 
 ## Installation

angular_frontend/package.json

@@ -39,4 +39,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.1.3"
   }
-}
+}

angular_frontend/src/app/app.component.scss

@@ -1,3 +1,3 @@
 div.content-wrapper {
-    padding-top: 5%;
+    padding-top: 1%;
 }

angular_frontend/src/app/attribute-helper.service.ts

@@ -2,69 +2,69 @@ import { Attribute, Injectable } from '@angular/core';
 import { AttributeDto, ElementDto } from './types/json-response.dto';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root'
 })
 export class AttributeHelperService {
 
-  constructor() { }
+    constructor() { }
 
-    attrBackgroundColor(html:HTMLElement, attribute: AttributeDto) {
+    attrBackgroundColor(html: HTMLElement, attribute: AttributeDto) {
         let value = attribute.value
 
         html.style.backgroundColor = value
     }
 
-    attrHeight(html:HTMLElement, attribute: AttributeDto) {
+    attrHeight(html: HTMLElement, attribute: AttributeDto) {
         let value = attribute.value + "px"
         html.style.height = value
     }
 
-    attrWidth(html:HTMLElement, attribute: AttributeDto) {
+    attrWidth(html: HTMLElement, attribute: AttributeDto) {
         let value = attribute.value + "px"
         html.style.width = value
     }
 
 
-    setBorderHelper(html:HTMLElement, attributes: AttributeDto[]) {
+    setBorderHelper(html: HTMLElement, attributes: AttributeDto[]) {
 
         let borderWidth = Number(this.findGetAttributeValue("border_width", attributes, "0"))
-        let borderColor = this.findGetAttributeValue("border_color",attributes, "black")
+        let borderColor = this.findGetAttributeValue("border_color", attributes, "black")
         let borderStyle = "solid"
 
         this.setBorder(html, borderWidth, borderColor, borderStyle)
     }
 
-    setBorder(html:HTMLElement, borderWidth: number, borderColor: string, borderStyle: string) {
+    setBorder(html: HTMLElement, borderWidth: number, borderColor: string, borderStyle: string) {
         if (borderWidth > 0) {
             html.style.border = String(borderWidth) + "px " + borderStyle + " " + borderColor
         }
 
     }
 
-    addAttributes(html:HTMLElement, attributes : AttributeDto[]) {
+    addAttributes(html: HTMLElement, attributes: AttributeDto[]) {
 
         let attr_dict = [
-            {key:"background_color",value:this.attrBackgroundColor},
-            {key:"height", value:this.attrHeight},
-            {key:"width", value:this.attrWidth},
+            { key: "background_color", value: this.attrBackgroundColor },
+            { key: "height", value: this.attrHeight },
+            { key: "width", value: this.attrWidth },
         ]
 
         attributes.forEach(attribute => {
             let index = attr_dict.findIndex(item => item.key == attribute.key)
             if (index >= 0) {
-                attr_dict[index].value(html,attribute)
+                attr_dict[index].value(html, attribute)
             }
         })
 
         this.setHover(html, attributes)
     }
 
-    addGeneralAttributes(html:HTMLElement, attributes: AttributeDto[]) {
-        this.setGrid(html,attributes)
+    addGeneralAttributes(html: HTMLElement, attributes: AttributeDto[]) {
+        this.setGrid(html, attributes)
         this.setBorderHelper(html, attributes)
     }
 
-    setGrid(html: HTMLElement, attributes:AttributeDto[]) {
+    setGrid(html: HTMLElement, attributes: AttributeDto[]) {
 
         let gridRowStart = this.findAttribute("grid_row", attributes)
         let gridRowSpan = this.findAttribute("grid_row_span", attributes)
@@ -86,24 +86,24 @@ export class AttributeHelperService {
 
             html.style.gridRow = String(gridRowStartN) + "/" + "span " + String(gridRowSpanN)
         }
-        
+
         if (gridColumnStart != null) {
             let gridColumnStartN = Number(gridColumnStart.value) + 1
 
             html.style.gridColumn = String(gridColumnStartN) + "/" + "span " + String(gridColumnSpanN)
         }
     }
 
-    setHover(html: HTMLElement, attributes:AttributeDto[]) {
+    setHover(html: HTMLElement, attributes: AttributeDto[]) {
 
-        let onHover = this.findGetAttributeValue("on_hover", attributes,"false")
-        let onHoverBackgroundColor = this.findGetAttributeValue("on_hover_background_color", attributes,"white")
-        let onHoverForegroundColor = this.findGetAttributeValue("on_hover_foreground_color", attributes,"black")
-        let onHoverBorderColor = this.findGetAttributeValue("on_hover_border_color", attributes,"white")
-        let backgroundColor = this.findGetAttributeValue("background_color", attributes,"white")
-        let foregroundColor = this.findGetAttributeValue("foreground_color", attributes,"black")
+        let onHover = this.findGetAttributeValue("on_hover", attributes, "false")
+        let onHoverBackgroundColor = this.findGetAttributeValue("on_hover_background_color", attributes, "white")
+        let onHoverForegroundColor = this.findGetAttributeValue("on_hover_foreground_color", attributes, "black")
+        let onHoverBorderColor = this.findGetAttributeValue("on_hover_border_color", attributes, "white")
+        let backgroundColor = this.findGetAttributeValue("background_color", attributes, "white")
+        let foregroundColor = this.findGetAttributeValue("foreground_color", attributes, "black")
         let borderWidth = Number(this.findGetAttributeValue("border_width", attributes, "0"))
-        let borderColor = this.findGetAttributeValue("border_color",attributes, "black")
+        let borderColor = this.findGetAttributeValue("border_color", attributes, "black")
         let borderStyle = "solid"
 
         if (onHover == "true") {
@@ -124,7 +124,7 @@ export class AttributeHelperService {
 
     }
 
-    textAttributes(html: HTMLElement, attributes : AttributeDto[]) {
+    textAttributes(html: HTMLElement, attributes: AttributeDto[]) {
         // NOw IS SUPPOSED TO BE SET WITH THE CLASSES
 
 
@@ -133,66 +133,69 @@ export class AttributeHelperService {
         // let index = attributes.findIndex(item => item.key == "foreground_color")
         // if (index >= 0) {
         //     color = String(attributes[index].value)
-        // }       
-        // html.style.color = color 
+        // }
+        // html.style.color = color
 
         // let fontSize = String(12) + "px"
         // let index = attributes.findIndex(item => item.key == "font_size")
         // if (index >= 0) {
         //     fontSize = String(attributes[index].value)
-        // }       
+        // }
         // html.style.fontSize = fontSize
 
     }
 
-    addClasses(html: Element, attributes : AttributeDto[], base_classes:string[], default_classes:string[], attrName: string ='class' ) {
+    addClasses(html: Element, attributes: AttributeDto[], base_classes: string[], default_classes: string[], attrName: string = 'class') {
 
-        base_classes.forEach(function (c){
+        base_classes.forEach(function (c) {
+            if (html.classList.contains(c)) {
+                html.classList.remove(c)
+            }
             html.classList.add(c)
         })
         let added = false
-        attributes.forEach(function (item){
-            if (item.key==attrName){
+        attributes.forEach(function (item) {
+            if (item.key == attrName) {
                 added = true
                 let c = String(item.value)
                 html.classList.add(c)
             }
         })
 
-        if (!added){
-            default_classes.forEach(function (c){
+        if (!added) {
+            default_classes.forEach(function (c) {
                 html.classList.add(c)
             })
         }
-        
+
 
     }
 
     setAttributesDirectly(html: HTMLElement, attributes: AttributeDto[]) {
-        attributes.forEach((attr : AttributeDto) => {
+        attributes.forEach((attr: AttributeDto) => {
             (<any>html.style)[attr.key] = attr.value
         })
     }
 
-    findAttribute(key:string, attributes: AttributeDto[]) : AttributeDto | null {
-      let value = null
-      let index = attributes.findIndex(attr => attr.key == key)
-      if (index >= 0) {
-        value = attributes[index]
-      }
-      return value
+    findAttribute(key: string, attributes: AttributeDto[]): AttributeDto | null {
+        let value = null
+        let index = attributes.findIndex(attr => attr.key == key)
+        if (index >= 0) {
+            value = attributes[index]
+        }
+        return value
     }
 
     findGetAttributeValue(key: string, attributes: AttributeDto[], defaultValue: string) {
-      let value = defaultValue
-      let index = attributes.findIndex(attr => attr.key == key)
-      if (index >= 0) {
-        value = attributes[index].value
-      }
-      return value
+        let value = defaultValue
+        let index = attributes.findIndex(attr => attr.key == key)
+        if (index >= 0) {
+            value = attributes[index].value
+        }
+        return value
     }
 
-    setAbsoulteRelativePositions(parentChildLayout:string, html:HTMLElement, child:ElementDto) {
+    setAbsoulteRelativePositions(parentChildLayout: string, html: HTMLElement, child: ElementDto) {
 
         let posX = Number(this.findGetAttributeValue("pos_x", child.attributes, "-1"))
         let posY = Number(this.findGetAttributeValue("pos_y", child.attributes, "-1"))
@@ -225,7 +228,7 @@ export class AttributeHelperService {
 
     }
 
-    setChildLayout(html:HTMLElement, attributes: AttributeDto[]) {
+    setChildLayout(html: HTMLElement, attributes: AttributeDto[]) {
         let attribute = this.findAttribute("child_layout", attributes)
         let flex_direction = this.findAttribute("flex_direction", attributes)
 
@@ -251,16 +254,16 @@ export class AttributeHelperService {
             }
         } else {
             html.style.display = "flex"
-            if (flex_direction != null){
+            if (flex_direction != null) {
                 html.style.flexDirection = flex_direction.value
 
-            }else {
+            } else {
                 html.style.flexDirection = "column"
             }
         }
     }
 
-    setVisibility(html:HTMLElement, attributes:AttributeDto[]) {
+    setVisibility(html: HTMLElement, attributes: AttributeDto[]) {
         let visibilityAttribute = this.findAttribute("visibility", attributes)
         if (visibilityAttribute != null) {
             if (visibilityAttribute.value == "hidden" || visibilityAttribute.value == "collapse") {