Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/MWB-956 #379

Merged
merged 3 commits into from
Jan 23, 2025
Merged

feature/MWB-956 #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efe5277
MWB-956: add compare codemirror module
SilverBerserk Jan 23, 2025
1240070
MWB-956: add compare button and select time switch
SilverBerserk Jan 23, 2025
bcf1f7a
MWB-956: change position for compare
SilverBerserk Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions mapping_workbench/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 12 additions & 2 deletions mapping_workbench/frontend/src/api/file-collections/file-resources/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down Expand Up @@ -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);
}
}
Expand Down
39 changes: 36 additions & 3 deletions mapping_workbench/frontend/src/components/app/form/codeMirrorDefault.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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) => {
Expand All @@ -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 (
Expand Down
91 changes: 76 additions & 15 deletions ...ing_workbench/frontend/src/pages/app/test-data-suites/[id]/resource-manager/[fid]/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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) => {
Expand All @@ -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}
Expand Down Expand Up @@ -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) {
Expand All @@ -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 (
Expand Down
1 change: 1 addition & 0 deletions mapping_workbench/frontend/src/paths.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
80 changes: 62 additions & 18 deletions mapping_workbench/frontend/src/sections/app/file-manager/file-resource-edit-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import PropTypes from 'prop-types';
import {useState} from 'react';
import * as Yup from 'yup';
import {useFormik} from 'formik';

Expand All @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}>
Expand All @@ -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={{
Expand Down Expand Up @@ -270,7 +313,8 @@ export const FileResourceEditForm = (props) => {
</Stack>
</Card>
</form>
);
)
;
};

FileResourceEditForm.propTypes = {
Expand Down
Loading
Loading