Merge pull request #379 from meaningfy-ws/feature/MWB-956

feature/MWB-956
meaningfy-ws · Jan 23, 2025 · e0d5e82 · e0d5e82
2 parents a68ba02 + bcf1f7a
commit e0d5e82
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 65 deletions.
diff --git a/mapping_workbench/frontend/package.json b/mapping_workbench/frontend/package.json
@@ -87,6 +87,7 @@
     "react": "18.2.0",
     "react-apexcharts": "1.4.0",
     "react-beautiful-dnd": "13.1.1",
+    "react-codemirror-merge": "^4.23.7",
     "react-dom": "18.2.0",
     "react-draft-wysiwyg": "1.15.0",
     "react-dropzone": "14.2.3",

diff --git a/mapping_workbench/frontend/src/api/file-collections/file-resources/index.js b/mapping_workbench/frontend/src/api/file-collections/file-resources/index.js
@@ -1,5 +1,6 @@
 import {SectionApi} from "src/api/section";
 import {appApi} from "src/api/app";
+import {sessionApi} from '../../session';
 
 export class FileResourcesApi extends SectionApi {
     get FILE_RESOURCE_FORMATS() {
@@ -33,8 +34,17 @@ export class FileResourcesApi extends SectionApi {
     }
 
     async getFileResource(id) {
-        let endpoint = this.paths['file_resource'].replace(':id', id);
-        let data = await appApi.get(endpoint);
+        const endpoint = this.paths['file_resource'].replace(':id', id);
+        const data = await appApi.get(endpoint);
+        return Promise.resolve(data);
+    }
+// http://localhost:8000/api/v1/test_data_suites/file_resources/678f5c9d607a7f61f94c11c5/transform/history?project=678f5b8d6f271a8aa40e9633
+
+    async getFileHistory(id) {
+        const filters = {};
+        filters['project'] = sessionApi.getSessionProject();
+        const endpoint = this.paths['file_history'].replace(':id', id);
+        const data = await appApi.get(endpoint, filters);
         return Promise.resolve(data);
     }
 }

diff --git a/mapping_workbench/frontend/src/components/app/form/codeMirrorDefault.js b/mapping_workbench/frontend/src/components/app/form/codeMirrorDefault.js
@@ -1,4 +1,4 @@
-import CodeMirror from "@uiw/react-codemirror";
+import CodeMirror, {EditorState, EditorView} from "@uiw/react-codemirror";
 import {githubDark, githubLight} from "@uiw/codemirror-themes-all";
 import {yaml} from '@codemirror/lang-yaml'
 import {xml} from '@codemirror/lang-xml'
@@ -8,10 +8,11 @@ import {turtle} from 'codemirror-lang-turtle';
 import {sparql} from 'codemirror-lang-sparql';
 
 
+import {Box} from "@mui/system";
 import {useTheme} from "@mui/material/styles";
 import FormLabel from "@mui/material/FormLabel";
 import FormControl from "@mui/material/FormControl";
-import {Box} from "@mui/system";
+import CodeMirrorMerge from 'react-codemirror-merge';
 
 
 const languageSwitch = (lang) => {
@@ -32,7 +33,39 @@ const languageSwitch = (lang) => {
     }
 }
 
-const CodeMirrorDefault = ({value, onChange, lang, label, disabled, style}) => {
+const Original = CodeMirrorMerge.Original;
+const Modified = CodeMirrorMerge.Modified;
+
+export const CodeMirrorCompare = ({value, previousValue, lang, label, style, name}) => {
+    const theme = useTheme()
+    return (
+        <FormControl fullWidth>
+            <FormLabel
+                sx={{
+                    color: 'text.primary',
+                    mb: 1,
+                }}
+                htmlFor={name}
+            >
+                {label}
+            </FormLabel>
+            <Box>
+                <CodeMirrorMerge orientation="b-a"
+                                 revertControls='b-to-a'
+                                 style={style}
+                                 theme={theme.palette.mode === 'dark' ? githubDark : githubLight}
+                >
+                    <Original value={value}
+                              extensions={[languageSwitch(lang)()]}/>
+                    <Modified value={previousValue}
+                              extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true), languageSwitch(lang)()]}/>
+                </CodeMirrorMerge>
+            </Box>
+        </FormControl>
+    )
+}
+
+const CodeMirrorDefault = ({value, onChange, lang, label, disabled, style, name}) => {
     const theme = useTheme();
 
     return (

diff --git a/...ing_workbench/frontend/src/pages/app/test-data-suites/[id]/resource-manager/[fid]/edit.js b/...ing_workbench/frontend/src/pages/app/test-data-suites/[id]/resource-manager/[fid]/edit.js
@@ -1,15 +1,17 @@
 import {useCallback, useEffect, useState} from "react";
-import {useFormik} from "formik";
 
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 import Chip from '@mui/material/Chip';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Paper from "@mui/material/Paper";
-import SvgIcon from '@mui/material/SvgIcon';
+import Button from '@mui/material/Button';
 import Divider from "@mui/material/Divider";
+import SvgIcon from '@mui/material/SvgIcon';
+import MenuItem from '@mui/material/MenuItem';
 import Checkbox from "@mui/material/Checkbox";
+import TextField from '@mui/material/TextField';
 import Grid from "@mui/material/Unstable_Grid2";
 import Typography from '@mui/material/Typography';
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -22,11 +24,13 @@ import {Layout as AppLayout} from 'src/layouts/app';
 import {RouterLink} from 'src/components/router-link';
 import {FormTextField} from "src/components/app/form/text-field";
 import {ForItemEditForm} from "src/contexts/app/section/for-item-form";
-import CodeMirrorDefault from "src/components/app/form/codeMirrorDefault";
+import CodeMirrorDefault, {CodeMirrorCompare} from "src/components/app/form/codeMirrorDefault";
 import {ForItemDataState} from "src/contexts/app/section/for-item-data-state";
 import {FileResourceEditForm} from 'src/sections/app/file-manager/file-resource-edit-form';
 import {testDataFileResourcesApi as sectionApi} from 'src/api/test-data-suites/file-resources';
 import {MappingPackageFormSelect} from 'src/sections/app/mapping-package/components/mapping-package-form-select';
+import {useGlobalState} from '../../../../../../hooks/use-global-state';
+import timeTransformer from '../../../../../../utils/time-transformer';
 
 
 const useItem = (sectionApi, id) => {
@@ -51,13 +55,22 @@ const useItem = (sectionApi, id) => {
 const ExtraForm = (props) => {
     const {
         item,
-        formik
+        formik,
+        compare_items,
     } = props;
 
+    const {timeSetting} = useGlobalState()
+
+    const [showCompare, setShowCompare] = useState(false)
+
+    const handleCompareChange = e => {
+        formik.setFieldValue('compare_item', e.target.value)
+    }
     const handleTransformTestDataChange = useCallback((event) => {
         formik.setFieldValue('transform_test_data', event.target.checked);
     }, [formik]);
 
+
     return (
         <Stack gap={3}>
             <Grid xs={12}
@@ -101,28 +114,75 @@ const ExtraForm = (props) => {
             </Grid>
             <Grid xs={12}
                   md={12}>
-                <CodeMirrorDefault label="RDF Manifestation"
-                                   style={{resize: 'vertical', overflow: 'auto', height: 600}}
-                                   value={formik.values.rdf_manifestation}
-                                   onChange={value => formik.setValues('rdf_manifestation', value)}
-                                   lang={'TTL'}
-                />
+                <Stack direction='row'
+                       alignItems='center'
+                       gap={2}>
+                    {compare_items.length && <Button sx={{my: 1}}
+                                                     onClick={() => setShowCompare(e => !e)}>{showCompare ? 'Hide Compare' : 'Show Compare'}</Button>}
+
+
+                    {showCompare && <TextField
+                        label="Process Date"
+                        name="compare_item"
+                        onBlur={formik.handleBlur}
+                        onChange={handleCompareChange}
+                        select
+                        value={formik.values.compare_item}
+                    >
+                        {compare_items.map((compare_item) => (
+                            <MenuItem
+                                key={compare_item.id}
+                                value={compare_item}
+                            >
+                                {timeTransformer(compare_item.created_at, timeSetting)}
+                            </MenuItem>
+                        ))}
+                    </TextField>}
+                </Stack>
+
+                {showCompare ?
+                    <CodeMirrorCompare label="RDF Manifestation"
+                                       style={{resize: 'vertical', overflow: 'auto', height: 600}}
+                                       value={formik.values.rdf_manifestation}
+                                       previousValue={formik.values.compare_item?.out_manifestation}
+                                       onChange={value => formik.setValues('rdf_manifestation', value)}
+                                       lang='TTL'
+                    /> :
+                    <CodeMirrorDefault label="RDF Manifestation"
+                                       style={{resize: 'vertical', overflow: 'auto', height: 600}}
+                                       value={formik.values.rdf_manifestation}
+                                       onChange={value => formik.setValues('rdf_manifestation', value)}
+                                       lang='TTL'
+                    />}
             </Grid>
         </Stack>
     )
 }
 
+const useFileHistory = (sectionApi, id) => {
+    const [compareItems, setCompareItems] = useState([])
+
+    useEffect(() => {
+        id && handleItemHistoryGet(id)
+    }, [id])
+
+    const handleItemHistoryGet = () => {
+        sectionApi.getFileHistory(id)
+            .then(res => setCompareItems(res))
+            .catch(err => console.error(err))
+    }
+
+    return compareItems
+}
+
 const Page = () => {
     const router = useRouter();
     const {id, fid} = router.query;
 
     const formState = useItem(sectionApi, fid);
+    const compare_items = useFileHistory(sectionApi, fid)
     const item = formState.item;
 
-    const formik = useFormik({
-        initialValues: {"rdf_manifestation": item && item.rdf_manifestation}
-    });
-
     usePageView();
 
     if (!item) {
@@ -133,7 +193,8 @@ const Page = () => {
         identifier: item.identifier || '',
         rdf_manifestation: item.rdf_manifestation || '',
         transform_test_data: false,
-        mapping_package_id: null
+        mapping_package_id: null,
+        compare_items: compare_items
     }
 
     return (

diff --git a/mapping_workbench/frontend/src/paths.js b/mapping_workbench/frontend/src/paths.js
@@ -256,6 +256,7 @@ export const apiPaths = {
         item: '/test_data_suites/:id',
         file_resources: '/test_data_suites/:id/file_resources',
         file_resource: '/test_data_suites/file_resources/:id',
+        file_history: '/test_data_suites/file_resources/:id/transform/history',
         assign_mapping_packages: '/test_data_suites/assign_mapping_packages',
         tasks: {
             transform_test_data: '/test_data_suites/tasks/transform_test_data',

diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-resource-edit-form.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-resource-edit-form.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import {useState} from 'react';
 import * as Yup from 'yup';
 import {useFormik} from 'formik';
 
@@ -18,12 +19,14 @@ import {useRouter} from 'src/hooks/use-router';
 import {RouterLink} from 'src/components/router-link';
 import {FormTextArea} from "src/components/app/form/text-area";
 import {FormTextField} from "src/components/app/form/text-field";
-import {FormCodeTextArea} from "src/components/app/form/code-text-area";
 import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
-import CodeMirrorDefault from "../../../components/app/form/codeMirrorDefault";
+import CodeMirrorDefault, {CodeMirrorCompare} from "src/components/app/form/codeMirrorDefault";
+import {useGlobalState} from '../../../hooks/use-global-state';
+import timeTransformer from '../../../utils/time-transformer';
 
 export const FileResourceEditForm = (props) => {
     const router = useRouter();
+    const [showCompare, setShowCompare] = useState(false)
 
     const {
         itemctx, collection_id,
@@ -46,8 +49,9 @@ export const FileResourceEditForm = (props) => {
             filename: data.filename || '',
             format: data.format || sectionApi.FILE_RESOURCE_DEFAULT_FORMAT || '',
             content: data.content || '',
-            file: null
-        }, extra_form_fields)
+            file: null,
+            compare_item: extra_form_fields.compare_items?.[0]
+        }, extra_form_fields,)
     }
 
     const initialValues = initFormValues(item);
@@ -113,6 +117,12 @@ export const FileResourceEditForm = (props) => {
         formik.values.file = e.target.files[0];
     }
 
+    const handleCompareChange = e => {
+        formik.setFieldValue('compare_item', e.target.value)
+    }
+
+    const {timeSetting} = useGlobalState()
+
     return (
         <form encType="multipart/form-data"
               onSubmit={formik.handleSubmit}
@@ -201,12 +211,43 @@ export const FileResourceEditForm = (props) => {
                         </Grid>
                         <Grid xs={12}
                               md={12}>
-                            <CodeMirrorDefault
-                                value={formik.values.content}
-                                label='Content'
-                                lang={formik.values.format}
-                                style={{resize: 'vertical', overflow: 'auto', height: 600}}
-                                onChange={value => formik.setFieldValue('content', value)}/>
+                            <Stack direction='row'
+                                   gap={2}>
+                                {extra_form_fields?.compare_items.length && <Button
+                                    onClick={() => setShowCompare(e => !e)}>{showCompare ? 'Hide compare' : 'Show compare'}</Button>}
+
+                                {showCompare && <TextField
+                                    label="Process Date"
+                                    name="compare_item"
+                                    onBlur={formik.handleBlur}
+                                    onChange={handleCompareChange}
+                                    select
+                                    value={formik.values.compare_item}
+                                >
+                                    {extra_form_fields?.compare_items.map((compare_item) => (
+                                        <MenuItem
+                                            key={compare_item.id}
+                                            value={compare_item}
+                                        >
+                                            {timeTransformer(compare_item.created_at,timeSetting)}
+                                        </MenuItem>
+                                    ))}
+                                </TextField>}
+                            </Stack>
+                            {showCompare ?
+                                <CodeMirrorCompare label='Content'
+                                                   style={{resize: 'vertical', overflow: 'auto', height: 600}}
+                                                   value={formik.values.content}
+                                                   previousValue={formik.values.compare_item?.in_manifestation}
+                                                   onChange={value => formik.setValues('rdf_manifestation', value)}
+                                                   lang={formik.values.format}
+                                /> :
+                                <CodeMirrorDefault
+                                    value={formik.values.content}
+                                    label='Content'
+                                    lang={formik.values.format}
+                                    style={{resize: 'vertical', overflow: 'auto', height: 600}}
+                                    onChange={value => formik.setFieldValue('content', value)}/>}
                         </Grid>
                         <Grid xs={12}
                               md={12}>
@@ -222,13 +263,15 @@ export const FileResourceEditForm = (props) => {
                 </CardContent>
             </Card>
 
-            {extra_form && (
-                <Card sx={{mt: 3}}>
-                    <CardContent>
-                        {extra_form({item: item, formik: formik})}
-                    </CardContent>
-                </Card>
-            )}
+            {
+                extra_form && (
+                    <Card sx={{mt: 3}}>
+                        <CardContent>
+                            {extra_form({item, formik, compare_items: extra_form_fields.compare_items})}
+                        </CardContent>
+                    </Card>
+                )
+            }
             <Card sx={{mt: 3}}>
                 <Stack
                     direction={{
@@ -270,7 +313,8 @@ export const FileResourceEditForm = (props) => {
                 </Stack>
             </Card>
         </form>
-    );
+    )
+        ;
 };
 
 FileResourceEditForm.propTypes = {