Skip to content

Commit

Permalink
Merge pull request #224 from CSCfi/develop
Browse files Browse the repository at this point in the history 
Deploying Feature adding more context to mapping
  • Loading branch information
@rquazi
rquazi authored Oct 23, 2024
2 parents 6947487 + ce6cb78 commit 6faafcf
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 42 deletions.
30 changes: 29 additions & 1 deletion mscr-ui/src/modules/crosswalk-editor/index.tsx
View file
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
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

0 comments on commit 6faafcf

Please sign in to comment.