### Install Dependencies and Setup Script

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Installs source-map-explorer package and adds analyze script to package.json. This enables bundle size analysis by examining JavaScript source maps. The analyze script targets the main JavaScript bundle in the build output.

```sh
npm install --save source-map-explorer
```

```sh
yarn add source-map-explorer
```

```json
   "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
```

--------------------------------

### Install React Styleguidist for component documentation

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Installs the React Styleguidist package, either via npm or yarn, to provide a living style guide for components. No extra configuration needed beyond adding scripts later.

```sh
npm install --save react-styleguidist
```

```sh
yarn add react-styleguidist
```

--------------------------------

### Install Dependency (npm)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Demonstrates installing a dependency like React Router using npm. This works for any library and is a standard practice in JavaScript projects.

```shell
npm install --save react-router
```

--------------------------------

### Install Dependency (yarn)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Demonstrates installing a dependency like React Router using yarn. This works for any library and is a standard practice in JavaScript projects.

```shell
yarn add react-router
```

--------------------------------

### Write Basic Jest Tests

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Demonstrates how to write a basic test using Jest's `it()` and `expect()` functions. This example assumes a `sum` function is available and tests its output. It requires Jest to be installed.

```javascript
import sum from './sum';

it('sums numbers', () => {
  expect(sum(1, 2)).toEqual(3);
  expect(sum(2, 2)).toEqual(4);
});
```

--------------------------------

### Start Styleguidist development server

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Executes the npm script that launches the Styleguidist UI for interactive component development. Requires previously added scripts in package.json.

```sh
npm run styleguide
```

--------------------------------

### Install RDKit package via pip (Bash)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/rdm_tutorial/tutorial.ipynb

Installs the RDKit chemistry toolkit, required for SM parsing and molecular property calculations used in the normalization routine.

```bash
! pip install rdkit
```

--------------------------------

### Bootstrap Storybook in a React project

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Runs the Storybook initialization command within the project directory, setting up required configuration files. Requires the Storybook CLI installed globally. Use after installation to generate starter files.

```sh
getstorybook
```

--------------------------------

### Install React Bootstrap and Bootstrap CSS

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Shows how to install React Bootstrap library and Bootstrap CSS framework using both npm and yarn package managers. The Bootstrap CSS needs to be installed separately as React Bootstrap doesn't include it.

```bash
npm install --save react-bootstrap bootstrap@3
```

```bash
yarn add react-bootstrap bootstrap@3
```

--------------------------------

### Mock localStorage for Tests

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Example of mocking the localStorage API in a test setup file. This is useful when your components interact with browser APIs that need to be controlled during testing.

```JavaScript
const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock
```

--------------------------------

### Install React Router DOM in Shell

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Installs the react-router-dom package for client-side routing in React apps. Requires Node.js and a package manager like npm or yarn. Supports basic routing examples from the React Router documentation; may need production server configuration for deployment.

```sh
npm install --save react-router-dom
```

```sh
yarn add react-router-dom
```

--------------------------------

### Install and Use jest-enzyme for Readable Matchers

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Shows how to install and import jest-enzyme to simplify test assertions with more readable matchers. The package needs to be added to your project dependencies.

```bash
npm install --save jest-enzyme
```

```bash
yarn add jest-enzyme
```

```JavaScript
import 'jest-enzyme';
```

--------------------------------

### Configure Jest to Use Setup File After Ejecting

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Manual configuration required for Jest to use a setup file if you eject from create-react-app before creating src/setupTests.js. This ensures the setup file is executed before tests.

```JavaScript
"jest": {
  // ...
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
}
```

--------------------------------

### Install NOMAD Plugin with Pip

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/cow_tutorial/Tutorial.ipynb

Installs a local NOMAD plugin in editable mode using pip. This is a prerequisite for using the plugin's functionality in the current environment. Ensure the plugin's directory structure is correct.

```python
pip install -e ./nomad-countries
```

--------------------------------

### Install Enzyme for React Component Testing

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Shows commands to install Enzyme, a JavaScript Testing utility for React, along with its adapter for React 16. This is used for shallow rendering and isolated component testing. Dependencies include Enzyme, an adapter, and React Test Renderer.

```bash
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
```

```bash
yarn add enzyme enzyme-adapter-react-16 react-test-renderer
```

--------------------------------

### Install Storybook CLI globally using npm

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Installs the Storybook command line interface globally via npm. No additional dependencies required. Run this in your terminal before initializing Storybook in a project.

```sh
npm install -g @storybook/cli
```

--------------------------------

### Install NOMAD Lab Parser

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/README.parsers.md

Install the NOMAD Lab package using pip. This package provides the core functionality for parsing computational science files and running parsers locally.

```shell
pip install nomad-lab
```

--------------------------------

### Install Prettier and Git Hooks Dependencies

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Installs husky, lint-staged, and prettier for automatic code formatting on commit. Supports both npm and yarn package managers.

```shell
npm install --save husky lint-staged prettier
```

```shell
yarn add husky lint-staged prettier
```

--------------------------------

### Install PubChem Package for Chemical Standardization

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/rdm_tutorial/tutorial.ipynb

Installs the pubchempy library for chemical compound name standardization. This package provides access to PubChem database for converting chemical names to standardized IUPAC names or synonyms.

```python
! pip install pubchempy
```

--------------------------------

### Static File Server with Serve

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Installs and runs serve package to host static build files. This lightweight solution automatically handles routing and serves the application on port 5000 by default. The -s flag enables single-page application mode for client-side routing.

```sh
npm install -g serve
```

```sh
serve -s build
```

```sh
serve -h
```

--------------------------------

### Configure Enzyme Adapter for React 16

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Sets up Enzyme to work with React 16 by configuring the appropriate adapter. This is typically done in a setup file that runs before your tests.

```JavaScript
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
```

--------------------------------

### Code Splitting (JavaScript)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Illustrates code splitting using dynamic `import()`, which allows loading code chunks on demand. The example demonstrates importing `moduleA.js` when a button is clicked, loading it as a separate chunk.

```javascript
const moduleA = 'Hello';

export { moduleA };
```

```javascript
import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}

export default App;
```

--------------------------------

### Instantiate NOMAD schema with data and units

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/cow_tutorial/Tutorial.ipynb

Shows how to create instances of schema classes by passing data to the constructor and setting additional quantities. Demonstrates unit conversion using the ureg unit registry for proper physical unit handling.

```python
from nomad.units import ureg

example = Country(
    name='Germany',
    population=82422299
)
example.area = area=357021 * ureg('mi^2')

example.m_to_dict()
```

--------------------------------

### Create and Initialize System Data

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/nomad/metainfo/README.md

Demonstrates how to create Run and System objects, initialize atom positions, cell parameters, and access derived quantities. Shows how automatic derivation works for species and atom count.

```python
from nomad.metainfo.common import Run, System

run = Run()

system = run.systems.create(atom_labels=['H', 'H', 'O'])
system.atom_positions = [[0, 0, 0], [1, 0, 0], [0.5, 0.5, 0]]
system.cell = [[1, 0, 0], [0, 1, 0], [0, 0, 1]]
system.pbc = [False, False, False]

print(system.atom_species)  # [1, 1, 96]
print(system.lattice_vectors)
print(system.n_atoms)

print(run.m_to_json(indent=2))
```

--------------------------------

### Create EntryArchive and run normalization manually (Python)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/rdm_tutorial/tutorial.ipynb

Demonstrates constructing a NOMAD EntryArchive with a TADFMolecule instance, initializing a logger, invoking the normalize method, and outputting the resulting data as a dictionary.

```python
from nomad.datamodel.datamodel import EntryArchive
import logging
logger = logging.getLogger(__name__)

archive = EntryArchive(
    data=TADFMolecule(
        smile='CN1C=NC2=C1C(=O)N(C(=O)N2C)C',
        DOI_number="10.1021/jp5126624"
    )
)
archive.data.normalize(archive, logger)
JSON(archive.data.m_to_dict())
```

--------------------------------

### Install npm-run-all for Parallel Script Execution

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Install npm-run-all using npm or yarn to run multiple scripts in parallel, such as watch-css with start-js. This package provides cross-platform support for concurrent execution, which is necessary since there's no built-in way to run scripts in parallel. It integrates Sass building into the default start and build commands.

```sh
npm install --save npm-run-all
```

```sh
yarn add npm-run-all
```

--------------------------------

### Set Start URL in Web App Manifest for SPA Routing

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Adjust the start_url in manifest.json to ensure proper handling of client-side routing when the app is installed to the homescreen. This sets the root to the current directory for routers expecting service from /. No additional dependencies beyond the manifest file; outputs a shortcut to the app root. Limitation: Only affects homescreen installs and requires manifest editing.

```json
  "start_url": ".",
```

--------------------------------

### Add documentation and links to schema quantities

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/cow_tutorial/Tutorial.ipynb

Enhances schema definitions by adding natural language descriptions to quantities and section definitions. Includes external resource links for better user understanding and data context.

```python
from nomad.metainfo import Section


class Country(Schema):
    ''' This section represents a country of the world. '''
    m_def = Section(links=[
        'https://www.kaggle.com/datasets/fernandol/countries-of-the-world'])

    name = Quantity(
        type=str,
        description='The country\'s name.')
    population = Quantity(
        type=np.int32,
        description='The country\'s population.')
    area = Quantity(
        type=np.float64, unit='km^2',
        description='The are of the country.')
```

--------------------------------

### Run Jest tests in debug mode via npm

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Executes the previously defined `test:debug` script, launching Jest with the Node inspector attached. Use this command in a terminal to start debugging. Works on any platform with npm installed.

```Shell
$ npm run test:debug
```

--------------------------------

### Add Styleguidist scripts to package.json

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Modifies the project's package.json to include commands for running and building the Styleguidist server. Use a diff or manual edit to insert the 'styleguide' and 'styleguide:build' scripts.

```diff
   "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
     "start": "react-scripts start",

```

--------------------------------

### Set Up Development Environment

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/README.parsers.md

Create and activate a virtual environment for parser development. This ensures dependencies are isolated and prevents conflicts with system-wide Python packages.

```shell
pip install virtualenv
virtualenv -p `which python3` .pyenv
source .pyenv/bin/activate
```

--------------------------------

### Execute schema normalization in Python

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/cow_tutorial/Tutorial.ipynb

Demonstrates how to instantiate a schema with data and run the normalize method to compute derived fields. Requires unit-aware quantities via ureg for proper calculation. Outputs results in dictionary format.

```python
example = Country(
    name='Germany',
    population=82422299,
    area=(357021 * ureg('mi^2'))
)

example.normalize(None, None)
example.m_to_dict()
```

--------------------------------

### Initialize Firebase Hosting Project

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Use the Firebase CLI to initialize hosting for a React project, associating it with a Firebase account, setting up database rules, and configuring the build directory as public with single-page app rewrite. Requires npm, Firebase CLI, and a Firebase account.

```sh
    === Project Setup

    First, let's associate this project directory with a Firebase project.
    You can create multiple project aliases by running firebase use --add,
    but for now we'll just set up a default project.

    ? What Firebase project do you want to associate as default? Example app (example-app-fd690)

    === Database Setup

    Firebase Realtime Database Rules allow you to define how your data should be
    structured and when your data can be read from and written to.

    ? What file should be used for Database Rules? database.rules.json
    ✔  Database Rules for example-app-fd690 have been downloaded to database.rules.json.
    Future modifications to database.rules.json will update Database Rules when you run
    firebase deploy.

    === Hosting Setup

    Your public directory is the folder (relative to your project directory) that
    will contain Hosting assets to uploaded with firebase deploy. If you
    have a build process for your assets, use your build's output directory.

    ? What do you want to use as your public directory? build
    ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
    ✔  Wrote build/index.html

    i  Writing configuration info to firebase.json...
    i  Writing project information to .firebaserc...

    ✔  Firebase initialization complete!
```

--------------------------------

### Execute parsing and normalization pipeline

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/cow_tutorial/Tutorial.ipynb

Runs complete parsing pipeline including file reading, archive population, and data normalization. Uses NOMAD client utilities to create archive and normalize all schema instances. Outputs final processed data in JSON format.

```python
from nomad.datamodel import EntryMetadata

archive = EntryArchive(metadata=EntryMetadata())
parse('raw_data/Germany.data.txt', archive, None)

JSON(archive.m_to_dict())
```

```python
from nomad.client import normalize_all

normalize_all(archive)

JSON(archive.m_to_dict())
```

--------------------------------

### WebSocket Proxy Configuration in package.json

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Sets up a WebSocket proxy in package.json. Requires a compatible WebSocket server and uses the 'ws' option to indicate WebSocket proxying.

```json
{
  "proxy": {
    "/socket": {
      "target": "ws://<socket_url>",
      "ws": true
    }
  }
}
```

--------------------------------

### Install Parser in Development Mode

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/README.parsers.md

Clone the parser project from a Git repository and install it in development mode. This allows changes to the parser code to be immediately reflected without reinstalling.

```shell
git clone $parserGitUrl$ $gitPath$
pip install -e $gitPath$
```

--------------------------------

### Write and Read Data with NOMAD Backend - Python

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/nomad/metainfo/README.md

Demonstrates the write interface for populating a NOMAD archive resource and the read interface for retrieving entered properties. It shows how to create a 'run' and 'system' object, set atom labels and positions, and close resources. It also illustrates reading back atom labels.

```python
run = backend.run()
system = run.system()
system.atom_labels.values = ['Ti', 'O', 'O']
system.atom_positions.values = [a1, a2, a3]
system.close()
system = run.system()
# ...
resource.close()
```

```python
system.atom_labels.values = ['Ti', 'O', 'O']
system.atom_labels.values
```

--------------------------------

### Enable HTTPS in Create React App (Powershell)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

This snippet shows how to enable HTTPS when starting a Create React App project on Windows using Powershell. It sets the HTTPS environment variable to true and starts the development server.

```Powershell
($env:HTTPS = $true) -and (npm start)
```

--------------------------------

### Enable HTTPS in Create React App (Bash)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

This snippet shows how to enable HTTPS when starting a Create React App project on Linux or macOS using Bash. It sets the HTTPS environment variable to true and starts the development server.

```Bash
HTTPS=true npm start
```

--------------------------------

### Create EntryArchive and run normalization to serialize results (Python)

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/rdm_tutorial/tutorial.ipynb

Instantiates an EntryArchive with a TADFMolecule containing a SMILES string, calls the custom normalize method, and converts the populated results section to a JSON-compatible dictionary. Demonstrates end‑to‑end usage of the normalization routine within the NOMAD framework.

```python
archive = EntryArchive(
    data=TADFMolecule(
        smile='CN1C=NC2=C1C(=O)N(C(=O)N2C)C',
        DOI_number="10.1021/jp5126624"
    )
)archive.data.normalize(archive, logger)
JSON(archive.results.m_to_dict())

```

--------------------------------

### Create Nomad resources for data access

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/nomad/metainfo/README.md

Demonstrates how to use the nomad package to create different types of resources for data handling. Supports parsing files, opening local archives in JSON/HDF5 formats, connecting to MongoDB databases, and accessing remote REST APIs. All resources provide a consistent interface for data navigation and modification.

```python
nomad.parse('vasp_out.xml')
nomad.open('archive.json')
nomad.open('archive.hdf5')
nomad.connect('mongodb://localhost/db_name', 'calculations')
nomad.connect('https://nomad.fairdi.eu/archive/3892r478323/23892347')
```

--------------------------------

### Install node-sass-chokidar for Sass Processing

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Install the Sass command-line interface using npm or yarn to enable SCSS compilation in the React project. This package resolves performance issues, infinite compiling, and file detection problems associated with node-sass, especially in virtual machines or Docker. It processes SCSS files in the src directory and outputs corresponding CSS files.

```sh
npm install --save node-sass-chokidar
```

```sh
yarn add node-sass-chokidar
```

--------------------------------

### Integrate Sass into Start and Build Scripts with npm-run-all

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/gui/README.md

Update package.json scripts to run CSS preprocessing alongside React scripts using npm-run-all for parallel execution on start and sequential on build. This automates Sass compilation during development and production builds. Separate JS-specific scripts (start-js, build-js) allow clean integration without altering core react-scripts.

```json
{
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

--------------------------------

### Define basic NOMAD schema with quantities

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/cow_tutorial/Tutorial.ipynb

Creates a basic schema class inheriting from Schema with various quantity types including string, integer, and floating-point numbers with units. Demonstrates the fundamental building blocks of NOMAD schema definitions.

```python
from nomad.metainfo import Quantity
from nomad.datamodel import Schema
import numpy as np


class Country(Schema):
    name = Quantity(type=str)
    population = Quantity(type=np.int32)
    area = Quantity(type=np.float64, unit='km^2')
```

--------------------------------

### Programmatic Parsing and Normalization with NOMAD Client

Source: https://github.com/fairmat-nfdi/nomad/blob/develop/examples/data/cow_tutorial/Tutorial.ipynb

Demonstrates how to use the NOMAD client library to parse a data file and normalize its contents. It takes a file path as input, returns an archive object, and then normalizes it. The output is then displayed as JSON.

```python
from nomad.client import parse, normalize_all
from IPython.display import JSON

archive = parse('raw_data/Germany.data.txt')[0]
normalize_all(archive)

JSON(archive.m_to_dict())
```