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

Deploying Feature adding more context to mapping #224

Merged
merged 5 commits into from
Oct 23, 2024
Merged

Deploying Feature adding more context to mapping #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
511d914
CSCFC4EMSCR-562 Add more context to Mapping source/target fields: Sho…
masillan Oct 17, 2024
90933e7
CSCFC4EMSCR-562 added handling for SHACL and RDFS and maybe OWL by sh…
masillan Oct 22, 2024
a9f747a
CSCFC4EMSCR-562 changed mapping to show two last items in the path wh…
masillan Oct 22, 2024
2a69fff
CSCFC4EMSCR-562 fix for SHACL, small outlook fix and removing debug p…
masillan Oct 23, 2024
ce6cb78
Merge pull request #221 from CSCfi/CSCFC4EMSCR-562
rquazi Oct 23, 2024
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
30 changes: 29 additions & 1 deletion mscr-ui/src/modules/crosswalk-editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ import { useSelector } from 'react-redux';
import { selectIsEditContentActive } from '@app/common/components/content-view/content-view.slice';
import { State } from '@app/common/interfaces/state.interface';
import Tooltip from '@mui/material/Tooltip';
import {useGetFrontendSchemaQuery, useGetSchemaQuery} from "@app/common/components/schema/schema.slice";
import {SchemaWithContent} from "@app/common/interfaces/schema.interface";
import {Format} from "@app/common/interfaces/format.interface";

export default function CrosswalkEditor({
crosswalkId,
Expand Down Expand Up @@ -77,7 +80,7 @@ export default function CrosswalkEditor({
const [lastPatchMappingReqId, setLastPatchMappingReqId] =
useState<string>('');
const [lastDeleteMappingPid, setLastDeleteMappingPid] = useState<string>('');
const [showAttributeNames, setShowAttributeNames] = useState(true);
const [showAttributeNames, setShowAttributeNames] = useState(false);
const [sourceTreeSelection, setSourceTreeSelection] = useState<string[]>([]);
const [targetTreeSelection, setTargetTreeSelection] = useState<string[]>([]);
const [isOneToManyMapping, setIsOneToManyMapping] = useState<boolean>(false);
Expand Down Expand Up @@ -140,6 +143,22 @@ export default function CrosswalkEditor({
// refetch: refetchMappings,
} = useGetMappingsQuery(crosswalkId);

let sourceSchemaFormat: Format | undefined, targetSchemaFormat: Format | undefined;
let sourceSchemaData: SchemaWithContent | undefined, targetSchemaData: SchemaWithContent | undefined;
if (crosswalkData?.sourceSchema) {
const sourceSchema = getSchema(crosswalkData.sourceSchema);
const { data: getSchemaData, isSuccess: getSchemaDataIsSuccess } =
useGetFrontendSchemaQuery(crosswalkData.sourceSchema);
sourceSchemaFormat = sourceSchema?.format;
sourceSchemaData = getSchemaData;
}
if (crosswalkData?.targetSchema) {
const targetSchema = getSchema(crosswalkData.targetSchema);
const { data: getSchemaData, isSuccess: getSchemaDataIsSuccess } =
useGetFrontendSchemaQuery(crosswalkData.targetSchema);
targetSchemaFormat = targetSchema?.format;
targetSchemaData = getSchemaData;
}
useEffect(() => {
if (mappingsFromBackend) {
const nodeMappings = mappingsFromBackend as NodeMapping[];
Expand Down Expand Up @@ -179,6 +198,13 @@ export default function CrosswalkEditor({
}
}

function getSchema(schemaPid: string) {
const {data: schemaData} = useGetSchemaQuery(
schemaPid ?? '',
);
return schemaData;
}

function addMappingToAccordion(response: any, isPutOperation: boolean) {
if (mappingToBeEdited) {
mappingToBeEdited[0].id = response.data.pid;
Expand Down Expand Up @@ -544,6 +570,8 @@ export default function CrosswalkEditor({
showAttributeNames={showAttributeNames}
mappingFunctions={mappingFunctions}
performAccordionAction={performCallbackFromAccordionAction}
schemaFormats={{sourceSchemaFormat: sourceSchemaFormat, targetSchemaFormat: targetSchemaFormat}}
schemaDatas={{sourceSchemaData: sourceSchemaData, targetSchemaData: targetSchemaData}}
/>
</div>
</div>
Expand Down
165 changes: 124 additions & 41 deletions mscr-ui/src/modules/crosswalk-editor/mappings-accordion/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,44 @@
import * as React from 'react';
import {useEffect} from 'react';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import TableCell, {tableCellClasses} from '@mui/material/TableCell';
import LinkOffIcon from '@mui/icons-material/LinkOff';
import AddLinkIcon from '@mui/icons-material/AddLink';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import {
Button as Sbutton,
Tooltip as Stooltip,
DropdownItem,
Heading,
SearchInput,
Textarea,
TextInput
} from 'suomifi-ui-components';
import Button from '@mui/material/Button';
import ReportProblemIcon from '@mui/icons-material/ReportProblem';
import CheckIcon from '@mui/icons-material/Check';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import TableCell from '@mui/material/TableCell';
import {Button as Sbutton, SearchInput} from 'suomifi-ui-components';
import Tooltip from '@mui/material/Tooltip';

import {NodeMapping} from '@app/common/interfaces/crosswalk-connection.interface';
import {FunctionIcon, InfoIcon} from '@app/common/components/shared-icons';
import {useEffect} from 'react';
import {InfoIcon} from '@app/common/components/shared-icons';
import {useTranslation} from 'next-i18next';
import {
AccordionContainer,
EmptyBlock,
HorizontalLineStart,
HorizontalLineMidEnd,
HorizontalLineMidStart,
HorizontalLineStart,
HorizontalLineStartSecond,
HorizontalLineTarget,
IconCircle,
IconCircleMid,
IconLetterWrap,
HorizontalLineTargetEnd,
HorizontalLineTargetStart,
IconSpacer,
SearchWrapper,
StooltipContainer,
StyledArrowRightIcon,
StyledButton,
StyledTableActionsCell,
StyledTableButtonCell,
StyledTableCell,
StyledTableTargetCell,
StyledTableActionsCell,
StyledTableRow,
StyledTableTargetCell,
TableCellPadder,
VerticalLine, HorizontalLineTargetStart, HorizontalLineTargetEnd, HorizontalLineStartSecond, AccordionContainer
VerticalLine
} from '@app/modules/crosswalk-editor/mappings-accordion/mappings-accordion.styles';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import styled from 'styled-components';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import FunctionTooltipBox from "@app/modules/crosswalk-editor/mappings-accordion/function-tooltip-box";
import ConfirmModal from "@app/common/components/confirmation-modal";
import {Format} from "@app/common/interfaces/format.interface";
import {SchemaWithContent} from "@app/common/interfaces/schema.interface";

export interface highlightOperation {
operationId: string;
Expand All @@ -75,6 +53,8 @@ function Row(props: {
showAttributeNames: boolean;
rowcount: number;
mappingFunctions: any;
schemaFormats: {sourceSchemaFormat: Format | undefined, targetSchemaFormat: Format | undefined};
schemaDatas: {sourceSchemaData: SchemaWithContent | undefined, targetSchemaData: SchemaWithContent | undefined};
}) {
const { t } = useTranslation('common');
const [open, setOpen] = React.useState(false);
Expand Down Expand Up @@ -113,12 +93,13 @@ function Row(props: {
<StyledButton
className="px-3 py-0"
style={{textTransform: 'none'}}
title={t('mappings-accordion.select-linked-nodes')}
title={props.showAttributeNames ? t('mappings-accordion.select-linked-nodes') : returnFullPath(mapping.id)}
onClick={(e) => {
selectFromTrees(props.row, mapping.id, true);
e.stopPropagation();
}}
>{props.showAttributeNames ? mapping.label : mapping.id}</StyledButton>
>{props.showAttributeNames ? mapping.label : returnPath(mapping.id, mapping.label,
props.schemaFormats?.sourceSchemaFormat, props.schemaDatas?.sourceSchemaData)}</StyledButton>

<HorizontalLineStart>
<div></div>
Expand Down Expand Up @@ -215,12 +196,13 @@ function Row(props: {
<StyledButton
className="px-3 py-0"
style={{textTransform: 'none'}}
title={t('mappings-accordion.select-linked-nodes')}
title={props.showAttributeNames ? t('mappings-accordion.select-linked-nodes') : returnFullPath(mapping.id)}
onClick={(e) => {
selectFromTrees(props.row, mapping.id, false);
e.stopPropagation();
}}
>{props.showAttributeNames ? mapping.label : mapping.id}</StyledButton>
>{props.showAttributeNames ? mapping.label : returnPath(mapping.id, mapping.label,
props.schemaFormats?.targetSchemaFormat, props.schemaDatas?.targetSchemaData)}</StyledButton>
</div>
</div>
</>)
Expand Down Expand Up @@ -340,6 +322,101 @@ function Row(props: {
);
}

function extractPath(strings: string[]): string {
let returnString = "";
for (let i = 0; i < strings.length; i++) {
if (strings.length === i - 1) {
returnString = returnString + "/" + strings[i];
} else {
let separator = "/";
if (i === 0) {
separator = ""
}
if (i === strings.length - 2 || i === strings.length - 3 && strings.length > 3) {
separator = "/ ";
}
if (i % 2 === 0) {
returnString = returnString + separator + strings[i];
}
}
}
return returnString;
}

function returnFullPath(id: string) : string {
let returnString = id.substring(id?.indexOf("#root-Root-") + "#root-Root-".length);
let strings;
if (returnString) {
strings = returnString.split("-");
returnString = "";
if (strings.length > 1) {
returnString = extractPath(strings);
} else {
returnString = strings[0];
}
}
return returnString;
}

function returnPath(id: string, label: string, schemaFormat: Format | undefined, schemaData: SchemaWithContent | undefined) : string {
let returnString = '';
if (schemaFormat === Format.Xsd || schemaFormat === Format.Csv || schemaFormat === Format.Jsonschema || schemaFormat === Format.Skosrdf
|| schemaFormat === Format.Enum || schemaFormat === Format.Mscr) {
returnString = id.substring(id?.indexOf("#root-Root-") + "#root-Root-".length);
let strings;
if (returnString) {
strings = returnString.split("-");
returnString = "";
if (strings.length > 7) {
returnString = strings[0] + "/{" + (strings.length - 5) / 2 + "}/" + strings[strings.length - 2] + "/ " + strings[strings.length - 1];
} else if (strings.length > 1) {
returnString = extractPath(strings);
} else {
returnString = strings[0];
}
}
return returnString;
} else {
let className = '';
if (schemaFormat === Format.Rdfs || schemaFormat === Format.Owl) {
if (id.lastIndexOf('#') === -1) {
returnString = id.substring(id.lastIndexOf('/') + 1);
} else {
className = id.substring(id?.lastIndexOf('/') + 1, label.lastIndexOf('#')) + ':';
let itemName = id.substring(id.lastIndexOf('#') + 1);
returnString = className + itemName;
}
} else if (schemaFormat === Format.Shacl) {
let definitions = schemaData?.content?.definitions;
if (definitions) {
let keys = Object.keys(definitions);
if (keys && keys.length > 0) {
for (let i = 0; i < keys.length; i++) {
let value = definitions[keys[i]];
let secondLevelKeys = Object.keys(value);
for (let k = 0; k < secondLevelKeys.length; k += 1) {
if (secondLevelKeys[k] === 'properties') {
let secondLevelValue = value[secondLevelKeys[k]];
let thirdLevelKeys = Object.keys(secondLevelValue);
for (let j = 0; j < thirdLevelKeys.length; j += 1) {
if (thirdLevelKeys[j] === id) {
for (let l = 0; l < secondLevelKeys.length; l += 1) {
if (secondLevelKeys[l] === 'title') {
let titleValue = value[secondLevelKeys[l]];
returnString = titleValue + ':' + label;
}
}
}
}
}
}
}
}
}
}
return returnString;
}
}
function filterMappings(nodeMappingsInput: NodeMapping[], value: string, showAttributeNames: boolean) {
let results: NodeMapping[] = [];
const searchString = value.toLowerCase();
Expand All @@ -365,10 +442,14 @@ function filterMappings(nodeMappingsInput: NodeMapping[], value: string, showAtt
export default function MappingsAccordion(props: any) {
const {t} = useTranslation('common');
const [mappingData, setMappingData] = React.useState<NodeMapping[]>([]);
const [showAttributeNames, setShowAttributeNames] = React.useState<boolean>(true);
const [showAttributeNames, setShowAttributeNames] = React.useState<boolean>(false);
const [schemaFormats, setSchemaFormats] = React.useState<{}>({sourceSchemaFormat: undefined, targetSchemaFormat: undefined});
const [schemaDatas, setSchemaDatas] = React.useState<{}>({sourceSchemaData: undefined, targetSchemaData: undefined});
useEffect(() => {
setMappingData(props.nodeMappings);
setShowAttributeNames(props.showAttributeNames);
setSchemaFormats(props.schemaFormats);
setSchemaDatas(props.schemaDatas);
}, [props]);
const nodeMappingsInput = props.nodeMappings;
return (
Expand Down Expand Up @@ -434,6 +515,8 @@ export default function MappingsAccordion(props: any) {
showAttributeNames={showAttributeNames}
rowcount={mappingData.length}
mappingFunctions={props.mappingFunctions}
schemaFormats={schemaFormats}
schemaDatas={schemaDatas}
/>
);
})}
Expand Down
Loading