Coder Social home page Coder Social logo

farallonwest / sirix-web-frontend Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sirixdb/sirix-web-frontend

0.0 0.0 0.0 3.58 MB

A web front-end for SirixDB based on Nuxt.js/Vue.js, D3.js and Typescript

Home Page: https://sirix.io

JavaScript 48.61% Vue 42.75% TypeScript 6.44% CSS 1.29% Dockerfile 0.90%

sirix-web-frontend's Introduction

PRs Welcome All Contributors

Tweet

Follow

Join us on Slack | Community Forum

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub and another tutorial: How YOU can contribute to OSS, a beginners guide

SirixDB Web frontend - An Evolutionary, Versioned, Temporal NoSQL Document Store

Store and query revisions of your data efficiently

"Remember that you're lucky, even if you don't think you are, because there's always something that you can be thankful for." - Esther Grace Earl (http://tswgo.org)

Introduction

Discuss it in the Community Forum

This is the repository for a web frontend based on Vue.js, D3.js and TypeScript.

It'll provide several interaction possibilities to store, update and query databases in SirixDB. Furthermore the front-end will provide interactive visualizations for exploring and comparing revisions of resources stored in SirixDB based on different views.

Some ideas for comparing revisions of the XML or JSON resources, which need to be ported from a Java GUI/Processing can be found in my Master's Theses and in a Screencast.

Test and edit in Gitpod

Edit and test in Gitpod

Test and edit this project in a web based VS code environment.

Project setup

We currently face the following issue, whereas this workaround works until Nuxt.js or Element-UI fix the issue

We've created a Dockerfile and a docker-compose.yml file to simplify the setup process. However you still have to setup Keycloak as desribed in the documentation for the REST-API (especially assigning the roles to an admin-user):

In order to use docker-compose:

  1. git clone https://github.com/sirixdb/sirix-web-frontend.git
  2. Start Keyclock with the command sudo docker-compose up waitforkeycloak from your sirixdb directory with the copied docker-compose.yml file.
  3. In your browser navigate to http://127.0.0.1:8080 and click on the link "Administration Console" (if using Docker Toolbox, see below).
  4. Use username "admin", password "admin" to log in.
  5. Navigate to Clients => sirix.
  6. Set Standard Flow Enabled.
  7. Set redirect URL to http://localhost:3005/callback.
  8. Navigate to the Credentials tab and generate a new secret.
  9. Put this secret in sirix/bundles/sirix-rest-api/src/main/resources/sirix-conf.json as the value for client.secret. Make sure that the oAuthFlowType is set to AUTH_CODE
  10. Create a user: Users => Add User => Username admin. Under Credentials => New password => admin / admin. Set Temporary to off. Under Role Mappings add the 4 roles: create, delete, modify, view.
  11. Start the SirixDB HTTP-Server with the command sudo docker-compose up -d server.
  12. Start the Node.js Server without Docker: npm run dev.
  13. In your browser call http://localhost:3005 and the frontend should appear.

NOTE: For those using Docker Toolbox instead of Docker to run Keycloak and Sirix, you will need to do the following:

  1. Find your Docker IP (you should see it when starting Docker Quickstart Terminal).
  2. Go to the nuxt.config.js file, and change
proxy: {
    '/sirix': {
      target: 'https://localhost:9443',
      pathRewrite: {'^/sirix': ''},
      agent: new Agent({ rejectUnauthorized: false })
    }
  }

to

  proxy: {
    '/sirix': {
      target: 'https://<your docker host>:9443',
      pathRewrite: {'^/sirix': ''},
      agent: new Agent({ rejectUnauthorized: false })
    }
  }
  1. The URL for Keycloak in step 3 above is http://<your docker host>:8080.
  2. You may also need to use a browser extension like switcheroo to redirect localhost:8080/ to <your docker host>:8080/.

Setting up the Nuxt.js application:

# install dependencies
$ npm install

# serve with hot reload at localhost:3005
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

Customize configuration

For detailed explanation on how things work, check out Nuxt.js docs.

Contributors โœจ

Thanks goes to these wonderful people (emoji key):

Simon Holdorf
Simon Holdorf

๐Ÿ’ป
yang
yang

๐Ÿ’ป
Atman
Atman

๐Ÿ’ป
Jawahar
Jawahar

๐Ÿ’ป
Moshe Uminer
Moshe Uminer

๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!

sirix-web-frontend's People

Contributors

allcontributors[bot] avatar berniwittmann avatar dependabot-preview[bot] avatar jawahars16 avatar mosheduminer avatar mturoci avatar oznakn avatar pareshjoshi avatar rackar avatar simhol avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.