{"id":40042743,"url":"https://github.com/martin-sicho/genui-gui","last_synced_at":"2026-01-19T05:08:55.639Z","repository":{"id":43032960,"uuid":"258440093","full_name":"martin-sicho/genui-gui","owner":"martin-sicho","description":"GenUI frontend application. It provides a GUI to the GenUI REST API web services.","archived":false,"fork":false,"pushed_at":"2023-09-04T13:44:37.000Z","size":25697,"stargazers_count":15,"open_issues_count":7,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-10-20T21:39:25.595Z","etag":null,"topics":["cheminformatics","data-science","gui","molecular-generation","qsar","react","visualization","webapp"],"latest_commit_sha":null,"homepage":"https://martin-sicho.github.io/genui/docs/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martin-sicho.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-04-24T07:33:12.000Z","updated_at":"2023-10-20T21:39:27.142Z","dependencies_parsed_at":"2023-02-08T04:31:12.066Z","dependency_job_id":"b9c55d36-a30b-43ec-bc0e-75b9bff4e442","html_url":"https://github.com/martin-sicho/genui-gui","commit_stats":null,"previous_names":[],"tags_count":3,"template":null,"template_full_name":null,"purl":"pkg:github/martin-sicho/genui-gui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martin-sicho%2Fgenui-gui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martin-sicho%2Fgenui-gui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martin-sicho%2Fgenui-gui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martin-sicho%2Fgenui-gui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martin-sicho","download_url":"https://codeload.github.com/martin-sicho/genui-gui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martin-sicho%2Fgenui-gui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28561842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T03:31:16.861Z","status":"ssl_error","status_checked_at":"2026-01-19T03:31:15.069Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cheminformatics","data-science","gui","molecular-generation","qsar","react","visualization","webapp"],"created_at":"2026-01-19T05:08:47.832Z","updated_at":"2026-01-19T05:08:55.634Z","avatar_url":"https://github.com/martin-sicho.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/preview.png\"/\u003e\n\u003c/p\u003e\n\n# About\n\nThis is the GenUI frontend application. It provides\na GUI to the [GenUI REST API web services](https://github.com/martin-sicho/genui/).\nIt is based on [Vibe](https://github.com/NiceDash/Vibe) (v1.0.2),\na neat [React.js](https://reactjs.org/) dashboard built with [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/).\nYou can see it in action by deploying the [GenUI Docker Images](https://martin-sicho.github.io/genui/docs/usage/install/docker.html).\n\n## Quick Start\n\n- Install dependencies by running `yarn` or `npm install`.\n- Run `yarn start` or `npm run start` to start the local dev server.\n\nThe development server will look for the GenUI backend service running\nat `http://localhost:8000` and it will use REST API endpoints found under \n`http://localhost:8000/api/`.\n\n## Documentation\n\nThe GenUI/Vibe dashboard is based on [Create React App](https://create-react-app.dev/). \nFollow the documentation there for an introduction of the development environment.\n\n## The Layout\n\nThe basic dashboard layout is defined in `./src/views/layouts/DashboardLayout.js`. \nYou can modify parts of the Vibe layout with the following code:\n\nPart | Modification\n--- | ---\nCSS | Sass files can be found in `./src/vibe/scss`. Update `./src/vibe/scss/components/vars.scss` to change global styles.\nResponsivity | Configure the switch between mobile and desktop layout with the constant `MOBILE_SIZE`\nLogo | Change file `./src/assets/images/vibe-logo.svg` or import a different `Logo`\nChat | Enable/Disable it by default by setting the initial state of `showChat1`\nHeader | Change function component `HeaderNav`.\nFooter | Change the `\u003cFooter\u003e` part in the `render()` function of DashboardLayout.\nMenu | See below.\n\n### Creating a new page\n\n1. Create your page as component in the folder `./src/views/pages`. (You can actually create these components anywhere you wish, this is just a recommendation.)\n1. Add your component to the `pageList` array in `./src/views/index.js`.\n1. Call it by opening the route you've chosen. You can use the `Route` component\n(see [Routes documentation](https://reacttraining.com/react-router/web/api/Route/exact-bool))  \nof [react-router-dom](https://reacttraining.com/react-router/web/guides/quick-start).\n\n### Creating a menu entry\n\nAll pages are accessible by their routes, but only pages added to \nthe `nav` state property of `DashboardLayout` \nshow up on the sidebar menu. There are two menus available to fill: `top` and `bottom`.\n\nEvery top level menu entry can either be a top level button or a folder with a single level of child entries.\n\nKey | Value\n--- | ---\n`name` | Display name of the menu entry\n`icon` | (Optional) Icon prefixed to the display name. The correct item gets autoloaded by Vibe. ([react-feather](https://www.npmjs.com/package/react-feather) is used for icons.\n`url` | (Optional) Either a relative URL to the target page or an absolute URL to an external page (For linked menu entries. Make sure relative URLs start with a slash, i.e. `/home`)\n`external` | (Optional) Set to `true` if the `url` points to an external page.\n`target` | (Optional) Set to `_blank` if you want the link to an external page to open in a new window.\n`children` | (Optional) Child entries as array (For folder menu entries)\n`divider` | (Optional) Inserts a visual divider if set to true (Use this instead of a menu entry)\n\n*Note:* If you wish menus to be expanded by default, you have to change the initial state of `open` in `./src/vibe/components/SidebarNav/components/NavDropdownItem.js`.\n\n### Using Bootstrap / reactstrap\n\nVibe is using the Bootstrap-for-React library [reactstrap](https://reactstrap.github.io/). \nFollow the [components documentation](https://reactstrap.github.io/components/) for using them \nin a Vibe Dashboard.\n\nNote that Vibe overwrites the default Bootstrap styles in `./src/vibe/scss/components/`.\n\nCustom Vibe components are in the `./src/vibe/components/` directory.\n\n### Using Feather icons\n\nVibe is using [react-feather](https://www.npmjs.com/package/react-feather) for its icons.\n\nA nice overview over all available icons can be found on \u003chttps://feathericons.com/\u003e.\n\n*Note:* In order to use a Feather icon in react, convert the name to camel case. (I.e. `alert-circle` becomes `AlertCircle`).\n\n## Custom GenUI Components\n\nThe original library of components defined in the Vibe dashboard was extended with \ncustom reusable components designated to be used in GenUI. You can import\nthose components from the package located in [`./src/genui/`](./src/genui/). You can find \nthe package with the original Vibe components in [`./src/vibe`](./src/vibe). \n\nIf you want to expand the GUI, \nyou should take a look at the currently defined pages \nof the dashboard in [`./src/views/pages`](./src/views/pages). You should define \nyour pages there and import the required components from [`./src/genui/`](./src/genui/) or [`./src/vibe`](./src/vibe).\n\n# License\n\nAll source code available here is distributed under [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartin-sicho%2Fgenui-gui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartin-sicho%2Fgenui-gui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartin-sicho%2Fgenui-gui/lists"}