Giter VIP home page Giter VIP logo

quant-ux's Introduction

Docker Image Build and Push to Dockerhub - CI/CD

Quant-UX - Prototype, Test and Learn

Quant UX is a research, usability and prototyping tool to quickly test your designs and get data driven insights. This repo contains the front end. You can find a working demo at https://quant-ux.com/#/

Alt text

Develpment setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Installation

The easiest way to get your own installation up and running is using the prebuild Docker images by Brian McGonagill. You can find the repo and instructions at https://github.com/bmcgonag/quant-ux-docker/

Manual Installation

Quant-UX has two components. A front-end (this package) and a backend (qux-java). The front-end needs Node.js (> 12) installed. The backend needs a Mongo DB, a Mail Server (SMTP) and Java (> 1.8). The front-end comes with it's own mini web server, which also include a proxy that redirects all request to the correct backend.

Docker

The easiest way to get your own Quant-UX installation running is using the Docker images.

  1. Create a docker compose file (docker-compose.yaml) and set the environment variables.
version: '3'

services:
  mongo:
    restart: always
    container_name: quant-ux-mongo
    image: mongo
    volumes:
      - ./data:/data/db        # pth for the data to be stored and kept on your host machine is on the left side of the ":"
  qux-fe:
    restart: always
    container_name: quant-ux-frontend
    image: klausenschaefersinho/quant-ux
    environment:
      - QUX_PROXY_URL=http://quant-ux-backend:8080        # this is the path the front end uses to talk tot he backend
      - QUX_AUTH=qux
      - QUX_KEYCLOAK_REALM=
      - QUX_KEYCLOAK_CLIENT=
      - QUX_KEYCLOAK_URL=
      - QUX_WS_URL=ws://127.0.0.1:8086        # change to where the websocket server is deployed for external access
    links:
      - mongo
      - qux-be
    ports:
      - 8082:8082        # change the left side port if your host machine already has 8082 in use
    depends_on:
      - qux-be
  qux-be:
    restart: always
    container_name: quant-ux-backend
    image: klausenschaefersinho/quant-ux-backend
    volumes:
      - ./quant-ux-data:/app-data
    environment:
      - QUX_HTTP_HOST=http://quant-ux-frontend:8082   # this is the URL included in the mails, e.g. password resets
      - QUX_HTTP_PORT=8080  # This is the port the backend will use
      - QUX_MONGO_DB_NAME=quantux  # the database / collection name in mongodb
      - QUX_MONGO_TABLE_PREFIX=quantux  # table / document prefix in mongodb
      - QUX_MONGO_CONNECTION_STRING=mongodb://quant-ux-mongo:27017 # this assumes your mongodb container will be called "quant-ux-mongo" in the docker-compose file
      - [email protected]        # this should be your smtp email user
      - QUX_MAIL_PASSWORD=sTr0ngPa55w0Rd        # this should be your smtp email password
      - QUX_MAIL_HOST=mail.example.com        # this should be your smtp host address
      - QUX_JWT_PASSWORD=some-long-string-of-mix-case-chars-and-nums        # you should change this to a real JWT secret
      - QUX_IMAGE_FOLDER_USER=/app-data/qux-images        # this folder should mapped in the volume
      - QUX_IMAGE_FOLDER_APPS=/app-data/qux-image-apps        # this folder should mapped in the volume
      - TZ=America/Chicago        # change to your timezone
      - QUX_AUTH_SERVICE=qux
      - QUX_KEYCLOAK_SERVER= # just the keycloak host & port
      - QUX_KEYCLOAK_REALM=
      - QUX_USER_ALLOW_SIGNUP=true # set the false to not allow users to signup
      - QUX_USER_ALLOWED_DOMAINS=* # comma separated list of domains, e.g. 'my-server.com' or '*' for all
    depends_on:
      - mongo
  qux-ws:
    restart: always
    container_name: quant-ux-websocket-server
    image: klausenschaefersinho/quant-ux-websocket
    environment:
      - QUX_SERVER=http://quant-ux-backend:8080/
      - QUX_SERVER_PORT=8086
    ports:
      - 8086:8086
    links:
      - qux-be
    depends_on:
      - qux-be

Make sure to update QUX_JWT_PASSWORD the ENV variable to make sure your installation is secure. Update QUX_HTTP_HOST, QUX_MAIL_USER, QUX_MAIL_PASSWORD and QUX_MAIL_HOST to sure correct mail handling

  1. Start the containers with the following command
docker compose up

One-Click deployment

Elestio

You can deploy an instance of Quant UX with few clicks and minimal configuration on cloud service provider of your choice.

Deploy

Kubernets

You can find a kubernets configuration here https://github.com/engmsilva/quant-ux-k8s/tree/master/k8s

Backend

  • Install Mongo DB (> 4.4)

  • Install Java (1.8)

  • Checkout the backend

git clone https://github.com/KlausSchaefers/qux-java.git
  • This contains already a compiled version of the backend in the release folder

  • Edit the matc.conf file to setup the correct mongo and mails server details. More details can be found here: https://github.com/KlausSchaefers/qux-java

  • Start the server, or install as a service in Linux.

java -jar release/matc.jar -Xmx2g -conf matc.conf -instances 1

Front-end

  • Install Node.js (> 12)

  • Clone repo

git clone https://github.com/KlausSchaefers/quant-ux.git
  • Install all dependecies:
npm install
  • Build
npm run build

Config front-end

  • Set the proxy server url as an ENV variable
export QUX_PROXY_URL=https://your.quant-ux.server.com // backend host

export QUX_WS_URL= wss.quant-ux.server.com // web socket server

  • Start
node server/start.js

Reverse Proxy

Now you should have a running system. It is not secure yet. The best is to put both behind a NGINX reverse proxy, which handles SSL.

You can use https://letsencrypt.org/ to create SSL certificates

quant-ux's People

Contributors

adithyaappu avatar arpit599 avatar ddhh83 avatar dependabot[bot] avatar euemica avatar guinoya avatar jianzhichun avatar jond-libera avatar kaiwalyakoparkar avatar karanvirsb avatar klausschaefers avatar klausschaefersatwork avatar marjandb avatar mashedkeyboard avatar nathfavour avatar pachecoka avatar philffm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

quant-ux's Issues

BiDirectional DataBinding on Select variable in TableWidget

Suppose I have a table with "Selectable" enabled. Is there a way to set the "selected" value through databinding? I can echo the selected value (the number of the row, starting with 0) to another field through databinding, but it doesn't seem to work in the other direction. There also isn't a way to preset the selected status of a table row, so I can't easily simulate this by just setting the selections the way I want them in a hidden table and swapping the view.

Single selection in tables

I have made a table that contains a list of items (the list could be arbitrarily long in the real app). I chose "Selectable" and "Show checkbox". In simulation, the user is able to click more than one checkbox. Is it possible to restrict this to a single selection? In other words, more like a radio button than a checkbox group. (BTW, I want to thank you again for all the work you have put into this tool -- it's really super!)

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 while I build the project and upload it in server.

It's working properly on my local server but when I build it and put the project on my server and try to log in I am getting the error "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"

VM75:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)
(anonymous) @ AbstractService.js:128
Promise.then (async)
(anonymous) @ AbstractService.js:126
value @ AbstractService.js:120
(anonymous) @ UserService.js:29
f @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
r @ asyncToGenerator.js:3
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
t @ app.b380976f.js:1
(anonymous) @ LoginPage.vue:71
f @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
r @ asyncToGenerator.js:3
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
login @ LoginPage.vue:68
ne @ vue.runtime.esm.js:1854
n @ vue.runtime.esm.js:2179
Zo.i._wrapper @ vue.runtime.esm.js:6917

Use with vue.js

Hello, My name is Guilherme, Im Braziliam developer and Im trying to use Quant-Ux with Vue.js.

When Im try to convert the test project to Vue Js qith "quant-ux" command, I get the error bellow :

Quant-UX: Start generating code! V 2.0.1
Quant-UX: Load config <.quant-ux.json>
{}
Quant-UX: Generate <Vue (Deprecated)> for prototype
Not supported type : vue (deprecated)
/usr/local/lib/node_modules/quant-ux-cli/lib/cli.js:22
var files = generator.run(app, conf);
^

TypeError: Cannot read property 'run' of undefined
at generate (/usr/local/lib/node_modules/quant-ux-cli/lib/cli.js:22:25)
at Request._callback (/usr/local/lib/node_modules/quant-ux-cli/lib/cli.js:82:9)
at Request.self.callback (/usr/local/lib/node_modules/quant-ux-cli/node_modules/request/request.js:185:22)
at Request.emit (events.js:198:13)
at Request. (/usr/local/lib/node_modules/quant-ux-cli/node_modules/request/request.js:1154:10)
at Request.emit (events.js:198:13)
at IncomingMessage. (/usr/local/lib/node_modules/quant-ux-cli/node_modules/request/request.js:1076:12)
at Object.onceWrapper (events.js:286:20)
at IncomingMessage.emit (events.js:203:15)
at endReadableNT (_stream_readable.js:1145:12)

Sticky ruler - does not work

By setting up lines and selecting "Sticky ruler", my header is not stuck to the top of the page as I scroll the page.

Possibility to integrate with other tools

Hi,

Quant-UX is an awesome tool! I was wondering whether it's possible to integrate it with external tools/websites or if that's a planned feature, since I am planning on building a larger scope application, which involves prototyping apps as a feature, and it would be great to be able to integrate Quant-UX in this project, since it's so rich and powerful!

Congrats for building it, and many thanks for making it open source! ❤️

Can't delete a comment

Hello,

When I try to delete a comment in my prototype (editing mode), it does nothing.

In the console of the dev tools i have this error :

AbstractService.js:202 Uncaught (in promise) Error: Could not delete
    at AbstractService.js:202
(anonymous) @ AbstractService.js:202
Promise.then (async)
r @ asyncToGenerator.js:13
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
onDeleteComment @ Comment.vue:416
(anonymous) @ lang.js:24

So here is the piece of code from AbstractService.js

 _delete(url, successCallback, errorCallback, header) {
        return new Promise((resolve, reject) => {
            fetch(url, {
                method: 'delete',
                headers: this._createDefaultHeader(header)
            }).then((res) => {
                if (res.status === 200) {
                    res.json().then(j => {
                        this.logger.log(6, '_put', 'exit ')
                        if (successCallback) {
                            successCallback(j)
                        }
                        resolve(j)
                    })
                } else {
                    this.onError(url, res)
                    if (errorCallback) {
                        errorCallback(new Error('Could not delete ...'))
                    }
                    reject(new Error('Could not delete'))
                }
            }).catch(function (err) {
                if (errorCallback) {
                    errorCallback(err)
                }
                reject(new Error('Could not delete'))
            })
        })
    }

I'm using QUANT-UX on https://quant-ux.com/

Thanks;

Cannot delete an item copied from one screen to another.

I have placed a label inside a first screen, in the same way I created a table inside it, the elements have not been copied inside the second screen but outside of it. I have tried to delete them but it is not possible. It indicates that it is associated with my master file, even enabling editing it cannot be deleted.
Using
Captura de pantalla de 2021-03-28 10-28-53

Google Chrome in Linux

Initial databinging

Widgets on a screen do not have initial values in their databinds. The user always needs to interact at least once with an widget to have a value bind. This makes some interactions for the testing user not intuitive and unnatural.

Thanks for your work!

User of team avatar is not good recognizable

image

It would be cool if we would be able to see the team member name when hovering the avatar. Alternatively you could display first letter of firstname and lastname instead of only firstname, to reduce the risk of not unique avatars.

AGPL instead of GPL?

Given that Quant UX is a web application, the Affero GPL v3, which is the same as the GPL v3 except it extends the copyleft to software published over the network, would seem more fitting for the project.

I want to avoid proxy and set the url directly

I have already updated your services folder's all js files by adding my API URL like

signup (data) { return this._post('https://api.prototype.tikweb.com:8080/rest/user', data) }

But I am not getting the project creating option after login. I am getting the error "Uncaught (in promise) TypeError: Failed to fetch"

Exposing APIs

First of all awesome work on this. I can see the data is all transmitted to https://v1.quant-ux.com, if I need this data is there any way of exporting/exposing it?

I would like to extend the functionality to include exposing designs via an API which I can then parse on clients.

Ctrl-scroll zoom uses reversed directions

(For clarification on the scroll down and up: I have natural scrolling enabled on the mouse wheel. When disabling it, it inverts for every app listed below including Quant, still making it the odd one out.)

The common standard among apps / platforms seems to be Ctrl + scroll down to zoom in (that is, make the image larger). This works with e.g.: Inkscape, Penpot, Google Maps (there without Ctrl as they use scrolling for zooming), and to zoom any sort of website generally.

In Quant, this direction seems to be reversed: Ctrl + scroll down zooms out, and Ctrl + scroll up zooms in, which is quite unexpected.

can't POST

Hello!
OK, as you might know, I'm a student (cinema and new media) and I'd like to collect reviews from my class about my design in QuantUX (might be future customers for you too! 😄 ).

To do that, I think of buttons on a master page (like, dislike, average, ...) that POST (using your REST service) to my home server (NR).
but I'm getting error:
image
Of course domain name and path are valid, not mydomain.com and posturl.

I'm sure my service works, I tested it with postman.

Lock widgets to scroll of other widget

I'm emulating the navigation of an existing web app so our designers and testers can see new proposed features (reports and charts) within that context. Our navigation and some reports use images in tree menu items and to display cellular data in some reports. We use a Table widget for the report data and a Tree widget for sidebar navigation. So what I'd like to be able to do is make a widget's position dependent on the position and scroll value of another widget. That would allow me to display icons and other graphics within the sidebar and report tables, and the graphics would move appropriately to match the other content.
I guess another alternative would be to allow styling within text fields, which would enable icon fonts to be used within the cells of tables or the menu entries of trees. I don't know which would be more work to implement.

Exporting Quant-UX Prototype

I'd like to export my current prototype to include it in my own git repository.
With so i can have some sort of versioning on my quant-ux prototype and can return to or view a certain previous version if needed to.

Thanks for your work!

Comparing two databinding variables

Hello,

is there a way to compare two databinding variables with each other when using the logic operator.
As far as i can see there is only the possibility to compare a variable with a "hardcoded" value.

Thanks and great work so far!

Local image

Hi ,

Quant is a helpful prototype tool for me to deal with many problems in my work , I have following questions while handling project problems:

  1. Is there any solution to provide some local images for me to refer to in the project while initialize it instead of uploading during building pages (Do not worry about backend , I have connected fronted with backend, and successfully made it work)
  2. Is it possible for me to pack all the running environment and share it with others in static page way?

It would be very appreciating if you can give me some directions in time, Thanks

Group to symbol undos to not work

I made a group with rectangle, icon and texts (the element on the right)
When I turn it into a symbol, and want to use this symbol, the new AND the old "groups" vanish (like the item on the left, I added a red border around it because we almost don't see it)
(Don't mind white rectangles, I had to hide some data ahah)
It also happened to me when hitting CTRL-Z (my normal group element became like this)
Nothing particular in console logs

Desktop app?

Hi there,

I saw this repository and so I am wondering if there will be a desktop app or not.

Thanks

NetworkError on REST test. CORS issue

Following your great tutorials, I try to call a mockup REST API (https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals) to fulfill the test https://www.youtube.com/watch?v=9Ex8do5vWaY
However, I get:
image

Console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals. (Reason: header ‘authorization’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

14:54:54.802 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals. (Reason: CORS request did not succeed).

About APK

Hi!

This is the best open source prototyping tool I have ever seen, but at the moment I have encountered a huge problem.

When I use a tool to generate a prototype product, how do I get the static resources of this prototype product, because I want to generate an apk project through static resources, or do you have any other suggestions to generate an apk file?

Thank you for your job, and answer!

Optional screen context for 'All Fields Valid" action validation

When trying to use 'All Fields Valid" to validate a form that is overlayed on top of a screen that has another form, toggling 'All Fields Valid' in the overlayed screen also checks the validity of the underlying screen's inputs. A way to somehow change this behavior would be nice.

Allow zoom using trackpad

It'd be great to be able to zoom in and out using the trackpad.

I'm using Firefox 77 under macOS and it doesn't work.

Mathematical operations for transfrom

Hi,

first of all let me say that this is the most amazing set of prototyping tools i've seen, especially FOSS.

I would like to see the transform dialogue box be able to take mathematical operations. This is accepted in Affinity tools and since I switched there it became a part of my everyday design.

To illustrate what I'm talking about,

If I have a H: 100 W: 200 box, going to H and typing 150% or 100 * 1.5 should give me 150 as the ending transform on H.

component based solution

Hi!

Fist of all, thank you for your amazing idea!

Is there any way to make not just group, like component in figma? I mean when I modify a group, the others can inherit the component position change inside the group or label or more?

Thank you for your job, and answer!

Table woes

Hey. First of all, I would like to say that this is a pretty impressive prototyping application. Thank you for making it and open sourcing it.

I'm trying out Quant-UX for mocking up and prototyping pages in a pretty table-intensive app.

For reference, this is how our tables look.

omg_table

And here is a more run-of-the mill table:

medium_table

And here is a simple one:

simple_table

(I know, the visual design is not exactly exciting.)
But I'm having trouble getting tables in Quant-UX to look like that.

If all I wanted to do was wireframing, this would be fine, but then I'd use pen and paper or maybe a simpler application. When trying out Quant-UX I expected to be able to replicate the look and feel of the existing application and it's styles. (I was able to do this for buttons relatively easily.)

I'm also a bit inspired by this article on enterprise tables. I think it should be possible to make all the visual table designs that they enumerate.

Some of these problems make simply wireframing table-heavy designs more difficult as well. (I've marked them 🏁)

So here's a list of table-related enhancements/feature requests/bugs:

  • I need to be able to set text/content-alignment per-column (or per-cell).
  • I need to set a monospace font for certain columns. (Monetary amounts especially)
  • (🏁) I need to be able to set the width of each column manually. Some data is wide, some data is thin. Currently there doesn't seem to be a way to do this other than to fill in wider data or headers in the columns that need it.
  • I want finer control over borders in and around the table. Sometimes I want a different border between the headers and the body of the table. Sometimes there are multiple rows of "header" (like with search inputs in the headers). I may want a strong border around the outside of the table, and some weak ones between the columns/rows. I may also want to group 3 columns at a time using stronger borders, while still having borders between every column.
  • I need to add footer rows to some tables (summing stuff, for example).
  • (🏁) I need to manually resize columns, and have wide but blank columns. (Especially if I have to manually place inputs and the like inside them.)
  • (🏁) There doesn't seem to be a way to add more than 10 columns. I'm gonna need more than 10 columns.
  • (🏁) Clicking on "values" in the properties panel for a table makes my computer's fan spin up 🔥, and it takes a good second to load the spreadsheet for entering values. It should not be so laggy.
  • (🏁) I want to add checkboxes, radio buttons, regular buttons, links, inputs or icons in the cells of tables. Icons and such may even need to be intermixed with text. I can currently do this by adding an empty column and adding these elements on top of the table, but I would like Quant-UX to be aware of them so I can resize the table or change the order of columns without manually realigning these things. It should also help with column width and row height, automatically fitting these elements inside without clipping.
  • The 'selectable' feature for tables seems cool but if it could be replaced with something generic, such that I could use checkboxes which look cohesive with the surrounding design, that would be better. We also frequently have a checkbox in the header of the table, which selects/deselects every row at once.
  • Zebra striped rows are currently supported by odd/even background/text colors in tables. But we have zebra stripes every 3rd row, which is not currently possible to acheive.

Regarding performance:
I'm using a relatively new Intel NUC and the Vivaldi browser (so basically Chromium) and Linux.

And again thank you for making Quant-UX. 🙏

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.