Sonic.Site

wut

The frontend for sonic - a relational database visualization. Check out the backend, too!

A web app that displays relationships between entities and data points about those entities - for example, if A is a parent of B and C, and C has some data, you will see C's data point on B's page as a related entity, on A's page as a child entity, and so on. Admin users can add entities, link them, add data points, and assign categories to both the entities and data points. Users can search for entities, browse entities and data points by name and category, and view graphs showing the relationships between entities.

This web app was developed for sonic - an unethical consumption database, a website that shows corporations and brands, their often hidden relationships, and questionable behaviors from them (i.e. companies that use child labor, CEOs assaulting employees).

This code can be used for any relational data, but there is some terminology directly tied to the "corporations and their issues" relationship, most of which is in the src/utils/lang.js file. The logic itself is largely agnostic to the intended use.

license

The source code is licensed with the GNU Affero General Public License and all text in the code and database are licensed with the CC BY-SA 4.0 License. All corporate logos belong to their respective owners, and the "THERE IS NO SUCH THING AS ETHICAL CONSUMPTION UNDER CAPITALISM" image is from a meme - source currently unknown.

why

I got tired of seeing #hip new products from #trendy new companies only to find out they were subsidiaries of garbage corporations.

requirements

The frontend is a VueJS website. The backend is written in PHP and interacts with a MySQL/MariaDB database.

dependencies

The following node packages are used:

• Vue.js
• vue-router
• vuex
• vuex-persist
• Vue I18n
• Vuetify
• core-js
• Cytoscape.js
• cytoscape-popper
• cytoscape-fcose
  • U. Dogrusoz, E. Giral, A. Cetintas, A. Civril, and E. Demir, "A Layout Algorithm For Undirected Compound Graphs", Information Sciences, 179, pp. 980-994, 2009.
  • A. Civril, M. Magdon-Ismail, and E. Bocek-Rivele, "SSDE: Fast Graph Drawing Using Sampled Spectral Distance Embedding", International Symposium on Graph Drawing, pp. 30-41, 2006.
• Popper
• Tippy.js
• vue-moment
• Moment.js
• FileSaver.js

As are the following dev dependencies:

• vue-template-compiler
• vue-cli
• vue-cli service
• vue-cli babel plugin
• vue-cli eslint plugin
• vue-cli router plugin
• vue-cli vuex plugin
• vue-cli vuetify plugin
• vuetify-loader
• babel-eslint
• ESLint
• es-plugin-vue
• Sass
• sass-loader

building

setup

npm install

compile for development

npm run serve

compile and minify for production

npm run build

lint and fix files

npm run lint

custom configuration

See Configuration Reference.

want to make changes?

cool. do the forking and submitting or whatever. if it's good stuff I'll probably merge it up. if your issue is with the data itself on the live site, please use the Feedback page or contact me through one of the methods described there.