Create insert panel for inserting instances and relations

[aematei]

Checklist before submitting a merge request

• [x] I have reviewed CONTRIBUTING.md document
• [x] 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]

[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]);