https://github.com/zfletch/commentary-demo
https://github.com/zfletch/commentary-demo
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/zfletch/commentary-demo
- Owner: zfletch
- License: mit
- Created: 2020-11-16T17:01:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-16T17:07:03.000Z (over 5 years ago)
- Last Synced: 2025-02-16T20:21:03.861Z (over 1 year ago)
- Language: JavaScript
- Size: 1.52 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/funding.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Treebank React
React library for displaying treebanks.
It displays treebanks visually using the [Dagre](https://github.com/dagrejs/dagre) library
as well as displaying XML and other formats.
## Demo
[https://perseids-tools.github.io/treebank-react/](https://perseids-tools.github.io/treebank-react/)
## Installation
`yarn add treebank-react`
Note that this package has the following peer dependencies:
```json
{
"react": "^16.0.0 || ^17.0.0"
}
```
(See project on [npm](https://www.npmjs.com/package/treebank-react).)
## How to use
### Demo
See the demo [App.js](/src/demo/App/App.js).
### Example
```jsx
import {
Treebank,
Sentence,
Text,
Graph,
Information,
Xml,
Collapse,
} from 'treebank-react';
import 'treebank-react/build/index.css';
const xml = '\n'
+ ' \n'
+ ' \n'
+ ' \n'
+ ' \n'
+ ' \n'
+ '';
const App = () => (
);
export default App;
```
#### Treebank
The `` component accepts treebank XML as a `treebank` prop.
The other components should be children (or grandchildren, etc.) of the `` component.
#### Sentence
The `` component accepts a string `id` which represents the `id` of the
sentence to display.
#### Graph
The `` component must be within a `` component.
It uses Dagre-d3 to display the treebank.
The height and width of the graph are determined by the parent element.
This is subject to change, but currently it expects a parent with `display: flex`.
```jsx
```
#### Information
The `` component shows the deconstructed POSTag and the lemma for the active word.
The headers are taken from the treebank configuration.
See [alpheios-project/arethusa-configs](https://github.com/alpheios-project/arethusa-configs) for more information about treebank configuration.
#### Xml
The `` component displays the XML of the sentence.
#### Collapse
The `` component is provided for convenience.
It is a button that displays or hides its children whenever it is clicked.
## Development
### Setup
```
git clone --recurse-submodules git@github.com:perseids-tools/treebank-react.git
```
or if the repository is already initialized
```
git pull --recurse-submodules
```
then install development dependencies
```
yarn install
```
### Running tests
`yarn test`
### Running demo application
`yarn start`
### Deploying demo application
`yarn deploy`
### Building
`yarn build`
### Publishing
```
yarn build
npm publish
```
(Make sure to update the `version` in `package.json` before publishing a new release.)
## Upgrading Notes
This library is build on top of [DimiMikadze/create-react-library](https://github.com/DimiMikadze/create-react-library).
To upgrade to the latest version of `create-react-library`:
* In `package.json`, everything above `devDependencies` should not be updated,
but everything below it should be replaced by the new versions in `create-react-library`.
* Add back the dependencies for the project
* All of the files in `./scripts` should be replaced with new versions in `create-react-library`.
* All of the files in `./config` should be replaced with new versions in `create-react-library`.
* Test to make sure that building and deploying demo application still work