Skip to content

Commit

Permalink
Reorganize READMEs in the monorepo (#551)
Browse files Browse the repository at this point in the history
  • Loading branch information
paulsmirnov authored Aug 21, 2024
1 parent fa60029 commit 085c739
Show file tree
Hide file tree
Showing 9 changed files with 215 additions and 83 deletions.
80 changes: 55 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,43 +1,73 @@
# Miew – 3D Molecular Viewer

> ⚠ It seems that experiments over recent years have led to application instability. We decided
> to step back and proceed with architectural changes slowly. We apologize for any inconvenience
> it may cause during the transition period. The old "master" branch is kept for your reference.
> This is the new "main" branch for further development 🚀

[![Build Status](https://img.shields.io/appveyor/ci/paulsmirnov/miew/main.svg)](https://ci.appveyor.com/project/paulsmirnov/miew/branch/main)
[![Build Status](https://img.shields.io/github/actions/workflow/status/epam/miew/ci.yml?label=linux)](https://github.com/epam/miew/actions?query=branch%3Amain)
[![AppVeyor Build Status](https://img.shields.io/appveyor/ci/paulsmirnov/miew/main?label=windows)](https://ci.appveyor.com/project/paulsmirnov/miew)
[![Version](https://img.shields.io/npm/v/miew)](https://www.npmjs.com/package/miew?activeTab=versions)
[![Downloads](https://img.shields.io/npm/dm/miew)](https://www.npmjs.com/package/miew?activeTab=versions)
[![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE.md)

Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)

Miew is a high performance web tool for advanced visualization and manipulation of molecular
structures.
Miew is a high performance web tool for advanced visualization and manipulation
of molecular structures. It provides a full-featured set of tools for 3D visualization and editing
of small molecules as well as large molecular complexes, including means to view, analyze,
and modify the 3D structure of a molecule.

![Screenshot](README.png)

It provides a full-featured set of tools for 3D visualization and editing of small molecules as
well as large molecular complexes, including means to view, analyze, and modify the 3D structure
of a molecule.
It works as a standalone web application or integrates as a component into your web pages.
We plan to support the [latest versions](https://browsehappy.com/)
of WebGL-enabled desktop (Chrome, Firefox, Safari, Edge) and mobile (iOS, Android) browsers.

## Project Structure

- [miew] - the core JavaScript library including docs, examples, and the demo application,
- [miew-react] - a simple React.js wrapper component,
- [miew-app] - a new demo application (work in progress).

It works as a standalone HTML5 web application or integrates as a component into
your web pages. We plan to support the [latest versions](https://browsehappy.com/) of WebGL-enabled desktop (Chrome,
Firefox, Safari, Opera, Edge) and mobile (iOS, Android) browsers.
[miew]: packages/miew#readme
[miew-react]: packages/miew-react#readme
[miew-app]: packages/miew-app#readme

You can find details on installation and usage of Miew component in the [library readme].
There is also a [demo application] available in the git repository.
## Installation and Usage

[tutorials]: docs/tutorials/embed.md
[examples]: examples/
[library readme]: packages/miew/README.md
[demo application]: https://miew.opensource.epam.com/
The demo application is available at <https://miew.app> and <https://miew.opensource.epam.com>.

## Contributing
The library is published as an npm package. The easiest way to start using the viewer
is to reference a CDN version:

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/[email protected]/lodash.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/Miew.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/Miew.min.css" />
</head>
<body>
<div class="miew-container" style="width:640px; height:480px"></div>

<script>
(function () {
var viewer = new Miew({ load: '1CRN' });
if (viewer.init()) {
viewer.run();
}
})();
</script>
</body>
</html>
```

For more details please refer to the corresponding README files ([miew] and [miew-react]).

## Contribution

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process
for submitting pull requests.

## License

[MIT](LICENSE.md)

Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)
Binary file modified README.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions packages/miew-app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# miew-app

Miew is a high performance web tool for advanced visualization and manipulation
of molecular structures.

The `miew-app` package is an attempt to recreate a demo application using React.js.
Please refer to the topmost [README][] for an overview of the entire project.

[README]: https://github.com/epam/miew#readme

![Screenshot](README.png)

## Contribution

Please read [CONTRIBUTING.md](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.

## License

[MIT](../../LICENSE.md)

Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)
Binary file added packages/miew-app/README.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 42 additions & 21 deletions packages/miew-react/README.md
Original file line number Diff line number Diff line change
@@ -1,49 +1,70 @@
# miew-react

[![npm version](https://img.shields.io/npm/v/miew-react)](https://www.npmjs.com/package/miew-react)
[![Downloads](https://img.shields.io/npm/dm/miew-react)](https://www.npmjs.com/package/miew-react)
[![License](https://img.shields.io/badge/MIT%20-blue.svg)](https://opensource.org/licenses/MIT)
[![Version](https://img.shields.io/npm/v/miew-react)](https://www.npmjs.com/package/miew-react?activeTab=versions)
[![Downloads](https://img.shields.io/npm/dm/miew-react)](https://www.npmjs.com/package/miew-react?activeTab=versions)
[![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE.md)

Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)

Miew is a high performance web library for advanced visualization and manipulation of molecular structures.

For more details please look at the following [link](https://github.com/epam/miew).
Miew is a high performance web tool for advanced visualization and manipulation
of molecular structures.

The miew-react package contains only the functionality necessary to define components. It is used together with [miew](https://www.npmjs.com/package/miew).
The `miew-react` package contains only a React.js wrapper component.
Please refer to the topmost [README][] for an overview of the entire project.

## Installation
[README]: https://github.com/epam/miew#readme

The miew-react library is available as an [NPM](https://www.npmjs.com/) package. Install it either with NPM:
![Screenshot](README.png)

```sh
npm install --save miew-react
```
## Installation and Usage

or [Yarn](https://yarnpkg.com/):
The component is available as an [npm package](https://www.npmjs.com/package/miew-react).

```sh
yarn add miew-react
npm i --save miew-react
```

## Usage
index.jsx

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Viewer from 'miew-react';

const MyComponent = () => {
return <Viewer />;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Viewer options={{ load: '1crn' }} />
</React.StrictMode>,
);
```

index.html (e.g., using Vite)

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="root" style="width:640px; height:480px"></div>
<script type="module" src="index.jsx"></script>
</body>
</html>
```

### Props

Imported component accepts the following optional props:
The component accepts the following optional props:

- **onInit**: a callback function which recieves an instance of Miew, and called after initialization of Miew instance inside the Viewer component. With a help of this prop you can access Miew methods and fields.
- **options**: an object containing representation settings for Miew and initial structure to be shown (all the fields are also optional, when not provided, default settings are applied)
- **theme**: ignored

## Contribution

Please read [CONTRIBUTING.md](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.

## License

[MIT](LICENSE.md)

Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)
Binary file added packages/miew-react/README.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions packages/miew/LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License

Copyright (c) 2015-2024 [EPAM Systems, Inc.](https://www.epam.com/)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
113 changes: 76 additions & 37 deletions packages/miew/README.md
Original file line number Diff line number Diff line change
@@ -1,65 +1,104 @@
# Miew – 3D Molecular Viewer
# miew

[![Build Status](https://img.shields.io/appveyor/ci/paulsmirnov/miew/main.svg)](https://ci.appveyor.com/project/paulsmirnov/miew/branch/main)
[![Version](https://img.shields.io/npm/v/miew)](https://www.npmjs.com/package/miew?activeTab=versions)
[![Downloads](https://img.shields.io/npm/dm/miew)](https://www.npmjs.com/package/miew?activeTab=versions)
[![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE.md)

Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)
Miew is a high performance web tool for advanced visualization and manipulation
of molecular structures.

Miew is a high performance web library for advanced visualization and manipulation of molecular
structures.
The `miew` package is the core JavaScript library that implements the functionality.
Please refer to the topmost [README][] for an overview of the entire project.

![Screenshot](README.png)
[README]: https://github.com/epam/miew#readme

It provides a full-featured set of tools for 3D visualization and editing of small molecules as
well as large molecular complexes, including means to view, analyze, and modify the 3D structure
of a molecule. It integrates as a component into your web pages.
![Screenshot](README.png)

## Installation and Usage

Miew library is available as an [NPM] package. Install it either with NPM:

```sh
npm install --save miew
Miew library is available as an [npm package](https://www.npmjs.com/package/miew).
It provides both UMD and ES2015 modules, so can be included in a SCRIPT tag via a CDN
or built with a bundler of your choice. For more details refer to:

- [tutorials](docs/tutorials/),
- [examples](examples/).

### SCRIPT tag

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/[email protected]/lodash.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/Miew.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/Miew.min.css" />
</head>
<body>
<div class="miew-container" style="width:640px; height:480px"></div>

<script>
(function () {
var viewer = new Miew({ load: '1CRN' });
if (viewer.init()) {
viewer.run();
}
})();
</script>
</body>
</html>
```

or [Yarn]:
### Webpack

Install using npm:

```sh
yarn add miew
npm i --save miew
```

Then use it in your [Webpack] / [Browserify] / [Rollup] setup, or just test it right in the Node
environment.
index.js

```js
var Miew = require('miew');
console.log(Miew.VERSION);
import Miew from 'miew';
import './index.css';

window.onload = function () {
var viewer = new Miew({ load: '1CRN' });
if (viewer.init()) {
viewer.run();
}
};
```

You may also download the [minified library](dist/Miew.min.js) and access it from the browser's
`<SCRIPT>` tag, or asynchronously include it via [Require.js]. Refer to the [tutorials],
[examples] and API docs for more `details`.
index.css

There is also a [demo application] available in the git repository.

[tutorials]: docs/tutorials/embed.md
[examples]: examples/
[demo application]: https://miew.opensource.epam.com/
```css
@import 'miew';
```

[Require.js]: http://requirejs.org/
[Webpack]: https://webpack.js.org/
[Browserify]: http://browserify.org/
[Rollup]: https://rollupjs.org/
[Node.js]: https://nodejs.org/
[NPM]: https://www.npmjs.com/
[Yarn]: https://yarnpkg.com/
index.html

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="./dist/main.js"></script>
</head>
<body>
<div class="miew-container" style="width:640px; height:480px"></div>
</body>
</html>
```

## Contributing
## Contribution

Please read [CONTRIBUTING.md](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
Please read [CONTRIBUTING.md](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.

## License

[MIT](../../LICENSE.md)
[MIT](LICENSE.md)

Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)
Binary file modified packages/miew/README.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 085c739

Please sign in to comment.