!Onyx Banner Image

Onyx Graphical User Interface

Overview

A Graphical user interface for Onyx, with functionality for browsing and filtering records/analyses, viewing their details and change history, exporting data, and a customisable dashboard for generating graphs of aggregated fields.

The Onyx GUI is currently available as an npm package under the name climb-onyx-gui, and is implemented within the Onyx JupyterLab extension, as part of the CLIMB-TRE project.

!Records in JupyterLab
!Graphs in JupyterLab
!Record in JupyterLab

Setup

$3

``
$ npm install climb-onyx-gui
`

The Onyx GUI can then be imported as a React component:

`typescript
import React from "react";
import ReactDOM from "react-dom";
import Onyx from "climb-onyx-gui";
import "climb-onyx-gui/dist/style.css";

ReactDOM.render(

httpPathHandler={httpPathHandler}
s3PathHandler={s3PathHandler}
fileWriter={fileWriter}
extVersion={extVersion}
getItem={getItem}
setItem={setItem}
setTitle={setTitle}
/>
,
document.getElementById("root")
);
`

See the JupyterLab extension for an example implementation.

$3

Clone the repository:

`
$ git clone https://github.com/CLIMB-TRE/onyx-gui
$ cd onyx-gui/
`

Copy and edit .env.local with VITE_ONYX_DOMAIN and VITE_ONYX_TOKEN for your development instance of Onyx:

`
$ cp .env.local.example .env.local
`

Install dependencies and run the development server:

`
$ npm install
$ npm run dev
``