adding documents-ui to terminusdb-dashboard

Author: Kitty Jose

package-lock.json

@@ -5,6 +5,7 @@
     "./packages/react-worker",
     "./packages/tdb-react-layout",
     "./packages/tdb-access-control-component",
-    "./packages/tdb-dashboard"
+    "./packages/tdb-dashboard",
+    "./packages/tdb-documents-ui"
   ]
 }

package.json

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from "react"
 import {WOQLClientObj} from '../init-woql-client'
 import {MenuItem, SubMenu} from 'react-pro-sidebar'
-import 'react-pro-sidebar/dist/css/styles.css'
+import 'react-pro-sidebar/dist/css/styles.css' 
 import {QueryPaneObj} from "../hooks/queryPaneContext"
 //import {DatabaseInfoControl} from "../hooks/DatabaseInfoControl" 
 import {getPropertiesOfClass, getPropertyRelation, getDocumentClasses} from '../queries/GeneralQueries'
@@ -52,6 +52,7 @@ export const DataProductDocuments = () => {
 
 
     async function handleClassClick (id) {
+        
         try{
             let db=woqlClient.db()
             const result = await woqlClient.getSchemaFrame(id, db)
@@ -71,6 +72,7 @@ export const DataProductDocuments = () => {
 
     useEffect(() => { // get count of document classes
         if(!documentClasses) return 
+        console.log(" i enter here ")
         let q=getCountOfDocumentClass(documentClasses)
         setQuery(q)
     }, [documentClasses])
@@ -187,10 +189,7 @@ export const DocumentExplorerDocuments = () => {
                     title={`View documents of type ${item["@id"]}`}
                     onClick={(e) => handleClassClick(item["@id"])}
                     disabled={disabled}>
-                    
-                        
                         <span className="text-gray">{item["@id"]}</span>
-                        
                 </Button>
                 {actionControl.write && <Button 
                     className="btn-create-document pro-item-content btn-sm" 

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

@@ -130,6 +130,7 @@ export const DocumentFrames = () => {
     //console.log("documentObject", documentObject.message)
 
     //console.log("refreshedDocumentObject in doc frame", documentObjectWithFrames)
+    
     if(loading) return <Loading message={`Fetching frames ...`} type={PROGRESS_BAR_COMPONENT}/>
 
     return <main className="content mr-3 ml-5 w-100">

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

@@ -78,7 +78,7 @@ export const DocumentInfo = () => {
     }
 
     function onTraverse(clicked) {
-        console.log("clicked", clicked)
+       
         var previous = []
         if(Array.isArray(documentObject.previous)) {
             previous = documentObject.previous

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

@@ -20,7 +20,6 @@ import {DocumentControlObj} from '../hooks/DocumentControlContext'
 
 export const DocumentSummary = () => {
 
-
     const {dataProduct,organization} = useParams()
 
     const getUrl = (pageName)=> {

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

@@ -82,7 +82,13 @@ export const DocumentView = () => {
         if(documentClasses){
             setBarLoading(false)
         }
-    }, [documentClasses])
+    }, [documentClasses]) 
+
+    /*useEffect(() => {
+        if(!perDocumentCount) return 
+        if(!documentClasses) return 
+        setBarLoading(false)
+    }, [documentObjectWithFrames.update])*/
 
     useEffect(() => {
         setBarLoading(true)
@@ -110,6 +116,7 @@ export const DocumentView = () => {
 
     function extractDocuments(documentResults) {
         var extractedResults=[]
+        
         documentResults.map(item=> {
             var newJson={}
             for(var key in item){
@@ -124,15 +131,18 @@ export const DocumentView = () => {
                         newJson[key]=newArray
                     }
                 }
-                else if(item[key]["@id"]){ // object
-                    newJson[key]=item[key]["@id"]
+                else if(typeof item[key] === "object"){
+                    if(item[key].hasOwnProperty("@id")){ // object - we do not display sys json data as part of table
+                        newJson[key]=item[key]["@id"]
+                    }
                 }
                 else {
                     newJson[key]=item[key]
                 }
             }
             extractedResults.push(newJson)
         })
+        //console.log("extractedResults", extractedResults)
         return extractedResults
     }
 
@@ -188,7 +198,6 @@ export const DocumentView = () => {
         })
     }
 
-
     if(barloading){
         var message
         if(!documentObjectWithFrames.action) message = `Fetching documents of ${dataProduct}`
@@ -197,8 +206,6 @@ export const DocumentView = () => {
         return <Loading message={message}/>
     }
 
-    //console.log("documentResults", documentResults)
-
     if(!actionControl.read && !actionControl.write) {
         // info reader access control
         return <React.Fragment>
@@ -286,6 +293,7 @@ export const DocumentView = () => {
                 documentObjectWithFrames.update &&
                 <DocumentFrames/>}
 
+
         </Row>
     </React.Fragment>
 

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

@@ -222,3 +222,29 @@ export function displayIDOfLinkedDocuments (results) {
     return newResults
 }
 
+/**
+ * Note - maybe should move this logic to client.getDocumentClasses
+ * @param {*} classRes - document classes 
+ * @returns - returns formatted document classes withour prefixes
+ */
+export function formatClassResults(classRes) {
+    if(!Array.isArray(classRes)) return classRes
+    let formatted=[]
+    classRes.map(classes => {
+        let newFormatted={}
+        for(var item in classes) {
+            if(item === "@id") {
+                let variableID=classes["@id"]
+                let splitWords = classes[item].split(":")
+                if(splitWords.length > 1) { // prefix included in class name
+                    variableID=splitWords[1]
+                }
+                newFormatted["@id"]=variableID
+            }
+            else newFormatted[item]=classes[item]
+        }
+        formatted.push(newFormatted)
+    })
+    return formatted
+}
+

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

@@ -4,7 +4,6 @@ import {executeQueryHook} from "./executeQueryHook"
 //import {getDocumentClasses, getDocumentsOfType} from "../queries/GeneralQueries"
 import {SCHEMA_GRAPH_TYPE, TERMINUS_SUCCESS, TERMINUS_DANGER, CREATE_DOCUMENT, EDIT_DOCUMENT,VIEW_DOCUMENT, GET_FRAMES_DOCUMENT, FORM_VIEW} from "../components/constants"
 import {Alerts} from "../components/Alerts"
-import { getTotalNumberOfDocuments } from "../queries/GeneralQueries"
 import {Loading} from "../components/Loading"
 import {PROGRESS_BAR_COMPONENT} from "../components/constants"
 //import {pendoMsgAfterCreateDocument} from "../trackWithPendo"

packages/tdb-dashboard/src/hooks/DocumentControl.js

@@ -9,31 +9,24 @@ import {addNewDocument, updateDocument, getDocumentFrame, getCurrentDocumentInfo
 export const DocumentControlProvider = ({children}) => {
     const {
         woqlClient,
-       // setSelectedDocument,
         selectedDocument,
         accessControlDashboard
     } = WOQLClientObj()
 
+
     // access control constants based on access control priviliges
     const [actionControl, setActionControl]=useState({})
 
-    //let tempControl={  read: true, write: true } // admin
-    //let tempControl={  read: true, write: false } // Data reader
-    //let tempControl={  read: false, write: false } // info reader
-
-
     useState(() => {
         if(accessControlDashboard) { 
             let control={
                 read: false,
                 write: false
             }
             if(accessControlDashboard.instanceRead()) {
-            //if(tempControl.read) {
                 control.read=true
             }
             if(accessControlDashboard.instanceWrite()) {
-            //if(tempControl.write) {
                 control.write=true
             }
             setActionControl(control)
@@ -137,6 +130,7 @@ export const DocumentControlProvider = ({children}) => {
         }
     }, [originalFrames])
 
+
     return (
         <DocumentControlContext.Provider
             value={{