Skip to main content

Socket service and creating new components.

In User Story 145471 we had a requirement to add string section text to various charts in casing design dashboard. This data was fetched from file data.service in dwp-core. This again got it's data from a socket call /getCalculation.

How to debug socket data​

  • First, go to network tab
  • Press ws filter to observe socket connections
  • Then go to Messages to inspect incoming and outgoing messages.
  • You can use filter function to find relevant data, such as load-summary-component in this case.
  • Alternatively uou can inspect the console, as the socket service most likely includes some handy console.log statements.

How getCalculation Works​

In this task, the data needed to construct the string section text was fetched via a data layer in a file called dwp-core/projects/dwp-core/src/lib/core/services/datadata.service.ts, where the data was returned from a socket in the method getCalculations which looks like this:

public getCalculations(componentEvent) {
    let observable = new Observable(observer => {
        const onComponentEvent = (data) => {
            if (data.length || data.content) {
                console.log(`[${new Date().toISOString().substring(11, 23)}] - received socket data:`, data);
                console.log(`[${new Date().toISOString().substring(11, 23)}] - ${componentEvent} ==> socket.on(componentEvent) ENDS`);
                observer.next(Object.freeze(data));
            } else {
                console.error(`[${new Date().toISOString().substring(11, 23)}] - socket error:`, data);
                observer.error(data.output.payload);
            }
        };
        this.socketService.getSocket().then(data => {
            this.socket = data;
            console.log('[' + new Date().toISOString().substring(11, 23) + '] -', componentEvent + " ==> socket.on(componentEvent) STARTS")
            this.socket.on(componentEvent, onComponentEvent);
        }).catch((err) => {
            observer.error(err);
        });
        // Teardown logic
        return () => {
            if (this.socket) {
                this.socket.off(componentEvent, onComponentEvent); // Remove the event listener
                console.log('WebSocket connection closed in getCalculations');
            }
        };
    })
    return observable;
}

However, in order to specify and fetch the data you actually want from this socket, you first need to make a http post call with a json config object. This is made with dataService.callCalculation(jsonObject), and will set up something to listen to. The json object is of the following base structure:

 let contextObject = {
    "WellId": jsonObject.wellId,
    "WellboreId": jsonObject.wellBoreId,
    "ScenarioId": jsonObject.designId,
    "service_name": jsonObject.applicationName ? jsonObject.applicationName : jsonObject.service_name,
    "view": views,
    "clientID": jsonObject.clientID || '',
    "socketId": this.socketService.socket.id,
    "IncludeEllipses": jsonObject.IncludeEllipses ?? undefined,
}

You can find examples of what these properties can be by looking at various components in dwp-app/src/iwp-app/src/app/modules/solution/component-configs.ts. For example

{
    component: CollapseDifferentialPressureComponent,
    configComponent: CollapseDifferentialPressureConfigComponent,
    componentType: 'Collapse Differential Pressure Component',
    title: 'Collapse Differential Pressures',
    applicationName: 'StressCheck',
    viewName: 'collapse_pressure_tables',
    imageURL: '/assets/images/components/collapse_differential_pressures.svg',
    description: `The Collapse Differential Pressure PLOT display the difference between <i><b>internal</b></i> and <i><b>external</b></i> pressure profiles of all
    selected <b>STANDARD</b> and <b>CUSTOM COLLAPSE</b> load cases for the current String. This can be shown in <b>MD</b> or <b>TVD</b> and
    switched between graphical and tabular data format.`,
    defaultWidth: 4.2,
    defaultHeight: 3.6,
    is1CD: true,
    isDWP: true,
    isReportComponent: true,
    categories: ['Casing Design']
  }

From my understanding, the most important part is the views array and application name. After that, you just need to specify the same clientID when listening to the socket, and the data will magically? appear. This is how I structured the calls for the particular user story, please refer to https://gitlab.com/ds365ai/DSWC/dwp-core/-/merge_requests/4705/diffs for more details.

this.subscriptions.push(this.dataService.CallCalculation(newEdtOptionObject)
    .pipe(
        switchMap(() => {
            return this.dataService.getCalculations(newEdtOptionObject.clientID);
        })
    )
    .subscribe(
        (res: any) => {});

Creating a new component in DWP​

For this task, we needed to extract and build upon some existing logic in the load-casing-summary-table.component. But since it was to be reused over multiple components or charts, we opted to create a new component for this logic. Here follows some of my learnings that could be nice in case someone needs to do so in the futher.

Steps to follow​

  • first; create the component with ts, css, html files. We decided to create it in dwp-core, and then import it in dwp-well-design project since that seems to be the norm. Could not find examples where components from other projects are imported into core project.
  • Create a .module.ts file for the component in same directory, which declare and export the new component. Also make an empty export class blablaModule {}.
  • If it doesn't exist, create an index.ts file in parent folder. In this case this was projects/dwp-core/src/lib/edt/modules/editor/components/stress-check/casing-string-header/index.ts. In this file you need to export both the Component and corresponding module.
  • Moreover, add Module component to dwp-core.module.ts to the imports array.
  • Lastly; if not already there, add index to export list in projects/dwp-core/src/public_api.ts.
  • In the project where you want to reuse it; add the Module component to imports array of projects/{project}/src/lib/{project}.module.ts and as normal import it where you want to use it.
Connecting...