Adding SHACL validation

package.json

@@ -130,6 +130,7 @@
     "postcss-loader": "^7.1.0",
     "prettier": "^2.8.6",
     "raw-loader": "^4.0.2",
+    "rdf-ext": "^2.5.0",
     "rdf-js": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -138,6 +139,7 @@
     "recoil": "^0.7.7",
     "rocketrml": "^2.1.2",
     "sass-loader": "^13.2.1",
+    "shacl-engine": "^0.1.0",
     "source-map-loader": "^4.0.1",
     "source-map-support": "^0.5.21",
     "style-loader": "^3.3.2",

public/Person.ttl

@@ -14,52 +14,26 @@ self:Philosopher
 
     sh:property [
         sh:path schema:givenName ;
-        sh:datatype rdf:langString ; 
-        sh:languageIn ( "en" "nl" ) ;
+        sh:datatype xsd:string ; 
         sh:minCount 1 ;
         sh:maxCount 1 ;
     ] ;
 
     sh:property [
         sh:path schema:familyName ;
+        sh:datatype xsd:string ; 
         sh:minCount 1 ;
         sh:maxCount 1 ;
     ] ;
 
-    # sh:property [
-    #     sh:path rdf:type ;
-    #     sh:in ( dbo:Philosopher ) ;
-    #     sh:minCount 1 ;
-    #     sh:maxCount 1 ;
-    # ] ;
-
     sh:property [
         sh:path dbo:birthPlace ;
-        sh:nodeKind sh:IRI ;
-        sh:node self:Location ;
+        sh:datatype xsd:string1 ; 
+        sh:maxCount 1 ;
     ] ;
 
     sh:property [
         sh:path dbo:birthDate ;
-        sh:datatype xsd:date;
+        sh:datatype xsd:string ; 
         sh:maxCount 1 ;
     ] .
-
-# self:Location
-#     a sh:NodeShape ;
-
-#     sh:targetClass <http://dbpedia.org/ontology/Location> ;
-
-#     # sh:property [
-#     #     sh:path rdf:type ;
-#     #     sh:minCount 1 ;
-#     #     sh:maxCount 1 ;
-#     # ] ;
-
-#     sh:property [
-#         sh:path rdfs:label ;
-#         sh:datatype rdf:langString ;
-#         sh:languageIn ( "de" "fr" ) ;
-#         sh:minCount 1 ;
-#         sh:maxCount 1 ;
-#     ] .

src/containers/Configure/InteractiveTableHeaders.tsx

@@ -32,6 +32,7 @@ const TableHeaders: React.FC<Props> = ({ shaclShapeMeta }) => {
   const [transformationConfig, setTransformationConfig] = useRecoilState(transformationConfigState);
   const [selectedHeader, setSelectedHeader] = React.useState<ColumnConfiguration | undefined>();
   const prefixes = useRecoilValue(prefixState);
+  const [activeDragOverColumn, setActiveDragOverColumn] = React.useState('')
 
   let columns = transformationConfig.columnConfiguration
 
@@ -46,12 +47,21 @@ const TableHeaders: React.FC<Props> = ({ shaclShapeMeta }) => {
 
   const dragOver = (columnConfig: ColumnConfiguration) => !columnConfig.shaclColumn ? (event: any) => {
     event.preventDefault();
+    setActiveDragOverColumn(columnConfig.columnName)
     event.dataTransfer.dropEffect = "move";
   } : undefined
 
+
+  const dragOut = (columnConfig: ColumnConfiguration) => !columnConfig.shaclColumn ? (event: any) => {
+    setActiveDragOverColumn('')
+  } : undefined
+
+
+
   const dropArea = (columnConfig: ColumnConfiguration) => !columnConfig.shaclColumn ? (event: any) => {
     event.preventDefault();
     const propertyIri = event.dataTransfer.getData("application/ld-wizard");
+    setActiveDragOverColumn('')
 
     setTransformationConfig((state) => {
       const columnConfiguration = [...state.columnConfiguration];
@@ -90,12 +100,13 @@ const TableHeaders: React.FC<Props> = ({ shaclShapeMeta }) => {
 
             return (
               <TableCell
-              onDragStart={dragStart(columnConfig)}
+                onDragStart={dragStart(columnConfig)}
                 draggable={columnConfig.shaclColumn}
                 onDrop={dropArea(columnConfig)}
                 onDragOver={dragOver(columnConfig)}
+                onDragLeave={dragOut(columnConfig)}
                 key={`${columnConfig.columnName}${idx}`}
-                className={getClassName(styles.tableHeader, { [styles.disabled]: isKeyColumn, [styles.shaclColumn]: columnConfig.shaclColumn })}
+                className={getClassName(styles.tableHeader, { [styles.disabled]: isKeyColumn, [styles.shaclColumn]: columnConfig.shaclColumn, [styles.draggingOver]: columnConfig.columnName === activeDragOverColumn })}
                 // Implement the disable here, I still want to be able to use tooltip
                 onClick={columnConfig.disabled ? undefined : () => setSelectedHeader(columnConfig)}
                 // Replace Default tableCell with ButtonBase to create ripple effects on click

src/containers/Configure/style.scss

@@ -32,13 +32,18 @@ th.tableHeader {
     cursor: default;
     background-color: #ccc;
   }
+
   &.shaclColumn {
     cursor: move; /* fallback if grab cursor is unsupported */
     cursor: grab;
     cursor: -moz-grab;
     cursor: -webkit-grab;
     background-color: #ffdec4;
   }
+
+  &.draggingOver {
+    background-color: #ffdec4;
+  }
 }
 .hint {
   pointer-events: none;

src/containers/Publish/DownloadResults.tsx

@@ -12,14 +12,15 @@ import { getFileBaseName } from "../../utils/helpers.ts";
 interface Props {
   transformationResult: string;
   refinedCsv: Matrix | undefined;
+  shaclConforms: boolean | null,
+  shaclReport?: string
 }
-const DownloadResults: React.FC<Props> = ({ transformationResult, refinedCsv }) => {
+const DownloadResults: React.FC<Props> = ({ transformationResult, refinedCsv, shaclConforms, shaclReport }) => {
   const downloadRef = React.useRef<HTMLAnchorElement>(null);
   const source = useRecoilValue(sourceState);
 
   const transformationConfig = useRecoilValue(transformationConfigState);
 
-
   const downloadFile = (content: File | string | undefined, defaultName: string, mediaType: string) => {
     if (!downloadRef.current || !content) return;
     if (typeof content === "string") {
@@ -87,8 +88,12 @@ const DownloadResults: React.FC<Props> = ({ transformationResult, refinedCsv })
             <CardHeader title="Download RDF" avatar={<FontAwesomeIcon icon="file" />} />
             <CardContent className={styles.downloadContent}>
               Download the transformed Linked Data (RDF) to your local machine.
+
+              {shaclConforms === false ? <span><br /><br /><FontAwesomeIcon icon={["fas", "xmark"]} /> The data does not conform to the selected SHACL shape</span> : null}
+              {shaclConforms === true ? <span><br /><br /><FontAwesomeIcon icon={["fas", "check"]} /> The data does conform to the selected SHACL shape</span> : null}
             </CardContent>
             <CardActions>
+              {shaclConforms !== false ? 
               <Button
                 onClick={() => downloadFile(transformationResult, rdfFileName, "application/n-triples")}
                 component="span"
@@ -97,7 +102,20 @@ const DownloadResults: React.FC<Props> = ({ transformationResult, refinedCsv })
                 style={{textTransform: 'none'}}
               >
                 Download RDF
-              </Button>
+              </Button> :
+              <SplitButton
+              actions={["rdf", "shacl"]}
+              getOptionsLabel={(option) => option === 'rdf' ? `RDF` : 'SHACL report'}
+              getButtonlabel={(selectedOption) => selectedOption === 'rdf' ? `Download RDF` : 'Download SHACL report'}
+              onActionSelected={(result) => {
+                if (result === 'rdf') {
+                  downloadFile(transformationResult, rdfFileName, "application/n-triples")
+                }
+                else {
+                  downloadFile(shaclReport, 'shacl-validation-report.nt', "application/n-triples")
+                }
+              }}
+              />}
             </CardActions>
           </Card>
           <Card variant="outlined" className={styles.downloadSegment}>

src/containers/Publish/index.tsx

@@ -10,6 +10,10 @@ import { currentTokenState } from "../../state/clientJs.ts";
 import DownloadResults from "./DownloadResults.tsx";
 import { wizardAppConfig, PublishElement } from "../../config/index.ts";
 import { Matrix } from "../../Definitions.ts";
+import { Validator } from 'shacl-engine'
+import rdf from 'rdf-ext'
+import { Parser, Store, Writer } from 'n3'
+
 interface Props { }
 export const Step = 3;
 const Publish: React.FC<Props> = ({ }) => {
@@ -21,6 +25,9 @@ const Publish: React.FC<Props> = ({ }) => {
   const [transformationResult, setTransformationResult] = React.useState<string>();
   const [transformationError, setTransformationError] = React.useState<string>();
   const [progress, setProgress] = React.useState(0);
+  const [conforms, setConforms] = React.useState(null);
+  const [shaclReportTurtle, setShaclReportTurtle] = React.useState('');
+
 
 function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
   return (
@@ -252,6 +259,25 @@ function LinearProgressWithLabel(props: LinearProgressProps & { value: number })
           source: tempRefinedCsv || parsedCsv,
           type: "rml",
         });
+
+        if (transformationConfig.shaclShape) {
+          const shaclShapes = await wizardAppConfig.getShaclShapes()
+
+          const selectedShaclShape = shaclShapes.find(shaclShape => shaclShape.iri === transformationConfig.shaclShape)
+          const parser = new Parser()
+          const quads = await parser.parse(transformationResult)
+          const store = new Store(quads)
+          const validator = new Validator(selectedShaclShape.store, { factory: rdf })
+          const report = await validator.validate({ dataset: store })
+
+          setConforms(report.conforms)
+
+          if (!report.conforms) {
+            const writer = new Writer()
+            for (const quad of report.dataset) writer.addQuad(quad)
+            writer.end((error, result) => setShaclReportTurtle(result))
+          }
+        }
         setTransformationResult(transformationResult);
       }
     };
@@ -296,7 +322,7 @@ function LinearProgressWithLabel(props: LinearProgressProps & { value: number })
   }
   const publishOptions: { [P in PublishElement]: React.ReactElement } = {
     download: (
-      <DownloadResults refinedCsv={refinedCsv} transformationResult={transformationResult} key="Download-to-browser" />
+      <DownloadResults shaclReport={shaclReportTurtle} shaclConforms={conforms} refinedCsv={refinedCsv} transformationResult={transformationResult} key="Download-to-browser" />
     ),
     triplyDB: (
       <ErrorBoundary

src/theme/global.scss

@@ -28,4 +28,4 @@
   body {
     margin: 0;
   }
-}
+}