Skip to content

Commit

Permalink
MWB-888: make arrow work for source and target
Browse files Browse the repository at this point in the history
  • Loading branch information
@SilverBerserk
SilverBerserk committed Dec 6, 2024
1 parent 0325147 commit 3af0070
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 221 deletions.
67 changes: 40 additions & 27 deletions mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import Typography from '@mui/material/Typography';
import PropTypes from 'prop-types';
import Menu01Icon from '@untitled-ui/icons-react/build/esm/Menu01';
import { alpha } from '@mui/system/colorManipulator';
import {alpha} from '@mui/system/colorManipulator';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import SvgIcon from '@mui/material/SvgIcon';
import useMediaQuery from '@mui/material/useMediaQuery';
import {ArrowButtons} from '../../../sections/components/arrow-buttons/arrow-buttons';

import { AccountButton } from '../account-button';
import { LanguageSwitch } from '../language-switch';
import {AccountButton} from '../account-button';
import {LanguageSwitch} from '../language-switch';
import TimeSwitch from "../time-switch/time-switch";

const BREAK_POINT = 1500;
const TOP_NAV_HEIGHT = 64;
const SIDE_NAV_WIDTH = 280;

export const TopNav = (props) => {
const { onMobileNavOpen, ...other } = props;
const {onMobileNavOpen, ...other} = props;
const breakPointUp = useMediaQuery((theme) => theme.breakpoints.up(BREAK_POINT));

return (
Expand All @@ -37,41 +39,52 @@ export const TopNav = (props) => {
zIndex: (theme) => theme.zIndex.appBar
}}
{...other}>
<Stack
alignItems="center"
direction="row"
justifyContent="space-between"
spacing={2}
sx={{
minHeight: TOP_NAV_HEIGHT,
px: 2
}}
>
<Stack direction='column'>
<Stack
alignItems="center"
direction="row"
// justifyContent="space-between"
spacing={2}
sx={{
minHeight: TOP_NAV_HEIGHT,
p: 2,
}}
>
{!breakPointUp && (
<Stack
alignItems="center"
direction="row"
spacing={2}
>
<IconButton
id='open_sidebar'
onClick={onMobileNavOpen}>
<SvgIcon>
<Menu01Icon />
</SvgIcon>
<Menu01Icon/>
</IconButton>
)}
</Stack>
<Stack direction='row'
width='100%'
alignItems='center'
justifyContent='space-between'>
<Typography variant="h5"
marginLeft={5}>
Mapping Process
</Typography>
<Stack
alignItems="center"
direction="row"
spacing={2}
>
<TimeSwitch/>
<LanguageSwitch/>
<AccountButton/>
</Stack>
</Stack>
</Stack>
<Stack
alignItems="center"
direction="row"
spacing={2}
>
<TimeSwitch/>
<LanguageSwitch />
<AccountButton />
<Stack alignItems="center">
<ArrowButtons/>
</Stack>
</Stack>

</Box>
);
};
Expand Down
41 changes: 0 additions & 41 deletions mapping_workbench/frontend/src/pages/app/ontology-files/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,47 +102,6 @@ const Page = () => {
<Grid container
spacing={{xs: 3, lg: 4}}
>
<Grid xs={12}
direction="row"
justifyContent="space-between"
spacing={4}
>
<Typography variant="h5">
Mapping Process
</Typography>
</Grid>
<Grid xs={12}>
<Stack justifyContent='center'
direction='row'>
<ArrowButtonGroup>
<ArrowButton active
icon={<ModeStandbyIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Source & Target
</ArrowButton>
<ArrowButton icon={<InsertDriveFileIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Elements Definition
</ArrowButton>
<ArrowButton icon={<LightbulbCircleIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Conceptual Mappings
</ArrowButton>
<ArrowButton icon={<DvrIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Technical Mappings
</ArrowButton>
<ArrowButton icon={<VerifiedIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Quality Control
</ArrowButton>
<ArrowButton icon={<ArchiveIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Export Mapping
</ArrowButton>
</ArrowButtonGroup>
</Stack>
</Grid>
<Grid xs={12}>
<Tabs value={'ontology_files'}
onChange={handleTabsChange}>
Expand Down
108 changes: 30 additions & 78 deletions mapping_workbench/frontend/src/pages/app/ontology-terms/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
import AddIcon from '@mui/icons-material/Add';
import DvrIcon from '@mui/icons-material/Dvr';
import SearchIcon from '@mui/icons-material/Search';
import ArchiveIcon from '@mui/icons-material/Archive';
import VerifiedIcon from '@mui/icons-material/Verified';
import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import LightbulbCircleIcon from '@mui/icons-material/LightbulbCircle';

import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Grid from "@mui/material/Unstable_Grid2";
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import SvgIcon from '@mui/material/SvgIcon';
import Typography from '@mui/material/Typography';

import {paths} from 'src/paths';
import {Seo} from 'src/components/seo';
Expand All @@ -26,9 +19,8 @@ import {ontologyTermsApi as sectionApi} from 'src/api/ontology-terms';
import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
import OntologyNamespaces from "src/sections/app/ontology-namespace/ontology-namespaces";
import OntologyNamespacesCustom from "src/sections/app/ontology-namespace-custom/ontology-namespaces-custom";
import {ArrowButton, ArrowButtonGroup} from '../../../sections/components/arrow-buttons/arrow-buttons';

const TABS = [{label: 'Source Files', value: 'source-files'}, {label: 'Ontology Files', value: 'ontology_files'},
const TABS = [{label: 'Source Files', value: 'test_data_suites'}, {label: 'Ontology Files', value: 'ontology_files'},
{label: 'Ontology Terms', value: 'ontology_terms'}, {label: 'Namespaces', value: 'namespaces'}]


Expand Down Expand Up @@ -62,77 +54,37 @@ const Page = () => {
justifyContent="space-between"
spacing={4}
>
<Stack
direction="row"
justifyContent="space-between"
spacing={4}

<Stack justifyContent='end'
alignItems="center"
direction="row"
spacing={3}
>
<Typography variant="h5">
Mapping Process
</Typography>
<Stack
alignItems="center"
direction="row"
spacing={3}
<Button
id="discover_button"
onClick={handleDiscover}
startIcon={(
<SvgIcon>
<SearchIcon/>
</SvgIcon>
)}
variant="text"
>
<Button
id="discover_button"
onClick={handleDiscover}
startIcon={(
<SvgIcon>
<SearchIcon/>
</SvgIcon>
)}
variant="contained"
>
Discover Terms
</Button>
<Button
id="add_term_button"
component={RouterLink}
href={paths.app[sectionApi.section].create}
startIcon={(
<SvgIcon>
<AddIcon/>
</SvgIcon>
)}
variant="contained"
>
Add Term
</Button>
</Stack>
</Stack>
</Grid>
<Grid xs={12}>
<Stack justifyContent='center'
direction='row'>
<ArrowButtonGroup>
<ArrowButton active
icon={<ModeStandbyIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Source & Target
</ArrowButton>
<ArrowButton icon={<InsertDriveFileIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Elements Definition
</ArrowButton>
<ArrowButton icon={<LightbulbCircleIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Conceptual Mappings
</ArrowButton>
<ArrowButton icon={<DvrIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Technical Mappings
</ArrowButton>
<ArrowButton icon={<VerifiedIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Quality Control
</ArrowButton>
<ArrowButton icon={<ArchiveIcon fontSize='small'
style={{marginRight: '4px'}}/>}>
Export Mapping
</ArrowButton>
</ArrowButtonGroup>
Discover Terms
</Button>
<Button
id="add_term_button"
component={RouterLink}
href={paths.app[sectionApi.section].create}
startIcon={(
<SvgIcon>
<AddIcon/>
</SvgIcon>
)}
variant="contained"
>
Add Term
</Button>
</Stack>
</Grid>
<Grid xs={12}>
Expand Down
Loading

0 comments on commit 3af0070

Please sign in to comment.