eLabSDK2.Journal.Experiment.ExperimentDetail

Hierarchy

Experiment

↳ ExperimentDetail

Implements

unknown

Methods

addTab

Static addTab(tabConfig): void

Add a custom tab to the experiment detail page.

Displays a custom tab on the experiment detail page. The tab can render content
in two modes:

'table': Renders data in a paginated table layout using SDKTableConfig
'custom': Allows custom HTML injection for fully customized content

If a tab with the same ID already exists, it will be updated with the new configuration.

Parameters

Name	Type	Description
`tabConfig`	`SDKCustomTab`	{ id: string, title: string, type: 'table' \| 'custom', content: SDKTableConfig \| string }

Returns

void

Example

// Add a table tab with paging
eLabSDK2.Journal.Experiment.ExperimentDetail.addTab({
    id: 'custom-results-tab',
    title: 'Analysis Results',
    type: 'table',
    content: {
        columns: ['ID', 'Sample Name', 'Result'],
        data: [
            [1, 'Sample A', 'Pass'],
            [2, 'Sample B', 'Fail']
        ],
        paging: {
            showPager: true,
            currentPage: 1,
            recordCount: 25,
            totalCount: 100,
            handlePage: (recordsPerPage, currentPage) => {
                console.log(`Loading page ${currentPage}`);
            }
        }
    }
});

addTopNotice

Static addTopNotice(notice): void

Add a notice box to the top of an experiment detail page.

Displays a customizable notice at the top of the experiment detail page to highlight
important information, warnings, or alerts to users viewing the experiment.

Parameters

Name	Type	Description
`notice`	`BoxNotice`	{ id: string, type: string, contents: string, icon: string }

Returns

void

Example

eLabSDK2.Journal.Experiment.ExperimentDetail.addTopNotice({
    id: 'custom-warning',
    type: 'warning',
    contents: 'This experiment requires review before proceeding.',
    icon: 'fas fa-exclamation-triangle'
});

getExperiment

Static getExperiment(): any

Get the details of the currently loaded experiment.

Retrieves the experiment data from the Apollo cache. This data is available
after the experiment detail page has loaded and the GraphQL query has completed.

Note: This method only works in the rebuilt Journal experiment detail pages.
It is not available in the legacy
experiment browser or other legacy Journal pages.

Returns

any

The experiment data object, or null if no experiment is loaded.

Example

const experiment = eLabSDK2.Journal.Experiment.ExperimentDetail.getExperiment();
if (experiment) {
    console.log('Experiment name:', experiment.name);
    console.log('Experiment ID:', experiment.id);
    console.log('Status:', experiment.status?.name);
}

getExperimentId

Static getExperimentId(): number

Retrieve the experiment ID of the experiment currently loaded in the
experiment detail page (if any).

Note: This method only works in the rebuilt Journal experiment detail pages.
It is not available in the legacy
experiment browser or other legacy Journal pages.

Returns

number

The experiment ID, or null if no experiment is loaded.

Example

const experimentId = eLabSDK2.Journal.Experiment.ExperimentDetail.getExperimentId();
if (experimentId) {
    console.log('Current experiment ID:', experimentId);
}

getExperimentName

Static getExperimentName(): string

Retrieve the name of the experiment currently loaded in the
experiment detail page (if any).

Note: This method only works in the rebuilt Journal experiment detail pages.
It is not available in the legacy
experiment browser or other legacy Journal pages.

Returns

string

The experiment name, or null if no experiment is loaded.

Example

const experimentName = eLabSDK2.Journal.Experiment.ExperimentDetail.getExperimentName();
if (experimentName) {
    console.log('Current experiment:', experimentName);
}

onExperimentPageReady

Static onExperimentPageReady(callback): void

This event fires after the experiment detail page has completed rendering all sections,
including the experiment header, sections, comments, and sidebar. Use this to perform
actions that require the DOM to be fully available, such as attaching event listeners,
manipulating page elements, initializing third-party libraries, or triggering workflows
based on the rendered experiment content.

Parameters

Name	Type	Description
`callback`	() => `void`	Function to execute when the experiment page is rendered.

Returns

void

Example

// Initialize custom features after page render
eLabSDK2.Journal.Experiment.ExperimentDetail.onExperimentPageReady(() => {
  console.log('Experiment page rendered');
  initializeCustomSectionFeatures();
  highlightImportantSections();
});

Example

// Attach event listeners after render
eLabSDK2.Journal.Experiment.ExperimentDetail.onExperimentPageReady(() => {
  document.querySelectorAll('.experiment-section').forEach(section => {
    section.addEventListener('click', handleSectionClick);
  });
});

Example

// Display notification after page loads
eLabSDK2.Journal.Experiment.ExperimentDetail.onExperimentPageReady(() => {
  const experimentStatus = window.Experiment.status;
  if (experimentStatus === 'REVIEW_PENDING') {
    eLabSDK2.UI.Toast.showToast('This experiment is pending review', 3000);
  }
});

Overrides

Experiment.onExperimentPageReady

registerAction

Static registerAction(action): void

This adds a custom action button to the experiment detail page, typically in the actions
toolbar or menu. Actions can be used to perform operations on the experiment, trigger
custom workflows, open dialogs, export data, or integrate with external systems. The action
visibility can be controlled conditionally using the showCondition function.

Parameters

Name	Type	Description
`action`	`Action`	{ id: string, label: string, onClick?: () => void, icon?: string, isVisible?: () => boolean, showCondition?: () => boolean }

Returns

void

Example

// Register a custom export action
eLabSDK2.Journal.Experiment.ExperimentDetail.registerAction({
  id: 'export-custom',
  label: 'Export to LIMS',
  icon: 'fas fa-file-export',
  onClick: async () => {
    const experimentId = window.Experiment.experimentID;
    await exportToExternalLIMS(experimentId);
    eLabSDK2.UI.Toast.showToast('Exported successfully', 2000);
  },
  showCondition: () => {
    return window.Experiment.status === 'COMPLETED';
  }
});

Example

// Register action with visibility control
eLabSDK2.Journal.Experiment.ExperimentDetail.registerAction({
  id: 'generate-report',
  label: 'Generate Report',
  icon: 'fas fa-file-pdf',
  onClick: () => {
    generateExperimentReport();
  },
  isVisible: () => {
    return eLabSDK2.System.User.hasPermissions('journal', ['EXPORT_EXPERIMENTS']);
  }
});