diff --git a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js index 127f74aa..f2faffa5 100644 --- a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js +++ b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js @@ -1,10 +1,10 @@ import {useEffect, useState} from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; + +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; -import Divider from "@mui/material/Divider"; +import Button from '@mui/material/Button'; import {Seo} from 'src/components/seo'; import {Layout as AppLayout} from 'src/layouts/app'; @@ -97,18 +97,17 @@ export const Page = () => { <> - - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]} placeholder='Search Terms'/> - + - - - + { > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - - + + - - - setDetailedView(e.target.checked)}/>} - label='Detailed View'/> - - - - + + setDetailedView(e.target.checked)}/>} + label='Detailed View'/> + + { justifyContent='space-between'> - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - - + + - - - + { justifyContent="space-between" spacing={4} > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - + { - - - + ) diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js index bfe22a16..1265a18e 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js @@ -3,6 +3,7 @@ import {Prism as SyntaxHighlighter} from "react-syntax-highlighter"; import PropTypes from 'prop-types'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Dialog from "@mui/material/Dialog"; import Button from "@mui/material/Button"; @@ -47,11 +48,7 @@ export const ListTableRow = (props) => { {item.source_structural_element_sdk_element_id} - + { size="small" color="error" onClick={() => setConfirmOpen(true)} - sx={{ - whiteSpace: "nowrap" - }} + sx={{whiteSpace: "nowrap"}} > Delete @@ -171,54 +166,56 @@ export const ListTable = (props) => { showFirstButton showLastButton > - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+ + + + + + + + + + + + + + + + + + + + + + + - - Actions - - - - - {items.map(item => )} - -
- + + Actions + + + + + {items.map(item => )} + + + + ); diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js index 54999d47..2ac309e3 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js @@ -7,7 +7,6 @@ import parse from "html-react-parser"; import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'; import EditIcon from '@untitled-ui/icons-react/build/esm/Edit05'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import CheckIcon from "@mui/icons-material/Check"; import CloseIcon from "@mui/icons-material/Close"; import InfoIcon from '@mui/icons-material/Info'; @@ -17,6 +16,7 @@ import Card from "@mui/material/Card"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; import Link from "@mui/material/Link"; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Stack from "@mui/material/Stack"; import Alert from "@mui/material/Alert"; @@ -36,7 +36,6 @@ import TableHead from '@mui/material/TableHead'; import TextField from "@mui/material/TextField"; import FormLabel from "@mui/material/FormLabel"; import CardHeader from "@mui/material/CardHeader"; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; import FormControl from "@mui/material/FormControl"; @@ -62,6 +61,7 @@ import {ListSelectorSelect as ResourceListSelector} from "src/components/app/lis import { MappingPackageCheckboxList } from 'src/sections/app/mapping-package/components/mapping-package-real-checkbox-list'; +import {ChevronButton} from '../../components/chevron-button'; import TableSorterHeader from '../../components/table-sorter-header'; @@ -724,14 +724,8 @@ export const ListTableRow = (props) => { }) }} > - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> {item.sort_order} { showFirstButton showLastButton > - - - - - - - - Conceptual Field/Group - - - Min XSD - - - Max XSD - - - Ontology Fragment Class path - - - Ontology Fragment Property path - - - RML Triple Map - - - Mapping Package - - - SPARQL assertions - - - Notes - - + +
+ + + + + + Conceptual Field/Group + + + Min XSD + + + Max XSD + + + Ontology Fragment Class path + + + Ontology Fragment Property path + + + RML Triple Map + + + Mapping Package + + + SPARQL assertions + + + Notes + + + Actions + + + + + {items.map(item => { + const item_id = item._id; + const isCurrent = item_id === currentItem; + const isHovered = item_id === hoveredItem; + + return ( + ) + })} + - Actions - - - - - {items.map(item => { - const item_id = item._id; - const isCurrent = item_id === currentItem; - const isHovered = item_id === hoveredItem; - - return ( - ) - })} - - - - - - - {notesDialog.data?.mapping_notes && <> - Mapping Notes: - {notesDialog.data.mapping_notes.map((mapping_note, i) => - )} - } - - {notesDialog.data?.editorial_notes && <> - Editorial Notes: - {notesDialog.data.editorial_notes.map((editorial_note, i) => - )} - } - - {notesDialog.data?.feedback_notes && <> - Feedback Notes: - {notesDialog.data.feedback_notes.map((feedback_note, i) => - - )} - } - - - - - -
- + + + + + + {notesDialog.data?.mapping_notes && <> + Mapping Notes: + {notesDialog.data.mapping_notes.map((mapping_note, i) => + )} + } + + {notesDialog.data?.editorial_notes && <> + Editorial Notes: + {notesDialog.data.editorial_notes.map((editorial_note, i) => + + )} + } + + {notesDialog.data?.feedback_notes && <> + Feedback Notes: + {notesDialog.data.feedback_notes.map((feedback_note, i) => + + )} + } + + + + + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js index dbb699fe..775abd8d 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js @@ -1,3 +1,4 @@ +import Paper from '@mui/material/Paper'; import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; @@ -34,6 +35,7 @@ import {FileUploader} from "src/sections/app/file-manager/file-uploader"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {ListFileCollectionActions} from "src/components/app/list/list-file-collection-actions"; import {MappingPackagesBulkAssigner} from "src/sections/app/mapping-package/components/mapping-packages-bulk-assigner"; +import {ChevronButton} from '../../components/chevron-button'; import TableSorterHeader from '../../components/table-sorter-header'; export const ListTableRow = (props) => { @@ -96,14 +98,8 @@ export const ListTableRow = (props) => { checked={isItemSelected(item_id)} onClick={event => handleItemSelect(event.target.checked, item_id)} /> - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -318,7 +314,6 @@ export const FileCollectionListTable = (props) => { onMappingPackagesAssign={onMappingPackagesAssign} /> - { showFirstButton showLastButton > - - - - - - handleItemsSelectAll(event.target.checked)} - /> - - - - Packages - - - - Actions - - - - - {items.map((item) => { - const item_id = item._id; - const isCurrent = item_id === currentItem; + + +
+ + + + handleItemsSelectAll(event.target.checked)} + /> + + + + Packages + + + + Actions + + + + + {items.map((item) => { + const item_id = item._id; + const isCurrent = item_id === currentItem; - return ( - - ) - })} - -
- + return ( + + ) + })} + + + + { @@ -170,7 +170,7 @@ export const ListTable = (props) => { return a }, {}) - return (
+ return ( { showFirstButton showLastButton > - - - - - - - - - - Packages - - - - - - Actions - - - - - {items.map(item => { - const item_id = item._id; - const isCurrent = item_id === currentItem; + + +
+ + + + + + + + Packages + + + + + + Actions + + + + + {items.map(item => { + const item_id = item._id; + const isCurrent = item_id === currentItem; - return ( - - + + + {item.triple_map_content && + handleItemToggle(item_id)} + isCurrent={isCurrent}/>} + + + + + {item.triple_map_uri} + + + setHoveredItem(item._id)} + onMouseLeave={() => setHoveredItem(null)}> + {projectMappingPackagesMap && } + + + {timeTransformer(item.created_at, timeSetting)} + + + + + + {isCurrent && ( + { width: 3, height: 'calc(100% + 1px)' } - }) - }} - width="25%" - > - {item.triple_map_content && - handleItemToggle(item_id)}> - - {} - - } - - - - - {item.triple_map_uri} - - - setHoveredItem(item._id)} - onMouseLeave={() => setHoveredItem(null)}> - {projectMappingPackagesMap && } - - - {timeTransformer(item.created_at, timeSetting)} - - - - - - {isCurrent && ( - - - - - Content: - + }} + > + + + + Content: + + - - - - )} - ); - })} - -
- + + + )} + ); + })} + + + + -
); + ); }; ListTable.propTypes = {