Create insert panel for inserting instances and relations

[aematei]

Checklist before submitting a merge request

• I have reviewed CONTRIBUTING.md document
• All commits have been signed-off for the Developer Certificate of Origin. See here.
• I have added my contribution to CHANGELOG.md
• I have documented my code in the OML Vision Docs

Description of contribution

[Describe your contribution, link to any existing relevant issues]

Testing performed

• I have added unit tests to cover additional functionality

How to Test Expected functionality changes

[Describe expected behaviour changes in steps]

• I have added the steps needed to test these changes

Additional context

[If needed, you may add additional context]

[pogi7]

@aematei You may want to have a function called handleItemClicked. The code will be more reusable than arrow functions. This arrow function is anonymous so it may be hard to call the logic within the function in another part of the app.

Look at the official Typescript documentation and this Stack Overflow post for more details:

https://www.typescriptlang.org/docs/handbook/interfaces.html#function-types

https://stackoverflow.com/questions/45721344/arrow-function-in-typescript-interface-with-return-type-as-void

[aematei]

@pogi7 should I still include the function in the interface/type?

[pogi7]

@aematei Yes. It would look like

interface InsertItemProps {
     label: string;
     onItemClicked: handleItemClicked
}

const handleItemClicked: void = () => {
     // you'll handle the logic of an item being clicked 
     console.log('Item Clicked');
}

[aematei]

Oh got it! That makes sense, thanks.

[pogi7]

@aematei Please refer to my earlier comment regarding the arrow function
https://github.com/opencaesar/oml-vision/pull/48/files#r1574922754

[aematei]

Hey @pogi7, I noticed that the color of diagram nodes is specified in a model's components.json file. I want to access the value node in this file so that I can color the instances in the diagram insert panel. Do you know of a way I can access this value from Diagram.tsx? I did some digging but I'm having trouble finding it.

[pogi7]

Hey @pogi7, I noticed that the color of diagram nodes is specified in a model's components.json file. I want to access the value node in this file so that I can color the instances in the diagram insert panel. Do you know of a way I can access this value from Diagram.tsx? I did some digging but I'm having trouble finding it.

@aematei You may be able to access the color of the diagram nodes by accessing the background-color of the ref. You may be able to access the color of the diagram node by using React.useRef

Here's an example of using React.useRef in the code to find the font-size of the tableContainerRef ref (please refer to view/src/components/Table/Table.tsx L67 - L65):

const tableContainerRef = React.useRef<HTMLDivElement>(null);

// Set the Font Size
React.useEffect(() => {
  if (tableContainerRef.current) {
    tableContainerRef.current.style.setProperty("--font-size", `${fontSize}`);
  }
}, [fontSize]);