ishaanshettigar/idg10-gui-hackathon

Building an interactive GUI to help design subsea field layouts using JointJS with plain HTML,CSS and JS

Ishaan Shettigar

👋 Hello! I'm Ishaan Shettigar, I'm currently in my final year studying CSE at PES University, Bangalore.

• 📫 You can reach me at [email protected]
• 💬 Connect with me on LinkedIn

About Me

• 🔭 I'm currently working on a computer vision project that involves detecting osteoporosis and osteoarthritis from knee X-ray images as well as a project that converts natural language queries into valid SQL queries using generative AI.
• 🌱 I'm continuously learning and exploring, my fields of interest include GenerativeAI, Crypto/Web3, AI/ML and FullStack Web Dev.
• 👯 I'm currently learning React and would love to contribute to any open-source repositories to further my understanding in it.

Technologies I Love

• Languages: Python, JavaScript, C/C++, Solidity (Ethereum), Java
• Frameworks: React (currently learning), Node.js, MERN, FastAPI, Django
• Tools: Git, OpenCV, pandas, Keras
• Databases: MariaDB, MongoDB, PostgreSQL, MySQL,

My GitHub Stats

Thank you for visiting my GitHub profile. Feel free to explore my projects, get in touch, or collaborate on exciting projects. 🚀

idg10-gui-hackathon's Issues

Element tools arent loaded on copy and paste

Decoupling for readability

Create one js file for all element tools
Create one js file for all link tools
Create a js file for all custom elements

Create the component and connector, parameter JSON

Multiple labels are added to links if disconnected and reconnected

Problem is happening cuz of the call to appendDefaultLabels on the event link:connect

Create Subsea Separator Element

Add Undo/Redo Functionality

Use a stack

Create UTH Element

New Feature: When the user drags an element out of bounds then translate the paper in that direction

This feature is needed to navigate complex diagrams.

Settings Page:

Make a settings page where you can change the settings of each of the elements and connectors in the diagram.

Assignees: @abhay-ramesh, @IshaanShettigar
Labels: Feature
Milestone:

Create developer documentation

Think about where to expose Link settings

Other than the 18 parameters per link there should also be options to change the settings of the link. These settings will be the same as those provided by the JointJs framework.

Settings:

Link Router - normal/manhattan/metro/right-angle/orthogonal

The default router is 'normal'; this can be changed with the defaultRouter paper option. Example:

paper.options.defaultRouter = {
    name: 'orthogonal',
    args: {
        padding: 10
    }
});

The 'manhattan' and 'metro' routers are our smart routers; they automatically avoid obstacles (elements) in their way.

The 'orthogonal', 'manhattan' and 'rightAngle' routers generate routes consisting exclusively of vertical and horizontal segments. The 'metro' router generates routes consisting of orthogonal and diagonal segments.

JointJS also contains mechanisms to define one's own custom routers.

Connector - normal/rounded/smooth/curve/straight/jumpover
The default connector is 'normal'; this can be changed with the defaultConnector paper option. Example:

paper.options.defaultConnector = {
    name: 'straight',
    args: {
        cornerType: 'line',
        cornerRadius: 20
    }
}

(more info here)

Advanced Settings:

SnapLinks: (true/false)
SourceArrowHead: (provide 2 or 3 ready-to-use connectors)
TargetArrowHead: (provide 2 or 3 ready-to-use connectors) (Describe in the documentation how one can specify their own custom arrowheads)
Boundary: display the boundary of the link on hover or whenever you show the link tools

Create FPSO Element

When using local storage the parameters aren't saved for some reason

Integrate the new parameters into the application

Using #49, make sure to dynamically assign the necessary parameters every time the application is loaded up.

Whenever a pan event is triggered on the paper, change the cursor from pointer to something more appropriate

Not sure yet, how to implement this but off the top of my head we could create a function to change the cursor and put that function in the onPan section as seen below. This should change the cursor while you are panning.

paperPanAndZoom = svgPanZoom("#paper-div svg", {
   fit: false,
   center: false,
   zoomScaleSensitivity: 0.03,
   panEnabled: false,
   controlIconsEnabled: true
   onPan: (oldPan, newPan) => { /* This is the function */}
})

Create the logic for the "Installation & Construction Vessel" and "Subsea Intervention" parameters and modals

1. Create a JSON representation for the "Installation & Construction Vessel" and "Subsea Intervention" based on the specification PPT.
2. Create a button next to the respective select boxes for "Installation & Construction Vessel" and "Subsea Intervention".
3. Create a modal that appears on clicking the above button.
4. The input and select boxes should be created based on the JSON. We need to check what value is there in the select box and then match it with the JSON, to get the right info.
5. Make sure this is represented in the BOM and the downloadable csv.

Platform element doesnt scale properly. I messed up the calc expressions somewhere

Fix the hover modal position when modal is out of bounds for PLET and UTH

The hover modal is wildly out of position due to the fact that we are defining the distance of the modal from the hovered coordinates in terms of the elements height (in case of out of bounds on the Y axis) and width (in case of out of bounds on the X axis). This is an error simply due to the fact that these elements PLET and UTH have a much larger size. Not visually tho, the elements bounding box is itself larger than the others.

Possible solutions:

1. Redefine/Re-draw them.
2. Figure out a different way to display the out of bounds cases.

Below are two images depicting the error.

On uploading a file, the element tools are not loaded

When a user tries to upload an old .idg file, the diagram loads fine however the element and link tools are not loaded.
If we try adding new elements and links, tools are displayed on them but not on the previously loaded data.

Add new connectors Rigid/Flexible PT Riser PR/WI/GL-GI

Use browser local storage to store the current sessions state

This is a required feature as the user should not have the inconvenience of redrawing the diagrams if they accidentally close the tab.

Possible ways to save the diagram:

• Ctrl + S triggers the saving
• Save every 5 minutes/1 minutes/30 seconds.
• Save once every graph.on("change", function) event

We will be utilizing browser local storage

When refreshing the page or opening a diagram that you just saved, the linsk dont show up cause of some error

When refreshing the page or saving and loading a diagram, the link color disappears. This is cause something weird happens when it saves it, I do not know what. Look at localstorage under the links attrs. Something weird is happeniing

Create PLEM Element

UI: Create an are you sure you want to clear the entire background modal

Add new connector: Elect Flying Lead

Figure out a way to implement the "bump" in the links Rigid Spool and Flexible Jumper

Add ports to the necessary elements

When user changes the connector in link settings, the highlight on the link disappears

Create element and link tools (resize, rotate etc)

Create PLET Element

Save diagram as SVG or PNG

Integrate the smart drop down menu

Commit to the phase3.1 branch

Enable Zoom using the mouse wheel scroll functionality

Copy Paste functionality doesn't take into account the paper translation

UI: Create a settings modal, that exposes diagram settings.

Diagram settings include paper background colour, paper grid type (mesh.. etc) and paper grid scale (optional, we might not include this).

Generate Bill of Material

Takes an input the graph. Renders all parameters on a pdf

Element Tools do not show up on a pasted element

UI: Create a hamburger menu for open file, save file and help

Integrate the rotate control tool

Make sure that connectors can connect to other connectors

When user drags and drops connector anywhere in space not just on port, make sure to let that happen and somehow the user should be able to connect other connectors to each other and join them together.

When changing from RigidPipeline Pip to others, the vertices dissapear

Link cannot connect to anything when just created [BUG]

Everything was fine until I added the addLinkToolsNew function and call it during the graph.on('add', ....) event.
Maybe if we hide the tools while the link is pressed (pointerdown), then this bug will not happen.

For some reason it seems to want to connect to itself despite the fact that the validateConnection option while defining mainPaper prevents that from happening.

Add the drag and drop feature

Right now elements on the toolbar appear on the mainGraph when the user double-clicks on a specific element. This functionality is accomplished by having the elements appear at a fixed position on the graph, which could lead to poor user experience.
Ideally, we would like the user to be able to drag and drop the element to a specified position on the mainGraph.

Helpful link: https://observablehq.com/@quantellia/jointjs-drag-and-drop-ideation

Fix the Bill of Material to CSV

When dealing with the new parameters it is really important to generate the excel file. An engineer will design the pipeline using this software but some high level exec will play around with the values in the excel file.

Features

1. One excel file for components, one sheet for each component in the diagram
2. One excel file for links, one sheet for each link in the diagram.

UI: Create a menu on the left hand side that exposes the element settings

Figure out how to create an infinite space that the user can pan around, zoom in and zoom out

Make the displayed paper grid actually reflect the real grid after zooming in via scroll

The pan and zoom feature is only available in the infinite_paper.html and infinite_paper.js files.
When we try to zoom in, it works perfectly fine, but the background grid does not change. We need to change the grid size and re-render the paper's background on zoom.

This can quickly be done once you figure out how to re-render the grid in joint js.

Then in the place where we create a svgPanZoom object we just add the following parameters and the corresponding functions to it like so:

paperPanAndZoom = svgPanZoom("#paper-div svg", {
    fit: false,
    center: false,
    zoomScaleSensitivity: 0.03,
    panEnabled: false,
    controlIconsEnabled: true,
    onZoom: ()=>{
      /*Insert function to re-render here*/
     }
})

you could also try to use the beforeZoom: callback_function parameter

Add new connectors Rigid SCR-PR/WI/Gl-GI, Buoancy Module and Flexible Riser PR/WI/GL-GI

Add a mini-map feature on the bottom-right of the main diagram

look at the advanced Multiple Papers tutorial in the joint js documentation, to learn how to use this functionality to create diagram minimaps and previews.

Prompt to ask the user for confirmation before deleting element

This prompt should be fired whether the user tries to delete an element whether they click on the x icon or they highlight the element by clicking on it and then press the delete key.

We can react to the graph.remove event listener to ask the user if they really want to remove the object (Are you sure?)