Skip to content

Commit 7c28dcd

Browse files
KittyJoseKittyJose
committed
added parents
1 parent 3456363 commit 7c28dcd

File tree

18 files changed

+257
-395
lines changed

18 files changed

+257
-395
lines changed

‎packages/tdb-dashboard/src/components/JSONModelBuilder.js‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ import {Loading} from "./Loading"
1010
import {Alert} from "react-bootstrap"
1111
import {MODEL_BUILDER_EDITOR_OPTIONS} from "./constants"
1212
import { BiUndo } from "react-icons/bi"
13-
import {FaRegEdit} from 'react-icons/fa'
13+
import { BsSave } from "react-icons/bs"
14+
import {FaRegEdit, FaSave} from 'react-icons/fa'
1415
import {TERMINUS_DANGER,DOCUMENT_PREFIX} from "./constants"
1516
import {GRAPH_TAB} from "../pages/constants"
1617
import {GraphContextObj} from "@terminusdb-live/tdb-react-components"
1718
import {CopyButton} from "./utils"
1819
import Card from "react-bootstrap/Card"
19-
import {BsSave} from "react-icons/bs"
20+
import Button from "react-bootstrap/Button"
2021
import Stack from "react-bootstrap/Stack"
2122
import {modelCallServerHook} from "@terminusdb-live/tdb-react-components"
2223
import {ErrorMessageReport} from "../components/ErrorMessageReport"
@@ -39,7 +40,7 @@ export const JSONModelBuilder = ({tab,accessControlEditMode}) => {
3940

4041

4142
const {saveGraphChanges,
42-
reportMessage,
43+
reportMessage,
4344
setReport,
4445
callServerLoading:loading,
4546
} = modelCallServerHook(woqlClient, branch, ref,dataProduct)
@@ -89,6 +90,21 @@ export const JSONModelBuilder = ({tab,accessControlEditMode}) => {
8990

9091
const editStyle = editMode ? {className:"border rounded border-warning position-sticky"} : {}
9192
const editMessage = editMode ? "Save schema or you will lose your changes" : ""
93+
94+
const ToolButtons = ({ id, title, onClick, icon}) => {
95+
return <Button title={title}
96+
id={id}
97+
type="button"
98+
variant="light"
99+
className="btn-lg border border-light bg-transparent"
100+
onClick={onClick}>
101+
{icon}
102+
</Button>
103+
}
104+
105+
function handleEditMode() {
106+
setEditMode(true)
107+
}
92108

93109
//console.log("editMode", editMode)
94110
return <>
@@ -98,34 +114,34 @@ export const JSONModelBuilder = ({tab,accessControlEditMode}) => {
98114
<Card className={`border border-secondary`} {...editStyle}>
99115
{loading && <Loading message={"Updating schema"} type={PROGRESS_BAR_COMPONENT}/>}
100116
<Card.Header>
101-
<Stack direction="horizontal" className="w-100 justify-content-end">
102-
{editMode && <div className="w-100">
103-
<div role="group" className="btn-group w-100">
104-
<div className="col-md-10 pr-0 pl-0">
105-
<input id="schema_save_description" placeholder={"Enter a description to tag update"} type="text" className="form-control" onBlur={handleCommitMessage}/>
106-
</div>
107-
<button type="button" id="schema_save_button" className="btn btn-sm bg-light text-dark" onClick={saveGraph}>
108-
<BsSave className="small"/> {"Save"}
109-
</button>
110-
<button type="button"
111-
title="Undo changes"
112-
className="btn btn-sm bg-danger text-white mr-2" onClick={()=>{ loadSchema() }}>
113-
<BiUndo className="h5"/> {"Undo"}
114-
</button>
115-
</div>
116-
</div>
117-
}
117+
<Stack direction='horizontal' gap={2} className={` w-100 justify-content-end`}>
118+
{editMode && <>
119+
<input id="schema_save_description"
120+
placeholder={"Enter a description to tag update"}
121+
type="text"
122+
className="form-control border border-light"
123+
onBlur={handleCommitMessage}/>
124+
<ToolButtons title={`Save`}
125+
id="schema_save_button"
126+
onClick={(e) => saveGraph()}
127+
icon={<FaSave size="26" className="h2 text-light"/>}/>
128+
<ToolButtons title={`Undo`}
129+
id="schema_reset_button"
130+
onClick={ (e) => loadSchema() }
131+
icon={<BiUndo size="26" className="h2 text-light"/>}/>
132+
</>}
118133
{accessControlEditMode && !editMode &&
119134
<button type="button" className="btn-edit-json-model btn btn-md btn-light text-dark float-right mr-2"
120-
onClick={()=>{setEditMode(true)}}>
135+
onClick={handleEditMode}>
121136
<FaRegEdit className="mb-1"/> Edit Schema
122137
</button>
123138
}
124139
<CopyButton text={jsonSchema}
125140
label={""}
126141
title={`Copy JSON schema`}
127-
css={"btn btn-md bg-light text-dark float-right"}/>
142+
css={`btn ${editMode ? `btn-lg` : `btn-md`} bg-transparent text-light border border-light float-right`}/>
128143
</Stack>
144+
129145
</Card.Header>
130146
<div className="h-100">
131147
<CodeMirror

‎packages/tdb-react-components/src/css/less/component/accordion.less‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,7 @@
105105
}
106106
.tdb__accordion__title div {
107107
width: 100%;
108-
}
108+
}
109+
110+
111+

‎packages/tdb-react-components/src/treeGraphComponent/MainGraphObject.js‎

Lines changed: 28 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,8 @@ export const MainGraphObject = (mainGraphDataProvider,dbName)=>{
315315
*in this case I have to remove the direct parent
316316
*/
317317
const checkRelatedParents=(elementObjClass,parentObjClass)=>{
318+
if(!parentObjClass) return
319+
if(!parentObjClass.parents) return
318320
parentObjClass.parents.forEach((parentName)=>{
319321
const parentOfParentObj=_rootIndexObj[parentName];
320322
const parentRelated=removeElementToArr(elementObjClass.parents,parentName);
@@ -367,9 +369,17 @@ export const MainGraphObject = (mainGraphDataProvider,dbName)=>{
367369
return elementObjClass;
368370
}
369371

372+
const fetchParentObject = (parentName) => {
373+
if(_rootIndexObj[parentName]) return _rootIndexObj[parentName]
374+
for(let obj in _rootIndexObj) {
375+
if(_rootIndexObj[obj].id && _rootIndexObj[obj].id === parentName) return _rootIndexObj[obj]
376+
}
377+
return {}
378+
}
379+
370380
const updateNodeParents=(elementName, parentName, actionName)=>{
371381
const elementObjClass=_rootIndexObj[elementName];
372-
const parentObjClass=_rootIndexObj[parentName];
382+
const parentObjClass=fetchParentObject(parentName);
373383

374384
checkRelatedParents(elementObjClass, parentObjClass);
375385

@@ -381,6 +391,7 @@ export const MainGraphObject = (mainGraphDataProvider,dbName)=>{
381391
parentObjClass.children.push(elementObjClass);
382392
}
383393
}
394+
//elementObjClass.parents.push(parentObjClass.name);
384395
elementObjClass.parents.push(parentObjClass.name);
385396
parentObjClass.allChildren.push(elementObjClass);
386397

@@ -416,66 +427,10 @@ export const MainGraphObject = (mainGraphDataProvider,dbName)=>{
416427
elementObjClass.schema['@inherits']=elementObjClass.parents
417428
}
418429

419-
moveNodeUnderParent(parentName,elementName);
430+
//moveNodeUnderParent(parentName,elementName);
420431
return elementObjClass;
421432
}
422433

423-
const updateNodeParents_ref=(elementName,parentName,actionName)=>{
424-
const elementObjClass=_rootIndexObj[elementName];
425-
const parentObjClass=_rootIndexObj[parentName];
426-
427-
checkRelatedParents(elementObjClass,parentObjClass);
428-
429-
// _graphUpdateObject.changeNodeParent(elementName,parentName,actionName);
430-
431-
if(actionName===NODE_ACTION_NAME.ADD_PARENT){
432-
//the node could be children of another node or children of root node
433-
if(parentObjClass.type===elementObjClass.type){
434-
removeChildFromRoot(elementObjClass);
435-
if(elementObjClass.parents.length===0){
436-
parentObjClass.children.push(elementObjClass);
437-
}
438-
}
439-
elementObjClass.parents.push(parentObjClass.name);
440-
parentObjClass.allChildren.push(elementObjClass);
441-
442-
}else{
443-
removeElementToArr(elementObjClass.parents,parentName);
444-
removeElementToArr(parentObjClass.children,elementName);
445-
if(parentObjClass.allChildren)
446-
removeElementToArr(parentObjClass.allChildren,elementName);
447-
448-
/*
449-
* if the parents array is empty I move the node under the root group
450-
*/
451-
if(elementObjClass.parents.length===0){
452-
parentName=addToParentGroup(elementObjClass)
453-
}else if(elementObjClass.type===CLASS_TYPE_NAME.DOCUMENT_CLASS){
454-
const docParent=elementObjClass.parents.findIndex((pName)=>{
455-
const pElement=_rootIndexObj[pName];
456-
457-
return pElement.type===CLASS_TYPE_NAME.DOCUMENT_CLASS
458-
})
459-
if(docParent===-1){
460-
parentName=addToParentGroup(elementObjClass)
461-
}
462-
}
463-
}
464-
/*
465-
* this is for save the change
466-
*/
467-
if(elementObjClass.parents.length===0 && elementObjClass.schema['@inherits']){
468-
delete elementObjClass.schema['@inherits']
469-
}else if(elementObjClass.parents.length===1){
470-
elementObjClass.schema['@inherits']=elementObjClass.parents[0]
471-
}else{
472-
elementObjClass.schema['@inherits']=elementObjClass.parents
473-
}
474-
475-
moveNodeUnderParent(parentName,elementName);
476-
return elementObjClass;
477-
}
478-
479434
const addToParentGroup=(elementObjClass)=>{
480435
const parentRoot=getRoot(elementObjClass.type);
481436
parentRoot.children.push(elementObjClass);
@@ -843,10 +798,23 @@ export const MainGraphObject = (mainGraphDataProvider,dbName)=>{
843798

844799

845800
const getPropertyInfo = (propId)=>{
846-
//if(!_currentNode.schema[propId]) return {}
847801
if(!_currentNode.schema[propId]) {
848802
// check if current property is a property of OneOfProperty
849-
return checkIfPropertyExistsInOneOf(_currentNode.schema, propId)
803+
let oneOfProperties = checkIfPropertyExistsInOneOf(_currentNode.schema, propId)
804+
if(Object.keys(oneOfProperties).length) return oneOfProperties
805+
// check if current property is a property in their parents - we display inheritted properties in
806+
// <PropertiesComponent/>
807+
if(_currentNode.parents && _currentNode.parents.length) {
808+
let inheritedProperies = {}
809+
_currentNode.parents.map(parentName => {
810+
if(_rootIndexObj[parentName] && _rootIndexObj[parentName].schema.hasOwnProperty(propId)){
811+
// property is inherritted
812+
inheritedProperies= extractPropertyInfo(_rootIndexObj[parentName].schema[propId], propId)
813+
814+
}
815+
})
816+
if(Object.keys(inheritedProperies).length) return inheritedProperies
817+
}
850818
}
851819
return extractPropertyInfo(_currentNode.schema[propId], propId)
852820
}

‎packages/tdb-react-components/src/treeGraphComponent/ReactFlowComponents/GUIComponent.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -233,18 +233,16 @@ const Tree = (props) => {
233233
<FocusOnButton/>
234234

235235
<Accordion titleClassName="tdb__accordion__head"
236-
title="Editor"
236+
title="Editor"
237+
//className="panel__width"
237238
showBody={true}>
238239
<Card className="border border-secondary" style={{backgroundColor : "black"}}>
239240
<Card.Body>
240241
<Stack direction="horizontal" gap={2}>
241-
<div>
242-
<Button onClick={() => onLayout('LR')} variant="light" className="btn-sm ml-3">horizontal layout</Button>
243-
<Button onClick={() => onLayout('TB')} variant="light" className='ml-1 btn-sm'>vertical layout</Button>
244-
</div>
245-
<PanelLegend/>
242+
<Button onClick={() => onLayout('LR')} variant="light" className="btn-sm ml-3">horizontal layout</Button>
243+
<Button onClick={() => onLayout('TB')} variant="light" className='ml-1 btn-sm'>vertical layout</Button>
246244
</Stack>
247-
245+
<PanelLegend/>
248246
<div className='h-100 overflow-y-scroll'>
249247
{!showInfoComp && isEditMode===true &&
250248
<DetailsModelComponent
@@ -299,16 +297,17 @@ export const GUIComponent = (props) => {
299297
if(dat.data.name === "DocumentClasses" && !dat.data.children.length) return
300298
//create nodes
301299
let nodeID = dat.data.id ? dat.data.id : dat.data.name
302-
initialNodes.push(
300+
initialNodes.push(
303301
{
304302
id: nodeID,
305303
data: {
306-
label: dat.data.label ? dat.data.label : dat.data.name, type: dat.data.type,
304+
label: nodeID, //dat.data.label ? dat.data.label : dat.data.name,
305+
type: dat.data.type,
307306
toolbarPosition: Position.Top
308307
},
309308
position,
310309
style: selectedNodeObject && nodeID===selectedNodeObject.id ? {
311-
color: "#fff",
310+
/*color: "#fff", */
312311
background: "#ff0072",
313312
} : util.getNodeColor(dat.data, selectedNodeObject)
314313
}

‎packages/tdb-react-components/src/treeGraphComponent/ReactFlowComponents/GraphComponents.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Stack from "react-bootstrap/Stack"
33
import * as style from "./styles"
44

55
export const PanelLegend = () => {
6-
return <Stack direction='horizontal' gap={2}>
6+
return <Stack direction='horizontal' gap={2} className="m-3">
77
<Stack direction='horizontal' gap={2}>
88
<div style={style.selected_style}></div>
99
<div className='fst-italic text-muted small'>Selected Document</div>

‎packages/tdb-react-components/src/treeGraphComponent/SchemaDocumentView.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const SchemaDocumentView = (props) => {
7676
defaultSize="23%"
7777
className='mr-3 border-left border-dark rounded view__builder__pane'
7878
onChange={size => handleWidthChange(size, setWidth)}>
79-
<div className='h-100 border-right border-secondary overflow-y-scroll'>
79+
<div className='h-100 border-right border-secondary overflow-y-scroll overflow-x-hidden'>
8080
<SchemaBuilderList canAdd={true}/>
8181
</div>
8282
<div>
@@ -86,8 +86,8 @@ export const SchemaDocumentView = (props) => {
8686
{showInfoComp && <>
8787
{/*<RightBarHeaderTools saveData={saveData} view={`UI_VIEW`}/>*/}
8888

89-
<Card className="bg-transparent border-0">
90-
<Card.Body>
89+
<Card className="bg-transparent border-0 h-100">
90+
<Card.Body className="overflow-auto">
9191
<DetailsModelComponent
9292
customClassName="bg-transparent"
9393
objPropsRelatedToClass={objPropsRelatedToClass}

‎packages/tdb-react-components/src/treeGraphComponent/detailsComponent/BaseAddChildElement.js‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const BaseAddChildElement = (props) => {
3131
return []
3232

3333
}
34-
34+
3535
const handleChildren = (currentChildName, actionType) => {
3636
// actionType === "remove-value" on clicking delete of multi react select
3737
let action = actionType === "remove-value" ? REMOVE_CHILD : ADD_CHILD
@@ -41,16 +41,30 @@ export const BaseAddChildElement = (props) => {
4141
// get dataprovider to display documents to appear as parent list
4242
let childrenList = getClassDataProvider(selectedNodeObject.type, availableChildrenList)
4343

44-
return <FormGroupComponent
45-
labelComponent = {<label className={`mr-3`}>{`Children`}</label>}
46-
helpComponent = {<HelpComponent text={`Here you can add Children to ${props.nodeJsonData.id}`}/>}
47-
fieldComponent = {
48-
<div className="w-100">
49-
<BaseMultiSelectReactElement onChange={handleChildren}
50-
selectedValues={getSelectedChildren(props.nodeJsonData)}
51-
dataProvider={childrenList}/>
52-
</div>
53-
}/>
44+
if(props.view === `UI_VIEW`) {
45+
return <FormGroupComponent
46+
labelComponent = {<label className={`mr-3`}>{`Children`}</label>}
47+
helpComponent = {<HelpComponent text={`Here you can add Children to ${props.nodeJsonData.id}`}/>}
48+
fieldComponent = {
49+
<div className="w-100">
50+
<BaseMultiSelectReactElement onChange={handleChildren}
51+
selectedValues={getSelectedChildren(props.nodeJsonData)}
52+
dataProvider={childrenList}/>
53+
</div>
54+
}/>
55+
}
56+
57+
return <div className="mb-3">
58+
<div className="d-flex">
59+
<label className={`mr-3`}>{`Children`}</label>
60+
<HelpComponent text={`Here you can add Children to ${props.nodeJsonData.id}`}/>
61+
</div>
62+
<div className="w-100">
63+
<BaseMultiSelectReactElement onChange={handleChildren}
64+
selectedValues={getSelectedChildren(props.nodeJsonData)}
65+
dataProvider={childrenList}/>
66+
</div>
67+
</div>
5468
}
5569

5670
return <div/>

‎packages/tdb-react-components/src/treeGraphComponent/detailsComponent/BaseElement.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const BaseElement = (props)=>{
5858
elementId={nodeJsonData.name}
5959
displayAsIcon={false}
6060
size={"17"}
61+
isDisabled={props.isDisabled}
6162
className={'btn-sm border-0 bg-transparent float-right'}
6263
elementType={nodeJsonData.type}
6364
removeElement={props.removeElement}
@@ -91,6 +92,7 @@ export const BaseElement = (props)=>{
9192
}
9293
{props.children}
9394
<BaseTextareaElement
95+
isDisabled={props.isDisabled}
9496
placeholder={ELEMENT_BASE_CONST.DESCRIPTION_PLACEHOLDER}
9597
title={ELEMENT_BASE_CONST.DESCRIPTION_TEXT}
9698
name='comment'

0 commit comments

Comments
 (0)