Mephisto Review App

A template for an app that can quickly create a review UI for utilization with the mephisto review command

Table of Contents

1. Usage
2. Notes
3. Customization

Usage

1. Create a sample data.csv:

   This is good text, row1
   This is bad text, row2

2. Use create-react-app to quickly create a Review UI with this template

   npx create-react-app my-review --template mephisto-review

3. Build your react app

Change to the directory of your react app:

cd my-review

Build your app

npm run build

4. Run mephisto review in your Mephisto directory

Change directory to the location of your Mephisto installation

cd ~/path/to/your/Mephisto/installation

Make note of the paths to your data file and react app relative to the location of your Mephisto installation

$ cat ~/path/to/your/data.csv | mephisto review ~/path/to/your/my-review/build -o results.csv --all

5. Open the react app hosted at the port specified by the ouput from the above command

If Mephisto review ran correctly you should see output similar to the following on your terminal:

Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Open http://127.0.0.1:5000/ or the given URL on an internet browser

6. Review your sample data with the UI prompts

7. Press Ctrl-C in your terminal to shut down Mephisto review if it has not shut down automatically

8. View your review results in the generated results.csv

Notes

• The ID property of review items represents their 0-indexed position within the given list of review items for Mephisto review.
• If you wish to review jsonl type data, remember to add the --json flag to your Mephisto review command for proper data parsing.
• If you wish to review all items in an unordered fashion include the --all flag in your Mephisto review command
• If you wish to review all items once in an ordered fashion do not include the --all flag in your Mephisto review command

Customization

To customize the App, make modifications to the index.js file You can customize the way review items are displayed for both of the two routes in the App:

1. Customize the layout of all data:

   • Modify the properties of the <AllItemView/> tag under the / route on line 35.

   • If you do not wish to use pagination, set the pagination property to false (default is true, must be a boolean value)

   • Adjust the number of results that appear per page of review by setting the resultsPerPage property (must be an integer)

   • Add custom renderers for rendering the layout of all items by passing a itemListRenderer property to AllItemView:

     • The itemListRenderer property must be a react component.
     • The itemListRenderer component will be passed down a property of data, which represents an array of all review items.
     • The itemListRenderer component will also be passed down a property of itemRenderer which can itemListRenderer the data of a single item.
     • The itemRenderer can be placed in each of the individual item views of your itemListRenderer
     • By default the item itemListRenderer will be a header displaying the item id as well as a pre element containing the stringified JSON data of the item

   • Customize the layout of individual items in either the default itemListRenderer or your custom itemListRenderer by passing an itemRenderer property to AllItemView:

     • The itemRenderer must be a react component.
     • The itemRenderer will be passed down a property of item
     • The item property will contain the propertys of data representing the JSON data of the review item as well as an id representing the 0 indexed position of the item in the review data

2. Customize the layout of individual item views:

   • Modify the properties of the <ItemView/> tag under the / route on line 24.

   • Add custom renderers for items by passing an itemRenderer property to ItemView:

     • The itemRenderer property must be a react component.
     • The itemRenderer component will be passed down a property of item
     • The item property will contain the properties of data representing the JSON data of the review item as well as an id representing the 0 indexed position of the item in the review data