Create endpoints API in Data Lab

[Eolian Tomcini]

Hello all!

I'm new in Seeq Data Lab and I really need help.

I am trying to create a front end for an add-on created in python. Currently, I am getting the data from a csv file (it is located inside the data lab), these data are processed by different python functions (called in Jupyter tabs) and the results come out. What I want to do is: Create API endpoints for each result and call these endpoints through JavaScript to display them in an html file ex. index.html. I have tried to do this using Jupyter kernel gateway but without success as the web page comes out white. When I open the developer tools browser and search for errors in the console, there is no difference, even in the network tab, nothing is displayed. When I try to access the API endpoint through the terminal with 'curl' ex. 'curl http://127.0.0.1:8889/api/tree' the data is displayed, but not on the web page. Maybe someone can help me how to solve this problem or in any other way which works to display the processed data coming from the python back-end to show it in JavaScript, html front-end. To clarify, everything (files, libraries, etc) is located within the Seeq Data Lab environment.
Thank you!

[John]

Hey Eolian,

You likely won’t need to install the Jupyter server proxy, as Data Lab Functions/Projects already have this capability built-in. The endpoint definition is placed as a comment on the first line of the cell, incorporating the HTTP method and the endpoint name. A notebook cell that is decorated with a top-line comment resembling a RESTful endpoint. The output of that cell is sent to the front end as a response.  For example:

# GET /items
items = spy.search({
    'Path': 'Example >> Cooling Tower 1 >> Area A',
    'Name': 'Compressor'
})
items.to_json()

When the Data LabFunction is run this cell will automatically be registered as an endpoint accessible via a URL.  When invoked it will return the JSON serialized item search.

Let's assume this endpoint is in a notebook, api_test.ipynb, and is hosted on https://yousite.seeq.com, the endpoint URL might look something like this: https://preview.seeq.com/data-lab/<ProjectUUID>/functions/notebooks/api_test/endpoints/items.

More information about Data Lab Functions and how to invoke them can be found here:

To call this endpoint from the JavaScript side, you can use the callDataLabApi function of the Plugin API (more details can be found here). The callDataLabApi function requires the ProjectID, which is generated when the Add-on is installed, although the project name is known. A typical workflow to call an API endpoint from JavaScript is to first find the ID using the getDataLabProject function and then pass it into callDataLabApi. Here is an example. 
 

// Assuming API is already available as `api`
const projectName = 'YourProjectName';
const notebookName = 'YourNotebookName';
const apiPath = '/api/some-endpoint';

// Step 1: Get the project ID using the project name
api.getDataLabProject(projectName)
  .then((projectResponse) => {
    const projectId = projectResponse.projectId;
    if (!projectId) {
      throw new Error(`Project with name "${projectName}" not found.`);
    }

    // Step 2: Call the Data Lab API using the retrieved project ID
    return api.callDataLabApi({
      projectId: projectId,
      notebookName: notebookName,
      path: apiPath,
      method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.
      query: {}, // Optional: Replace with actual query parameters
      body: {}, // Optional: Replace with actual body content if needed
      headers: { } // Optional: Replace with actual headers if needed
    });
  })
  .then((dataLabResponse) => {
    // Step 3: Handle the response
    console.log('Data Lab API Response:', dataLabResponse);
  })
  .catch((error) => {
    console.error('Error fetching Data Lab API:', error);
  });

In your case you mentioned that the output is HTML. In that case you'd send the HTML information as the request and render it on the frontend.  

[Eolian Tomcini]

Thank you John!