Skip to content

Commit

Permalink
MWB-12-35: updated loaded components
Browse files Browse the repository at this point in the history
  • Loading branch information
@SilverBerserk
SilverBerserk committed Feb 4, 2025
1 parent 0abfeee commit fa5db29
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 141 deletions.
3 changes: 1 addition & 2 deletions mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ export const Page = () => {
})
}, [])

if (!isProjectDataReady) return null;

const handleEdit = (item) => {
setState(e => ({...e, openDrawer: true, item}))
Expand Down Expand Up @@ -126,7 +125,7 @@ export const Page = () => {
</Button>
</Stack>
<TableLoadWrapper data={itemsStore.items}
dataState={itemsStore}>
dataState={{load: !isProjectDataReady || itemsStore.load}}>
<ListTable
onPageChange={itemsSearch.handlePageChange}
onRowsPerPageChange={itemsSearch.handleRowsPerPageChange}
Expand Down
2 changes: 1 addition & 1 deletion mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ import {Filter} from 'src/sections/components/filter';
import useItemsSearch from 'src/hooks/use-items-search';
import {useItemsStore} from 'src/hooks/use-items-store';
import {TableSearchBar} from 'src/sections/components/table-search-bar';
import {TableLoadWrapper} from 'src/sections/components/table-load-wrapper';
import {NavigationTabsWrapper} from 'src/components/navigation-tabs-wrapper';
import {toastError, toastLoad, toastSuccess} from 'src/components/app-toast';
import {ListTable} from "src/sections/app/conceptual-mapping-rule/list-table";
import {conceptualMappingRulesApi as sectionApi} from 'src/api/conceptual-mapping-rules';
import {ConceptualMappingTabs} from 'src/sections/app/conceptual-mapping-rule/conceptual-mapping-tabs';
import {MappingPackageFormSelect} from 'src/sections/app/mapping-package/components/mapping-package-form-select';
import {TableLoadWrapper} from '../../../../sections/components/table-load-wrapper';

const FILTER_VALUES = [{label: 'All', value: ''},
{label: 'Valid', value: 'valid'},
Expand Down
278 changes: 140 additions & 138 deletions mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,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 {TableLoadWrapper} from '../../components/table-load-wrapper';


export const ListTableTripleMapFragment = (props) => {
Expand Down Expand Up @@ -975,146 +976,147 @@ export const ListTable = (props) => {
)
}

if (!isProjectDataReady) return null;


return (
<TablePagination
component="div"
count={count}
onPageChange={onPageChange}
onRowsPerPageChange={onRowsPerPageChange}
page={page}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={sectionApi.DEFAULT_ROWS_PER_PAGE_SELECTION}
showFirstButton
showLastButton
>
<Paper>
<Stack direction='row'
padding={3}>
<FormControlLabel control={<Switch checked={detailedView}
onChange={e => setDetailedView(e.target.checked)}/>}
label='Detailed View'/>
</Stack>
<Scrollbar>
<Table sx={{minWidth: 1200}}>
<TableHead>
<TableRow>
<TableCell/>
<SorterHeader fieldName='sort_order'
title='CM Rule Order'/>
<TableCell width="10%">
Conceptual Field/Group
</TableCell>
<TableCell>
Min XSD
</TableCell>
<TableCell>
Max XSD
</TableCell>
<TableCell width="18%">
Ontology Fragment Class path
</TableCell>
<TableCell width="18%">
Ontology Fragment Property path
</TableCell>
<TableCell>
RML Triple Map
</TableCell>
<TableCell>
Mapping Package
</TableCell>
<TableCell>
SPARQL assertions
</TableCell>
<TableCell align="center"
title="Notes"
sx={{
whiteSpace: "nowrap"
}}
<TableLoadWrapper dataState={{load:!isProjectDataReady}}
data={items}>
<TablePagination
component="div"
count={count}
onPageChange={onPageChange}
onRowsPerPageChange={onRowsPerPageChange}
page={page}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={sectionApi.DEFAULT_ROWS_PER_PAGE_SELECTION}
showFirstButton
showLastButton
>
<Paper>
<Stack direction='row'
padding={3}>
<FormControlLabel control={<Switch checked={detailedView}
onChange={e => setDetailedView(e.target.checked)}/>}
label='Detailed View'/>
</Stack>
<Scrollbar>
<Table sx={{minWidth: 1200}}>
<TableHead>
<TableRow>
<TableCell/>
<SorterHeader fieldName='sort_order'
title='CM Rule Order'/>
<TableCell width="10%">
Conceptual Field/Group
</TableCell>
<TableCell>
Min XSD
</TableCell>
<TableCell>
Max XSD
</TableCell>
<TableCell width="18%">
Ontology Fragment Class path
</TableCell>
<TableCell width="18%">
Ontology Fragment Property path
</TableCell>
<TableCell>
RML Triple Map
</TableCell>
<TableCell>
Mapping Package
</TableCell>
<TableCell>
SPARQL assertions
</TableCell>
<TableCell align="center"
title="Notes"
sx={{
whiteSpace: "nowrap"
}}
>
Notes
</TableCell>
<TableCell align="right"
sx={{
whiteSpace: "nowrap"
}}
/>
</TableRow>
</TableHead>
<TableBody>
{items.map(item => {
const item_id = item._id;
const isCurrent = item_id === currentItem;
const isHovered = item_id === hoveredItem;

return (
<ListTableRow
key={`rules_list_row_${item_id}`}
item={item}
item_id={item_id}
isCurrent={isCurrent}
handleItemToggle={handleItemToggle}
sectionApi={sectionApi}
initProjectMappingPackages={projectMappingPackages}
initProjectTripleMapFragments={projectTripleMapFragments}
initProjectSPARQLResources={projectSPARQLResources}
onPackagesUpdate={onPackagesUpdate}
handleItemHover={handleItemHover}
isHovered={isHovered}
detailedView={detailedView}
handleNotesDialogOpen={notesDialog.handleOpen}
/>)
})}
<Dialog
id='notes_dialog'
onClose={notesDialog.handleClose}
open={notesDialog.open}
fullWidth
maxWidth="md"
>
Notes
</TableCell>
<TableCell align="right"
sx={{
whiteSpace: "nowrap"
}}
/>
</TableRow>
</TableHead>
<TableBody>
{items.map(item => {
const item_id = item._id;
const isCurrent = item_id === currentItem;
const isHovered = item_id === hoveredItem;

return (
<ListTableRow
key={`rules_list_row_${item_id}`}
item={item}
item_id={item_id}
isCurrent={isCurrent}
handleItemToggle={handleItemToggle}
sectionApi={sectionApi}
initProjectMappingPackages={projectMappingPackages}
initProjectTripleMapFragments={projectTripleMapFragments}
initProjectSPARQLResources={projectSPARQLResources}
onPackagesUpdate={onPackagesUpdate}
handleItemHover={handleItemHover}
isHovered={isHovered}
detailedView={detailedView}
handleNotesDialogOpen={notesDialog.handleOpen}
/>)
})}
<Dialog
id='notes_dialog'
onClose={notesDialog.handleClose}
open={notesDialog.open}
fullWidth
maxWidth="md"
>
<Card>
<CardHeader title="Notes"
sx={{mb: 2}}/>
<Divider/>
<CardContent sx={{pt: 1}}>
<Box style={{overflow: 'auto', maxHeight: '40vh'}}>
{notesDialog.data?.mapping_notes && <>
<Typography>Mapping Notes:</Typography>
{notesDialog.data.mapping_notes.map((mapping_note, i) => <RuleComment
key={'mapping_note' + i}
comment={mapping_note}
/>
)}
</>}
<Divider sx={{my: 2}}/>
{notesDialog.data?.editorial_notes && <>
<Typography>Editorial Notes:</Typography>
{notesDialog.data.editorial_notes.map((editorial_note, i) =>
<RuleComment
key={'editorial_notes' + i}
comment={editorial_note}
/>
)}
</>}
<Divider sx={{my: 2}}/>
{notesDialog.data?.feedback_notes && <>
<Typography>Feedback Notes:</Typography>
{notesDialog.data.feedback_notes.map((feedback_note, i) =>
<RuleComment key={'feedback_notes' + i}
comment={feedback_note}/>
)}
</>}
</Box>
</CardContent>
</Card>
</Dialog>
</TableBody>
</Table>
</Scrollbar>
</Paper>
</TablePagination>
<Card>
<CardHeader title="Notes"
sx={{mb: 2}}/>
<Divider/>
<CardContent sx={{pt: 1}}>
<Box style={{overflow: 'auto', maxHeight: '40vh'}}>
{notesDialog.data?.mapping_notes && <>
<Typography>Mapping Notes:</Typography>
{notesDialog.data.mapping_notes.map((mapping_note, i) =>
<RuleComment
key={'mapping_note' + i}
comment={mapping_note}
/>
)}
</>}
<Divider sx={{my: 2}}/>
{notesDialog.data?.editorial_notes && <>
<Typography>Editorial Notes:</Typography>
{notesDialog.data.editorial_notes.map((editorial_note, i) =>
<RuleComment
key={'editorial_notes' + i}
comment={editorial_note}
/>
)}
</>}
<Divider sx={{my: 2}}/>
{notesDialog.data?.feedback_notes && <>
<Typography>Feedback Notes:</Typography>
{notesDialog.data.feedback_notes.map((feedback_note, i) =>
<RuleComment key={'feedback_notes' + i}
comment={feedback_note}/>
)}
</>}
</Box>
</CardContent>
</Card>
</Dialog>
</TableBody>
</Table>
</Scrollbar>
</Paper>
</TablePagination>
</TableLoadWrapper>
);
};

Expand Down

0 comments on commit fa5db29

Please sign in to comment.