Add diff viewer progress and fix packaging (#61)

* diff viewer progress

* added diff view files

* commiting diff view till tests

* added support for metadata & string to appear as textarea

* move terminusdb-react-table inside the dashboard

* added tests for choice sub documents and documents

* adding diff playground

* fix table

* review table

* fix advanced search document interface

* review table

* change id and label for document search

* review table

* fix diff view for subdoc document link

* fix table

* fix table in dashboard

* review table

* review packages

Co-authored-by: Kitty Jose <[email protected]>
Co-authored-by: Kitty Jose <[email protected]>
Co-authored-by: Francesca-Bit <[email protected]>

Author: 3 people

package-lock.json

@@ -2,9 +2,10 @@
   "name": "terminusdb-dashboard",
   "private": true,
   "workspaces": [
-    "./packages/tdb-react-components",
     "./packages/react-worker",
     "./packages/tdb-react-layout",
+    "./packages/tdb-react-table",
+    "./packages/tdb-react-components",
     "./packages/tdb-access-control-component",
     "./packages/tdb-documents-ui",
     "./packages/tdb-dashboard"

package.json

@@ -31,7 +31,6 @@ module.exports = {
     alias: {
       "@terminusdb/terminusdb-access-control-component": path.join(__dirname, '..', 'src/index.js'),
       "@terminusdb/terminusdb-client": path.resolve('../../../terminusdb-client/index.js'),
-      "@terminusdb/terminusdb-react-table": path.resolve('../../../terminusdb-react-table/src/index.js'),
       react: path.resolve('../../node_modules/react')
     },
     extensions: ['.js', '.jsx', '.json', '.css'],

packages/tdb-access-control-component/demo/webpack.config.js

@@ -52,6 +52,7 @@
     "dotenv": "^9.0.2",
     "dotenv-webpack": "^7.0.2",
     "file-loader": "^6.2.0",
+    "history": "^5.3.0",
     "moment": "^2.29.1",
     "papaparse": "^5.3.0",
     "postcss-loader": "^5.3.0",
@@ -98,7 +99,7 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.3",
-    "less-loader": "^11.0.0",
+    "less-loader": "^11.1.0",
     "mini-css-extract-plugin": "^2.6.1",
     "style-loader": "^3.3.1",
     "webpack": "^5.74.0",

packages/tdb-dashboard/package.json

@@ -945,3 +945,10 @@ pre.CodeMirror-line  > span > span.cm-string {
   }
 
 
+.table td{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+}
+

packages/tdb-dashboard/src/App.css

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react" 
 import {Routes,Route,useNavigate} from "react-router-dom"
 import {Loading} from "./components/Loading"
 import {SERVER_LOADING_MESSAGE} from "./components/constants"
@@ -53,7 +53,7 @@ export function App (props){
 }
 
 function getRoutes(clientUser,isAdmin){
-    if(localSettings.connection_type==="LOCAL"){
+    if(localSettings.connection_type==="LOCAL"){ 
     return <React.Fragment>
         <Route index element={<Home/>} />
             { clientUser.user === "admin" && <Route path="administrator" element={<UserManagement/>}/>}

packages/tdb-dashboard/src/App.js

@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from "react"
 import SplitPane from 'react-split-pane'
 import {handleWidthChange} from "../pages/utils"
-import {WOQLTable, WOQLGraph} from '@terminusdb-live/tdb-react-components'
+import { WOQLGraph} from '@terminusdb-live/tdb-react-components'
+//import {WOQLTable} from '@terminusdb/terminusdb-react-table'
 import {ControlledQueryHook} from '@terminusdb-live/tdb-react-components'
 import {ClassFromSchema} from "../queries/GeneralQueries"
 import {getPropertyMetaTabConfig, getClassesGraphConfig} from "./ViewConfig"

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

@@ -1,8 +1,7 @@
 import React, {useState, useEffect} from "react"
 import {getBranchCommits} from "../queries/BranchQueries"
 import {getCommitsTabConfig, getCommitViewTabConfig} from "./ViewConfig"
-import {WOQLTable} from '@terminusdb-live/tdb-react-components'
-import {ControlledQueryHook} from '@terminusdb-live/tdb-react-components'
+import {WOQLTable,ControlledQueryHook} from '@terminusdb/terminusdb-react-table'
 import {getRemovedTriplesQuery, getAddedTriplesQuery} from "../queries/BranchQueries"
 import {Row, Button, Toast} from "react-bootstrap"
 import {getUsing, printts, copyToClipboard} from "./utils"

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

@@ -10,7 +10,6 @@ import {BiPlus} from "react-icons/bi"
 import {SearchBox} from "./SearchBox"
 import {getCountOfDocumentClass} from "../queries/GeneralQueries"
 import { executeQueryHook } from "../hooks/executeQueryHook"
-import {CREATE_DOCUMENT, FORM_VIEW} from "./constants"
 import {handleCreate} from "./documents.utils"
 import {DocumentControlObj, getDocumentFrame} from '../hooks/DocumentControlContext'
 import {Loading} from "./Loading"

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

@@ -32,7 +32,6 @@ export const DocumentFrames = () => {
     }
     const {
         frames,
-        docs,
         woqlClient
     } = WOQLClientObj()
 
@@ -57,7 +56,7 @@ export const DocumentFrames = () => {
     }
 
     useEffect(() =>{
-        if(documentObject.frames) {
+        if(Object.keys(documentObject.frames).length > 0) {
             setLoading(false)
             //documentObject.loading = <Loading message={`Fetching frames ...`} type={PROGRESS_BAR_COMPONENT}/>
         }
@@ -188,10 +187,16 @@ export const DocumentFrames = () => {
                         {/*(currentView==FORM_VIEW) && documentObjectWithFrames.frames && <FrameViewer/> */}
 
                         {(currentView==FORM_VIEW) && documentObjectWithFrames.frames &&
+                            /*<FrameViewer frame={frames}
+                                type={documentObjectWithFrames.type}
+                                mode={documentObjectWithFrames.action}
+                                onSubmit={onSubmit}
+                                onSelect={onSelect}
+                                formData={documentObjectWithFrames.filledFrame}
+                            />*/
                             <FrameViewer frame={frames}
                                 type={documentObjectWithFrames.type}
                                 mode={documentObjectWithFrames.action}
-                                documents={docs}
                                 onSubmit={onSubmit}
                                 onSelect={onSelect}
                                 formData={documentObjectWithFrames.filledFrame}