Merge branch 'main' of https://github.com/terminusdb/terminusdb-dashboard

Author: Francesca-Bit

.github/workflows/main_workflow.yml

@@ -17,7 +17,7 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
-        node-version: 16
+        node-version: 18
     - run: npm i
     - name: Build
       if: ${{ github.ref == 'refs/heads/main' || github.event_name == 'pull_request' }}
@@ -47,18 +47,18 @@ jobs:
             AUDIENCE="https://terminuscloud/users"
         ' > .env
         npm run build-terminusx
-    - name: Set up Cloud SDK
-      uses: google-github-actions/setup-gcloud@v0
-      with:
-        project_id: ${{ secrets.GCLOUD_PROJECT }}
-        service_account_key: ${{ secrets.GCLOUD_SERVICE_ACCOUNT_KEY }}
-        export_default_credentials: true
-    - name: Upload tdb-dashboard dev
+    - name: Upload tdb-dashboard to dev s3
       if: ${{ github.event_name != 'pull_request' && github.ref == 'refs/heads/main' }}
-      run: gsutil -h "Cache-Control:public, max-age=60" cp -r packages/tdb-dashboard/dist/* "gs://${{ secrets.GCLOUD_DEV_BUCKET }}/"
-    - name: Upload tdb-dashboard prod
+      env:
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      run: aws s3 sync packages/tdb-dashboard/dist/ s3://${{ secrets.S3_DEV_BUCKET }} --region=${{ secrets.AWS_REGION }}
+    - name: Upload tdb-dashboard to prod s3
       if: ${{ github.event_name != 'pull_request' && startsWith(github.ref, 'refs/tags/v') }}
-      run: gsutil -h "Cache-Control:public, max-age=60" cp -r packages/tdb-dashboard/dist/* "gs://${{ secrets.GCLOUD_BUCKET }}/"
+      env:
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      run: aws s3 sync packages/tdb-dashboard/dist/ s3://${{ secrets.S3_PROD_BUCKET }} --region=${{ secrets.AWS_REGION }}
     - name: Clean cloudflare cache
       if: ${{ github.event_name != 'pull_request' }}
       run: python3 .ci/clean_cloudflare_cache.py ${{ github.ref }}
@@ -76,7 +76,7 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
-        node-version: 16
+        node-version: 18
     - run: npm i
     - name: Build local dashboard
       if: ${{ github.ref == 'refs/heads/main' || github.event_name == 'pull_request' || startsWith(github.ref, 'refs/tags/v') }}
@@ -108,7 +108,7 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
-        node-version: 16
+        node-version: 18
         registry-url: 'https://registry.npmjs.org'
     - name: Build packages
       run: npm i && npm run build --ws

package-lock.json

@@ -183,9 +183,9 @@ const ViewHeader = ({type, id, setView, setShowCRModal, setClickedDelete}) => {
         <div className="col-md-6"> 
             <strong className="text-success">
                 <span className="mr-1 h6 fst-italic">{CONST.VIEW_DOCUMENT}:</span> 
-                <span className="fw-bolder h6"> {type}/{id} </span>
+                <span className="fw-bolder h6"> {id} </span>
             </strong>
-            <CopyButton text={`${type}/${id}`} title={`Copy Document ID`}/>
+            <CopyButton text={`${id}`} title={`Copy Document ID`}/>
         </div>
         <ViewFramesButton/>
         <ToggleJsonAndFormControl onClick={setView}/>

packages/tdb-dashboard/src/components/DocumentComponents.js

@@ -25,12 +25,12 @@ export const NoDataProductSelected = (props) => {
 			img: "https://ichef.bbci.co.uk/news/976/cpsprodpb/4F49/production/_125879202_legorussia.png",
 			description: "This data product features Lego sets and their individual components and the relationships between them. It is an excellent example of organizations that have interconnected components and parts within their product offerings."
 		},
-		/*{
-			name: "Star_Wars", 
+		{
+			name: "star_wars", 
 			label: "Relationships Between People, Real Estate, & Equipment", 
 			img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHkosbW26brusDap1E3y2GV6pnIRsjg-9Rc1CdJRuMJjrJ1O6fJs_x2bjcGjBUCB_wkTE&usqp=CAU",
 			description: "This data product features a Star Wars dataset and their individual components and how they are all connected and is a good example of the relationships between people and things."
-		},*/
+		},
 		{
 			name: "nuclear", 
 			label: "The Complex Energy Sector", 

packages/tdb-dashboard/src/components/NoDataProductSelected.js

@@ -125,29 +125,44 @@ export const Output = () => {
         }
       }*/
 
-    let testFrames ={
+    let testFrames = {
       "@context": {
-        "@base": "terminusdb:///documentation/data/",
-        "@schema": "terminusdb:///documentation/schema#",
+        "@base": "terminusdb:///data/",
+        "@schema": "terminusdb:///schema#",
         "@type": "Context"
       },
-      "Body": {
+      "body": {
+        "@key": {
+          "@type": "Random"
+        },
         "@metadata": {
           "render_as": {
-            "value": "markdown"
+            "optMarkDown": "markdown",
+            "setMarkDown": "markdown"
           }
         },
         "@type": "Class",
-        "value": "xsd:string"
+        "optMarkDown": {
+          "@class": "xsd:string",
+          "@type": "Optional"
+        },
+        "setMarkDown": {
+          "@class": "xsd:string",
+          "@type": "Set"
+        },
+        "text": {
+          "@class": "xsd:string",
+          "@type": "Set"
+        }
       }
-      
     }
+    
     return <div className="w-100">
         <DiffViewer 
             oldValue={doc[OLD_VALUE]} 
             newValue={doc[CHANGED_VALUE]}
             frame={testFrames}
-            type={"Body"}
+            type={"body"}
             diffPatch={diff}/>
     </div>
 }

packages/tdb-documents-ui/diff/src/Output.js

@@ -1,54 +1,28 @@
 /** Review DependencyRelation - boolean field  | Geometry */
 export const oldData = {
-	/*"Body": {
-		"@id": "Body/c4a7f457e606df038ba5f6b4089e1e4cc5ddc8f0d5ad6fed1bb2a49d43378252",
-		"@type": "Body",
-		"value": "---\n__Advertisement :)__\n\n- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image\n  resize in browser.\n- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly\n  i18n with plurals support and easy syntax.\n\nYou will like those projects!\n\n---\n\n# h1 Heading 8-)\n## h2 Heading\n### h3 Heading\n#### h4 Heading\n##### h5 Heading\n###### h6 Heading\n\n\n## Horizontal Rules\n\n___\n\n---\n\n***\n\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,,  -- ---\n\n\"Smartypants, double quotes\" and 'single quotes'\n\n\n## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n~~Strikethrough~~\n\n\n## Blockquotes\n\n\n> Blockquotes can also be nested...\n>> ...by using additional greater-than signs right next to each other...\n> > > ...or with spaces between arrows.\n\n\n## Lists\n\nUnordered\n\n+ Create a list b",
-	},*/
-	"job": {
-		"@id": "job/16c3c5ff4003bb3d53d876504ac89703fffc378338154a5abffd012892aef332",
-		"@type": "job",
-		"company": "company",
-		"title": "saddsa",
-		"nonUnfoldable_property": "nonUnfoldable_property/239729wqdsad8921973",
-		"section": {
-			"@id": "category/215b036f11acf6b0be2e698ece217193ca9adf1eeadb8c7872f7690e93100730",
-			"@type": "category",
-			"name": "ddd",
-			"notes": "crappy",
-			"has_other": {
-				"@id": "subCategory/215b036f11acf6b0be2e698ece217193ca9adf1eeadb8c7872f7690e93100730",
-				"@type": "subCategory",
-				"description": "elaborate descr",
-			}
-		}
+	"body": {
+		"@id": "body/6230f55d381076aa7f94b6b01a7a7ae1692ef40c44e233a52c1c280b5d339839",
+		"@type": "body",
+		"optMarkDown": "### opt",
+		"setMarkDown": [
+		  "### set 1",
+		  "### set 2"
+		],
+		"text": ["text1", "text2", "text3", "2","text4org", "5", "5"]
 	}
 } 
 
 
 export const changedData = {
-	"Body": {
-		/*"@id": "Body/c4a7f457e606df038ba5f6b4089e1e4cc5ddc8f0d5ad6fed1bb2a49d43378252",*/
-		"@type": "Body",
-		"value": "---\n__Advertisement :)__\n\n- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image\n  resize in browser.\n- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly\n  i18n with plurals support and easy syntax.\n\nYou will like those projects!\n\n---\n\n# h1 Heading 8-)\n## h2 Heading\n### h3 Heading\n#### h4 Heading\n##### h5 Heading\n###### h6 Heading\n\n\n## Horizontal Rules\n\n___\n\n---\n\n***\n\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,,  -- ---\n\n\"Smartypants, double quotes\" and 'single quotes'\n\n\n## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n~~Strikethrough~~\n\n\n## Blockquotes\n\n\n> Blockquotes can also be nested...\n>> ...by using additional greater-than signs right next to each other...\n> > > ...or with spaces between arrows.\n\n\n## Lists\n\nUnordered\n\n+ Create a list b",
-	},
-	"job": {
-		"@id": "job/16c3c5ff4003bb3d53d876504ac89703fffc378338154a5abffd012892aef332",
-		"@type": "job",
-		"company": "company",
-		"title": "saddsa",
-		"nonUnfoldable_property": "nonUnfoldable_property/239729wqdsad8921973",
-		"section": {
-			"@id": "category/215b036f11acf6b0be2e698ece217193ca9adf1eeadb8c7872f7690e93100730",
-			"@type": "category",
-			"name": "ddd",
-			"notes": "crappy new data",
-			"has_other": {
-				"@id": "subCategory/215b036f11acf6b0be2e698ece217193ca9adf1eeadb8c7872f7690e93100730",
-				"@type": "subCategory",
-				"description": "elaborate descr",
-			}
-		}
+	"body": {
+		"@id": "body/6230f55d381076aa7f94b6b01a7a7ae1692ef40c44e233a52c1c280b5d339839",
+		"@type": "body",
+		"optMarkDown": "### opt changed",
+		"setMarkDown": [
+		  "### set 1 changed",
+		  "### set 2"
+		],
+		"text": ["text1changed", "text2", "text3ch", "2", "text4", "5", "5"]
 	}
 } 
 /*

packages/tdb-documents-ui/diff/src/diff.constants.js

@@ -542,7 +542,10 @@ div.leaflet-popup-content-wrapper > div.leaflet-popup-content {
 
 /** REACT DIFF VIEWER FOR MARKDOWN **/
 /** hide changed diff from original react-diff-viewer */
-div.diff_react_viewer_original > table.css-1ri4lr5-diff-container > tbody > tr.css-1n7ec1i-line td:nth-last-child(-n+3) {
+/*div.diff_react_viewer_original > table.css-1ri4lr5-diff-container > tbody > tr.css-1n7ec1i-line td:nth-last-child(-n+3) {
+    display: none !important;
+}*/
+div.diff_react_viewer_original  table.css-1ri4lr5-diff-container  tbody  tr.css-1n7ec1i-line td.css-1pm82w3-diff-added {
     display: none !important;
 }
 
@@ -563,7 +566,11 @@ div.diff_react_viewer_original > table.css-1ri4lr5-diff-container > tbody > tr.c
 }
 
 /** hide original diff from changed react-diff-viewer */
-div.diff_react_viewer_changed > table.css-1ri4lr5-diff-container > tbody > tr.css-1n7ec1i-line td:nth-child(-n+3) {
+/*div.diff_react_viewer_changed > table.css-1ri4lr5-diff-container > tbody > tr.css-1n7ec1i-line td:nth-child(-n+3) {
+    display: none !important;
+}*/
+
+div.diff_react_viewer_changed table.css-1ri4lr5-diff-container tbody tr.css-1n7ec1i-line td.css-14exn69-diff-removed {
     display: none !important;
 }
 
@@ -744,7 +751,8 @@ form.rjsf label.control-label:after { content: "";  }
 
 /* hide anyof select from document links in edit and view mode */
 .tdb__edit__document__link .panel .form-group select.form-control,
-.tdb__view__document__link .panel .form-group select.form-control{
+.tdb__view__document__link .panel .form-group select.form-control,
+.tdb__view__document__link + .panel {
     display: none !important; 
 }
 

packages/tdb-documents-ui/src/css/terminusdb__styles.css

@@ -105,11 +105,17 @@ function patchListOperation (diff, item, tagOriginalUI, tagChangedUI) {
                 }
                 else {  
                     // copy list swap operation 
-                    diff[DIFFCONST.REST][DIFFCONST.REST].map(rest => { 
-                        let {originalUI, changedUI} = swapOperation(rest)
-                        tagOriginalUI[item].push(originalUI)
-                        tagChangedUI[item].push(changedUI)
-                    })
+                    if(Array.isArray(diff[DIFFCONST.REST][DIFFCONST.REST])) {
+                        diff[DIFFCONST.REST][DIFFCONST.REST].map(rest => { 
+                            let {originalUI, changedUI} = swapOperation(rest)
+                            tagOriginalUI[item].push(originalUI)
+                            tagChangedUI[item].push(changedUI)
+                        })
+                    }
+                    else {
+                        // at this point this will be patch operation - if not we will need a check here to see if @op is patch
+                        patchListOperation (diff[DIFFCONST.REST][DIFFCONST.REST], item, tagOriginalUI, tagChangedUI)
+                    }
 
                 }
             }
@@ -339,7 +345,7 @@ function getCss(props, item, tagUI) {
 
 
 // ALL ARRAY FIELDS
-export function getArrayFieldDiffs(diff, item, oldValue, newValue) {
+export function getArrayFieldDiffs(diff, item, oldValue, newValue, metaDataConfig) {
 
     let originalUIFrame={}, changedUIFrame={}
 
@@ -420,7 +426,15 @@ export function getArrayFieldDiffs(diff, item, oldValue, newValue) {
         // when @before is null - we will check form data here 
         let css = getCss(props, item, tagOriginalUI)
         let data=getFormData(props.formData, css)
-        return displayElements(data, item, props.schema, tagOriginalUI)
+        /*if(metaDataConfig) {
+            css= css === "tdb__diff__original" ? "diff_react_viewer_original mb-3" : ""
+            return <DisplayArrayMarkdown data={data} 
+                item={item} 
+                newValue={newValue}
+                oldValue={oldValue}
+                css={css}/>
+        }
+        else */return displayElements(data, item, props.schema, tagOriginalUI, metaDataConfig)
     }
 
     /**
@@ -433,7 +447,15 @@ export function getArrayFieldDiffs(diff, item, oldValue, newValue) {
         // when @after is null - we will check form data here 
         let css = getCss(props, item, tagChangedUI)
         let data=getFormData(props.formData, css)
-        return displayElements(data, item, props.schema, tagChangedUI)
+        /*if(metaDataConfig) {
+            css=css === "tdb__diff__changed" ? "diff_react_viewer_changed mb-3" : ""
+            return <DisplayArrayMarkdown data={data} 
+                item={item} 
+                newValue={newValue}
+                oldValue={oldValue}
+                css={css}/>
+        }
+        else*/ return displayElements(data, item, props.schema, tagChangedUI, metaDataConfig)
     }
 
     originalUIFrame[CONST.DIFF] = displayOriginal

packages/tdb-documents-ui/src/diffs/arrayFieldDiffs.js

@@ -1,6 +1,7 @@
 import * as DIFFCONST from "./diff.constants"
-import {DIFF} from "../constants"
+import { DIFF, MARKDOWN } from "../constants"
 import * as util from "./diffComponents"
+import { getMarkdownFieldDiffs } from "./markdownFieldDiffs"
 
 /**
  * 
@@ -53,7 +54,15 @@ function getClassNamesForDiffs(diff) {
 
 
 // ALL SWAP VALUE OPERATIONS
-export function getDataFieldDiffs(diff) { 
+export function getDataFieldDiffs(diff, metaDataConfig) { 
+
+    if(metaDataConfig) {
+        if(metaDataConfig.metaDataType === MARKDOWN) {
+            // display as markdown
+            let ui=getMarkdownFieldDiffs(metaDataConfig) 
+            return ui
+        }
+    }
 
     if(!diff.hasOwnProperty(DIFFCONST.OPERATION)) { 
         let originalUIFrame=[], changedUIFrame=[]
@@ -72,5 +81,5 @@ export function getDataFieldDiffs(diff) {
 
     let {originalUIFrame, changedUIFrame}=getClassNamesForDiffs(diff)
 
-    return {originalUIFrame, changedUIFrame}
+    return { originalUIFrame, changedUIFrame }
 }