Giter VIP home page Giter VIP logo

prsm's Introduction

Participatory System Mapper

Join the chat at https://gitter.im/PRSM-community/community MIT Licence Last commit GitHub package.json version

What is it?

The Participatory System Mapper (PRSM for short) is an app that runs in a web browser that makes it easy for a group of people working together to draw networks (or 'maps') of systems.

The network or map can be anything that has items (or 'factors' or 'nodes') connected by links (or 'edges'). Here are some examples:

  • People (the nodes) connected by knowing each other
  • Factors or variables causing (the links) changes in other factors
  • Switches connected by wires
  • Computers connected by network links
  • Theories expressed as variables and relationships between them
  • Company boards of directors (the nodes) and the directors that sit on more than one board (the links)
  • Twitter hashtags (the nodes) included together on posts (the links)
  • Scientists (the nodes) co-authoring papers (the links)
  • and so on.

Participatory system mapping

The app is designed to enable groups of people, each using their own computer (or tablet) to collaborate in the drawing of a map. They may be sitting around a table, discussing the map as it is created face to face, or working remotely, using video conferencing or the chat feature that is built into the app. Everyone can participate because every edit (creating nodes and links, arranging them and so on) is broadcast to all the other participants as the changes are made (just as Google Docs does for text, for example).

When you start the app in your browser, a 'room' is created for you in which to draw your network. You can add other users to this room to share the work. Only those with access to the room can see what is being created.

Home page

For more on PRSM, see here. A guide to using PRSM is here.

Installation

No installation on your computer is needed. The software is a web app, which means that it can be accessed using a web browser by pasting this link into the address bar:

https://prsm.uk/prsm.html

You need a modern web browser such as Chrome, Firefox, Microsoft Edge or Safari. It will not work with Internet Explorer.

The software is free and available under an MIT license.

Source Code

The program code is available on GitHub.

The javascript (ES6) code in sub-directory js is divided into modules:

  • prsm.js handles the main network pane
  • background.js manages drawing objects on the background
  • styles.js creates and edits the styles
  • the default styles are in samples.js
  • files.js does the import and export functions
  • cluster.js clusters factors
  • table.js provides the data view
  • trophic.js does the trophic layout algorithm
  • betweenness.js is a web worker that cacilates network statistics in the background
  • tutorial.js manages the initial tour
  • utils.js includes utility functions common to several modules
  • merge.js provides undocumented functions to merge two maps into one

The HTML files that display in the browser are in the html directory.

PRSM uses two important packages: yjs and vis-network. The former handles the sharing between participants' browsers and the latter draws the network. A few other packages are used for dealing with touch input (Hammer), drawing emojis, and parsing XML file input.

These components are assembled using parcel and the bundled files are placed in the dist directory. So that users have an easy URL to access (i.e. not needing to include dist in the link), there is an .htaccess file that rewrites URLs from what the user puts into their browser to the correct location.

To install the code, use git to clone the repo to your local disk and change to the cloned directory. Then install the required packages with

npm install

and build the distribution with

npm run build

The Apache2 headers module must be enabled. If the installation isn't visible in your browser this is likely the cause. Enabling the module is simple on Debian/Ubuntu systems:

sudo a2enmod headers
systemctl restart apache2

Documentation can be found in the doc directory.

See package.json for other npm commands.

Acknowledgements

With thanks to all who helped inspire, suggest features for, comment on, and test PRSM, including the members of CECAN, CRESS, Risk Solutions, and Robin Gilbert.

Bug reports and feature requests

Please report problems, suggestions and praise to [email protected]

prsm's People

Contributors

dependabot[bot] avatar gitter-badger avatar micrology avatar serialc 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

prsm's Issues

FR: Make undo button at the top also work for drawing mode/layer

Currently when I have drawn a line and press "undo" at the top it doesn't undo the drawn line.

It would be very nice and intuitive if the undo-button at the top would also undo. The undo button with the drawing tools is a bit unintuitive as users are used to have one central undo option.

Eraser often erases somewhere else then where the cursor is

When I try to use the eraser it often erases things that are not at the location of my cursor. At the same time the things at my cursor do not get erased.

I have the same behaviour on Firefox 92.0 (64-bit) and Edge Version 92.0.902.78 (Official build) (64-bit).

Eraser erases drawing layer

When I use the eraser it "paints" white over the grid of the drawing layer. Disabling and enabling the drawing layer again doesn't fix the grid.

I would expect that the eraser only erases things drawn in the drawing mode and nothing else.

Paste does not work with FireFox

I have copied a factor and tried to paste this. This leads to getting a "Failed to paste" error in the bottom of the screen.

When I try to paste the same element (clipboard data) in Edge it does work.

I used Firefox 92.0 (64-bit) on Windows.

Feature Request: Compound graphs

Compound graphs allow nodes to be children of or included in other nodes. In other words, they have two kind of edges: adjacency and inclusion. Here is an example of a compound graph

The "Theory of Change" map linked on the website hints at such a graph but I could not find a way to add/remove child/parent relationships among nodes.

image

Incorrect factor node moved when previous factor is selected

Hard to make clear in the title.
Sorry Wayland is causing problems recording a screen cast.

To reproduce:
Create two nodes as in image below:
expected

Select the right factor (2):
problem

Move the left factor (1).
Move the right factor (2).

In the last step factor 1 will move, not factor 2 as expected.

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.