Please see https://docs.cognite.com/api/v1/#tag/Engineering-diagrams for details on the API for engineering diagrams. The JavaScript SDK doesn’t have dedicated endpoints for this API as its rarely used with Javascript, but it can be accessed using generic REST API functionality in CogniteClient, e.g. https://cognitedata.github.io/cognite-sdk-js/classes/cogniteclient.html#post.

Note that we do not have a dedicated file viewer component in place at this time, so you will need to write a custom document viewer on your own.

How to preview file in javascript

Hi Karthik. As mentioned above, we do not currently have a dedicated file viewer component. You can use https://docs.cognite.com/api/v1/#tag/Engineering-diagrams/operation/diagramConvertResults to generate an image (PNG or SVG) with annotations, but any interactions must be handled manually.

ok thanks

I need exact job id, please tell how to find job id ?

Hi Karthik. You are referring to the wrong job id. The job id in the file metadata is not relevant here.

/api/v1/projects/{{project}}/context/diagram/convert/:jobId 

The above endpoint will get you the results for converting an engineering diagram to an image. In order to use the above endpoint you should have already submitted a convert job via the below endpoint which will in return give you a jobId which you will be able to use with the above endpoint.  

/api/v1/projects/{{project}}/context/diagram/convert

​​​For more information on the endpoints you can always refer to our documentation.

ok, Thank

Hi Karthik. You are referring to the wrong job id. The job id in the file metadata is not relevant here.

/api/v1/projects/{{project}}/context/diagram/convert/:jobId 

The above endpoint will get you the results for converting an engineering diagram to an image. In order to use the above endpoint you should have already submitted a convert job via the below endpoint which will in return give you a jobId which you will be able to use with the above endpoint.  

/api/v1/projects/{{project}}/context/diagram/convert

 

​​​For more information on the endpoints you can always refer to our documentation.

ok, thank you so much

Hi @Karthik Kaliyaperumal,

According to the code, some of the required parameters are missing. Could you please add those parameters? (fileId, annotation)

Best regards,
Dilini

ok, thanks

How do we draw a rectangle to select assets on top of P&ID diagram 

Hi Karthik, 

Have you checked out our documentation regarding P&IDs and interactive engineering diagrams? 
https://docs.cognite.com/cdf/integration/guides/contextualization/interactive_diagrams/

I think you’ll be able to find some information there.

Best,

Carin

ok thanks.

I am use correct job id but I facing above issue  

Hi @Karthik Kaliyaperumal, according to the error, the job ID is not a diagram detect job ID. Can you double-check that you are using a diagram detect job ID for this API call?

How to access this API?

Hi @Karthik Kaliyaperumal, 

As mentioned in the error, you are missing capabilities to use this API. Please assign them to yourself or have someone assign them to you. That should solve the issue. 

Best,

Carin

Is available dedicated file viewer component? 

Interaction must be handled manually → How to manually, if any NPM packages or JS code library and share reference website.

Is available dedicated file viewer ?  like image view or pdf file view. How preview all files?

Hi @Karthik Kaliyaperumal,

Unfortunately, we don’t have a dedicated file viewer component. But we are considering this work as part of H1 2024 roadmap.

Thanks,

Andreea.