open-index/open-npm huggingface dataset:
npm package: @semiorbit/api-central
Description: A set of functions for preparing http requests and calling Api
Author: Ibrahim Khalil Khalbous
Latest version: 1.0.2

# Semiorbit API Central

A set of javascript functions for:

* Wrapping axios methods.
* Preparing http urls.
* Preparing request parameters.
* Preparing request form data.
* Preparing blob data to be sent to API.
* Sending requests to API.


### Config

On project startup define axios instance to be used.

```javascript
ApiCentralConfig.setAxiosInstance(instance);
```

### API Central Functions

```javascript
apiUrl(apiAction, params);
```

```javascript
prepareUrlParams(params);
```

```javascript
prepareFormData(params);
```

```javascript
prepareFormDataWithBlob(params, fnList);
```

```javascript
apiCall(url, params);
```

```javascript
apiCallPost(url, params);
```

```javascript
apiCallFormData(url, params);
```

```javascript
apiCallFormDataWithBlob(url, params, fnList);
```

```javascript
apiSubmitFormPost(url, params);
```
npm package: @semiorbit/is-iphonex
Description: Checks if iPhone has a notch (iPhoneX or later...)
Author: Ibrahim Khalil Khalbous
Latest version: 1.0.2

# Semiorbit isIphoneX

Detect if device is an iphone(X, or later) with a notch.

## Install

```shell
npm i @semiorbit/is-iphonex
```

## Usage

```javascript
import React from 'react';
import isIphoneX from '@semiorbit/is-iphonex';

const Test = props => {

    return (
        <div className={isPhoneX ? styles.ContainerX : styles.Container}>
            My Componenet
        </div>
    );
    
};

export default Test;
```

## License

MIT
npm package: @semiorbit/ispinner
Description: A simple react spinner like iOS UIActivityIndicatorView.
Author: Ibrahim Khalil Khalbous
Latest version: 1.0.30

# Semiorbit iSpinner

A simple react spinner like iOS UIActivityIndicatorView. Custom size and color features have been added.

![iSpinner Preview](https://raw.githubusercontent.com/semiorbit/ispinner/main/preview.jpg)

## Usage

```javascript
import ISpinner from "@semiorbit/ispinner";

<ISpinner />

// dark background
<div className="black-div">
    <ISpinner white />
</div>

// custom color
<ISpinner color="red" large />

// custom size
<ISpinner size={40} />
```

## iSpinner Props

Property   | Type    | Default Value   | Description
-------    | ------  | ---------- | ------------
white      | boolean  | false       | White spinner for dark background
large      | boolean  | false       | Spinner large size "35px", normal size "20px"
size      | number  | null       | Spinner width and height
color      | string  | null      | Spinner color eg. "red" or "#FF0000"
animating  | boolean | true       | Animating spinner if true

Other properties are added to "ispinner" div element.

**NB.** Spinner css has been forked from this source: [Demo](https://www.cssscript.com/demo/ios-style-loading-spinner-with-pure-css-ispinner)

# Preview

![iSpinner Preview](https://raw.githubusercontent.com/semiorbit/ispinner/main/preview-ispinner.png)

# License

MIT
npm package: @semiorbit/react-ui-tools
Description: React-js Material-ui controls wrapper and other custom controls
Author: Ibrahim Khalil Khalbous
Latest version: 2.1.9

# Semiorbit React UI Tools

* A collection of wrappers for Material-ui controls [Grid, GridItem, Button, Password, Select, TextField, Checkbox]
* Custom UI controls [Section, Counter, CheckAdornment]

# useAlert()

React hook that utilize material-ui Alert component to easily prompt messages to user interface.

# Usage

```javascript

import React from 'react';
import useAlert from "@semiorbit/react-ui-tools/Alert/useAlert";

const MyView = props => {

    const alert = useAlert();

    alert.error('Connection Failed');

    return (
        <div>
            Some content here!
            <form>
                <input type="text" />
                ...etc
            </form>
            {alert.show()}
        </div>
    );
    
};

export default MyView;

```

# Reference


| Method                      | Description                                                                                    |
|-----------------------------|------------------------------------------------------------------------------------------------|
| alert.error(msg)            | Build error message                                                                            |
| alert.warning(msg)          | Build warning message                                                                          |
| alert.info(msg)             | Build info message                                                                             |
| alert.success(msg)          | Build success message                                                                          |
| alert.show()                | Output alert                                                                                   |
| alert.set(msg, severity)    | Build message and assign severity which is 'success' by default.                               |
| alert.global(msg, severity) | Assign global message that can be displayed in another component, by just calling alert.show() |
| alert.clearGlobal()         | Clear global message                                                                           |
| alert.isClosed()            | Boolean. Check if the user closed the alert.                                                   |
| alert.onClose(handler)      | Pass function or event handler to be fired when user closes alert.                             |




# useMobileView

A shortcut for useMediaQuery(theme.breakpoints.down(breakpoint)) in MUI

## Usage

```javascript

import useAlert from "@semiorbit/react-ui-tools/Containers/Grid/useAlert";

const isMobileView = useMobileView('sm');

if (isMobileView) {
 // something ...
}

```


# License

MIT
npm package: @semiorbit/section-in-view
Description: A jQuery plugin that detects if a section is in viewport
Author: Ibrahim Khalil Khalbous
Latest version: 1.0.0

# (jQuery) Section in View

A jQuery plugin that detects if a section is in viewport.
In the example below it detects if a section is in viewport and highlights 
section related link in navbar by section id.

## Usage


```javascript

$(document).ready(function () {
    
    $("section").sectionInView(
      function (sectionId) {
          // do something when section is in viewport
          // for exampe highlight related link in navbar           

          $('a[href$="'+ sectionId +'"]').closest('li').addClass('active');
      },
      function (sectionId) {
          // do something when section is out of viewport
          // for exampe remove highlight on related link in navbar 

          $('a[href$="'+ sectionId +'"]').closest('li').removeClass('active');
      },
        {
            offset: 200 // default
        }  
    );
    
});

```

```HTML
<body>
<nav>
    <menu>
        <li class="active">
            <a href="#home">Home</a>
        </li>
        <li>
            <a href="#about">About</a>
        </li>
        <li>
            <a href="#contacts">Contacts</a>
        </li>
    </menu>
</nav>

<main>
    <section id="home">
        .... some data (min height should be screen height)
    </section>
    <section id="about">
        .... some data (min height should be screen height)
    </section>
    <section id="contacts">
        .... some data (min height should be screen height)
    </section>
</main>
</body>
```

## Reference

| Parameter             | Description |
|-----------------------|-------------|
| funcInView(sectionId) | Fired when section is in viewport |
| funcOutOfView(sectionId) | Fired when section is out of viewport |
| Options | {offset: 200} A span to start considering section top is in view |

## License

MIT

by Semiorbit Solutions
npm package: @semiotic-labs/graph-sql
Description: Discovery and execution services API for sql enabled graph protocol subgraphs
Author: Tumay Tuzcu
Latest version: 1.0.0

<h1 align="center" style="border-bottom: none;">
graph-sql</h1>
<h3 align="center">Discovery and execution services API for sql enabled graph protocol subgraphs</h3>
<p align="center">
  <a href="https://github.com/semantic-release/semantic-release">
    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
  </a>
  <a href="https://github.com/semiotic-ai/graph-sql/actions">
    <img alt="Actions Status" src="https://github.com/semiotic-ai/graph-sql/workflows/CI/badge.svg">
  </a>
  <a href="https://github.com/semiotic-ai/graph-sql/blob/main/LICENSE">
    <img alt="License" src="https://img.shields.io/github/license/semiotic-ai/graph-sql">
  </a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/@semiotic-labs/graph-sql">
    <img alt="npm install" src="https://img.shields.io/badge/npm%20i-graph--tables-brightgreen">
  </a>
  <a href="https://github.com/semiotic-ai/graph-sql/tags">
    <img alt="version" src="https://img.shields.io/npm/v/@semiotic-labs/graph-sql?color=green&label=version">
  </a>
</p>

## Highlights
- Discovery API 
- SQL execution API
- Package include CommonJS, ES Modules, UMD version and TypeScript declaration files.

## Install

```sh
npm install @semiotic-labs/graph-sql
```

## Usage

```ts
import {createConnection} from '@semiotic-labs/graph-sql';

const connection = await createConnection(
  {
    displayName: 'Graph EBO Arbitrum'
  },
  undefined,
  true
);

 const queryresult = await connection.execute('SELECT 1;');
 
```

## Gateway API Key

SQL query execution requires API key for sql enabled gateway. Get your API keys
from https://sql.semiotic.ai .
npm package: @semioticlabs/ngx-tour-core
Description: [![Dependency Status](https://david-dm.org/isaacplmann/ngx-tour-core.svg)](https://david-dm.org/isaacplmann/ngx-tour-core) [![devDependency Status](https://david-dm.org/isaacplmann/ngx-tour-core/dev-status.svg)](https://david-dm.org/isaacplmann/ngx-tour-c
Author: Development Team
Latest version: 9.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Ngx-Tour Core
[![Dependency Status](https://david-dm.org/isaacplmann/ngx-tour-core.svg)](https://david-dm.org/isaacplmann/ngx-tour-core)
[![devDependency Status](https://david-dm.org/isaacplmann/ngx-tour-core/dev-status.svg)](https://david-dm.org/isaacplmann/ngx-tour-core?type=dev)

Check out the [documentation/demo page](https://isaacplmann.github.io/ngx-tour).

This is a product tour library built with Angular (2+).  It's inspired by [angular-ui-tour](http://benmarch.github.io/angular-ui-tour).
npm package: @semioticlabs/ngx-tour-ngx-bootstrap
Description: [![Dependency Status](https://david-dm.org/isaacplmann/ngx-tour-ngx-bootstrap.svg)](https://david-dm.org/isaacplmann/ngx-tour-ngx-bootstrap) [![devDependency Status](https://david-dm.org/isaacplmann/ngx-tour-ngx-bootstrap/dev-status.svg)](https://david-dm
Author: Development Team
Latest version: 9.0.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm package: @semizero/thread-block-detect
Description: Detect thread blocks in JS runtime
Author: Sepehr Samavati
Latest version: 1.1.0

Detect if your application needs multithreading. Simply by checking event-loop delay.

This module tries to calculate event-loop delay with the help of an interval. Since an interval is based on time and process ticks, it's easy to detect a thread block (actually event-loop thread).

Usage
```js
// Common
const { ThreadBlockDetect } = require("@semizero/thread-block-detect");
// or Module
import { ThreadBlockDetect } from "@semizero/thread-block-detect";


// parameterless
new ThreadBlockDetect();

// pass max valid amount of delay in milliseconds (default: 20)
new ThreadBlockDetect(100);

// pass callback; notice about thread blocks (delay is in milliseconds)
new ThreadBlockDetect(delay => { /* do something */ });

// pass logger; e.g. console, winston & ... (default is console)
new ThreadBlockDetect(console);

// you can also clear interval by calling `dispose`
// it's not necessary to dispose since `.unref()` will be called on interval creation if available
const instance = new ThreadBlockDetect();
instance.dispose();
```
This will detect thread blocks in the thread <ins>where it's constructed and running</ins>.


If there are thread blocks <ins>regularly</ins> or it's <ins>rare but massive</ins> (e.g. >5000ms), these are the solutions to offload tasks:
- Web workers (browsers)
- Worker threads or child process (nodejs)  
 [Piscina](https://www.npmjs.com/package/piscina) is recommended for node 16 & newer

How does it work?  
1. Get and save current time (using performance.now)
2. Initialize an interval which runs the detector every 1000ms

Detector:  
1. Get current time
2. Calculate delay (`current - previous`)
3. Check if delay is smaller or bigger than a valid delay (e.g. 20ms) because delay cannot be 0 (single-threaded runtime architecture)
4. Save current time