reverting back diff patch fix & fixing some css for diffs

Author: KittyJose

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

@@ -14,6 +14,7 @@ import {BsPlus} from "react-icons/bs"
 import {BiMinusCircle} from "react-icons/bi"
 import {Loading} from "./Loading"
 import {WOQLClientObj} from '../init-woql-client'
+import { getTypenameFromStoreObject } from "@apollo/client/cache/inmemory/helpers"
 /**
  * 
  * @param {*} diff diff list 
@@ -111,9 +112,10 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
     const { woqlClient } = WOQLClientObj()
 
     const {getDocumentByBranches, 
-        error,
-        originalValue,  
-        changedValue} = useDiff() 
+        error, 
+        originalValue,
+        changedValue,  
+        setChangedValue} = useDiff() 
 
     const [clicked, setClicked]=useState(false)
 
@@ -132,6 +134,17 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
     function handleTraverse (documentID) {
         onTraverse(documentID, setClicked)
     }
+ 
+    /*useEffect(() => {
+        async function getChangedValue() {
+            const clientCopy = woqlClient.copy()
+            // apply patch on original value to get changed value 
+            // to get Sets in same order as that of original value
+            let changedValueResult=await clientCopy.patch(originalValue, diffObj)
+            if(setChangedValue) setChangedValue(changedValueResult)
+        }
+        if(diffObj && originalValue && woqlClient) getChangedValue()
+    }, [diffObj, originalValue, woqlClient])*/
 
    return <Accordion className="accordion__button padding-0 diff__accordian mb-3" id={eventKey} onSelect={getDocumentStatesOnClick}> 
         <Accordion.Item eventKey={eventKey} className="border-0">
@@ -163,8 +176,8 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
                 onHide={() => setClicked(false)}/>} 
            {originalValue && changedValue && 
                <DiffViewer 
-                   oldValue={originalValue} 
-                   newValue={changedValue}
+                   oldValue={originalValue}  //original
+                   newValue={changedValue}  // changed 
                    oldValueHeader={<OriginHeader branch="main"/>}
                    newValueHeader={<TrackingHeader branch={CRObject.name}/>}
                    frame={frames}

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

@@ -40,6 +40,13 @@ export function useDiff(){
                     }
                     originalValueResult = await clientCopy.getDocument({id: documentID})
                     break
+                /*default: 
+                    if(CRObject.status === "Merged"){
+                        clientCopy.ref(CRObject.merge_commit_id) 
+                    }else {
+                        clientCopy.checkout(CRObject.original_branch) 
+                    } 
+                    originalValueResult = await clientCopy.getDocument({id: documentID})*/
                 default :
                     clientCopy.checkout(CRObject.tracking_branch) 
                     changedValueResult = await clientCopy.getDocument({id: documentID})
@@ -115,6 +122,7 @@ export function useDiff(){
             getDocumentById,
             loading,
             error,
+            setChangedValue,
             originalValue,
             changedValue}
 }

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

@@ -154,7 +154,7 @@ label.latlng-control-label {
 
 /** diff classNames */
 .tdb__diff__original {
-  color: var(--danger-color);
+  color: var(--danger-color) !important;
   background-color: var(--danger-bg);
   border: 1px solid var(--danger-border-color);
 } 
@@ -181,7 +181,7 @@ label.latlng-control-label {
 }
 
 .tdb__diff__changed {
-  color: var(--success-color);
+  color: var(--success-color) !important;
   background-color: var(--success-bg);
   border: 1px solid var(--success-border-color);
 } 

packages/tdb-documents-ui/webpack.config.js

@@ -41,7 +41,7 @@ module.exports = {
                 include: path.resolve(__dirname, "src"),
                 exclude: /node_modules/,
             },
-            {
+            { 
               test: /\.(css)$/,
               use: [
                 MiniCssExtractPlugin.loader,