Skip to content

Commit

Permalink
Merge pull request #66 from SRI-International/develop
Browse files Browse the repository at this point in the history
Merge into master
  • Loading branch information
brian-at-sri authored Jul 18, 2024
2 parents b1684d8 + 93c9a67 commit 247abc8
Show file tree
Hide file tree
Showing 39 changed files with 26,029 additions and 24,353 deletions.
27 changes: 27 additions & 0 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI

on: [push, pull_request]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/

steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run build --if-present
- run: npm test
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
.idea
node_modules
node_modules
/build
coverage
2 changes: 1 addition & 1 deletion Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ FROM node:10-alpine
RUN npm cache clean --force && \
npm config set strict-ssl false && \
apk add wget unzip && \
wget --no-check-certificate https://github.com/prabushitha/gremlin-visualizer/archive/master.zip && \
wget --no-check-certificate https://github.com/SRI-International/gremlin-visualizer/archive/master.zip && \
unzip master.zip && \
cd gremlin-visualizer-master && \
npm install
Expand Down
73 changes: 50 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
# Gremlin-Visualizer
This project is to visualize the graph network corresponding to a gremlin query.
This project is to visualize and edit the graph network corresponding to a gremlin query.

![alt text](https://raw.githubusercontent.com/prabushitha/Readme-Materials/master/Gremlin-Visualizer.png)

### Setting Up Gremlin Visualizer
To setup gremlin visualizer, you need to have `node.js` and `npm` installed in your system.
## Setting Up Gremlin Visualizer
To set up gremlin visualizer, you need to have `node.js` and `npm` installed in your system.

* Clone the project
```sh
git clone https://github.com/prabushitha/gremlin-visualizer.git
git clone https://github.com/SRI-International/gremlin-visualizer.git
```
* Install dependencies
```sh
Expand All @@ -23,9 +21,9 @@ npm start
http://localhost:3000
```

Note - Frontend starts on port 3000 and simple Node.js server also starts on port 3001. If you need to change the ports, configure in `package.json`, `proxy-server.js`, `src/constants`
Note - Frontend starts on port 3000 and simple Node.js server also starts on port 3001. If you need to change the ports, configure in `package.json`, `proxy-server.js`, `src/constants.js`

#### Setting up with Docker
### Setting up with Docker

You can build a Docker image of the gremlin visualizer with the included `Dockerfile`.
This will use the current version of the `master` branch of the source GitHub repository.
Expand All @@ -35,8 +33,6 @@ The Docker image can be built by calling the `docker build` command, for example
docker build --tag=gremlin-visualizer:latest .
```

The image can also be downloaded from Docker hub: [`prabushitha/gremlin-visualizer:latest`](https://hub.docker.com/r/prabushitha/gremlin-visualizer).

```sh
docker pull prabushitha/gremlin-visualizer:latest
```
Expand All @@ -46,30 +42,61 @@ The Docker image can then be run by calling `docker run` and exposing the necess
```sh
# if you built the image yourself
docker run --rm -d -p 3000:3000 -p 3001:3001 --name=gremlin-visualizer --network=host gremlin-visualizer:latest
# if you downloaded from Docker Hub
docker run --rm -d -p 3000:3000 -p 3001:3001 --name=gremlin-visualizer --network=host prabushitha/gremlin-visualizer:latest
```
Note that `--network=host` is not needed if you don't run your gremlin server in the host machine.

The Docker container can be stopped by calling `docker stop gremlin-visualizer`.

### Usage
## Usage
* Start Gremlin-Visualizer as mentioned above
* Start or tunnel a gremlin server
* Specify the host and port of the gremlin server
* Write an gremlin query to retrieve a set of nodes (eg. `g.V()`)
* Write a gremlin query to retrieve a set of nodes (eg. `g.V()`)

### Adding Nodes and Edges
Shift-clicking in empty space will open a dialog to add a new node to the graph.

Shift-click-drag between two nodes will add an edge.

### Adding Custom Icons
Add icons into the src/assets/icons folder.
Edit src/assets/icons.ts to add a mapping for node type to icon.

Example:
```typescript
const icons: Record<string, string> = {
person: require("./icons/person.jpg"),
};
```
This would render person.jpg for all nodes with the 'person' type label. Capitalization matters.

### Custom Node Labels
To configure the initial displayed node labels, edit INITIAL_LABEL_MAPPINGS in src/constants.js.
Maps the value of the given node property to the display label of the given node type.
Example:
```typescript
export const INITIAL_LABEL_MAPPINGS = {
person: 'name'
}
```
This would set the default display label to the name property on nodes with type 'person'. Capitalization matters.

### Changing Graph Visualization Implementation
The graph can be rendered with vis-network, cytoscapejs, or sigmajs.
The default is vis-network.
To change the graph implementation, edit src/constants.js and change GRAPH_IMPL.
The possible values are 'vis', 'cytoscape', or 'sigma'.
Available layouts algorithms are specific to each graph implementation.

### Features
## Features
* If you don't clear the graph and execute another gremlin query, results of previous query and new query will be merged and be shown.
* Node and edge properties are shown once you click on a node/edge
* Change the labels of nodes to any property
* View the set of queries executed to generate the graph
* Traverse in/out from the selected node

###
## Contributors
* Umesh Jayasinghe (Github: prabushitha)

## Something Missing?

If you have new ideas to improve please create a issue and make a pull request
* Edit, add, or remove properties to existing nodes and edges
* Add new nodes and edges
* Change layout algorithm
* Save and restore node positions into layout
* Customize node icons and labels base on node types
* Vis-network, cytoscape, and sigma graph rendering engines
13 changes: 13 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module.exports = {
presets: [
['@babel/preset-env', {
targets: {
node: 'current',
},
modules: 'auto' // 'auto' should be sufficient if your environment supports ESM
}],
'@babel/preset-react',
'@babel/preset-typescript',
],
// Include any plugins here if necessary
};
207 changes: 207 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
/**
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/configuration
*/

/** @type {import('jest').Config} */
const config = {
testEnvironmentOptions: {
customExportConditions: [''],
},
testTimeout: 200000,
setupFiles: ['./jest.polyfills.js'],
// All imported modules in your tests should be mocked automatically
// automock: false,

// Stop running tests after `n` failures
// bail: 0,

// The directory where Jest should store its cached dependency information
// cacheDirectory: "/tmp/jest_rs",

// Automatically clear mock calls, instances, contexts and results before every test
clearMocks: true,

// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,

// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,

// The directory where Jest should output its coverage files
coverageDirectory: "coverage",

// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "/node_modules/"
// ],

// Indicates which provider should be used to instrument code for coverage
// coverageProvider: "babel",

// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],

// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,

// A path to a custom dependency extractor
// dependencyExtractor: undefined,

// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,

// The default configuration for fake timers
// fakeTimers: {
// "enableGlobally": false
// },

// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],

// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,

// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,

// A set of global variables that need to be available in all test environments
// globals: {},

// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: 4,

// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],

// An array of file extensions your modules use
// moduleFileExtensions: [
// "js",
// "mjs",
// "cjs",
// "jsx",
// "ts",
// "tsx",
// "json",
// "node"
// ],

// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/__mocks__/fileMock.js',
'\\.(css|less)$': 'identity-obj-proxy',
},

// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],

// Activates notifications for test results
// notify: false,

// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",

// A preset that is used as a base for Jest's configuration
preset: "jest-puppeteer",

// Run tests from one or more projects
// projects: undefined,

// Use this configuration option to add custom reporters to Jest
// reporters: undefined,

// Automatically reset mock state before every test
// resetMocks: false,

// Reset the module registry before running each individual test
// resetModules: false,

// A path to a custom resolver
// resolver: undefined,

// Automatically restore mock state and implementation before every test
// restoreMocks: false,

// The root directory that Jest should scan for tests and modules within
// rootDir: undefined,

// A list of paths to directories that Jest should use to search for files in
// roots: [
// "<rootDir>"
// ],

// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",

// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: ["jest-webgl-canvas-mock"],

// A list of paths to modules that run some code to configure or set up the testing framework before each test
// setupFilesAfterEnv: ["jest-webgl-canvas-mock"],

// The number of seconds after which a test is considered as slow and reported as such in the results.
// slowTestThreshold: 5,

// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],

// The test environment that will be used for testing
testEnvironment: "jsdom",

// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},

// Adds a location field to test results
// testLocationInResults: false,

// The glob patterns Jest uses to detect test files
// testMatch: [
// "**/__tests__/**/*.[jt]s?(x)",
// "**/?(*.)+(spec|test).[tj]s?(x)"
// ],

// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
// testPathIgnorePatterns: [
// "/node_modules/"
// ],

// The regexp pattern or array of patterns that Jest uses to detect test files
// testRegex: [],

// This option allows the use of a custom results processor
// testResultsProcessor: undefined,

// This option allows use of a custom test runner
// testRunner: "jest-circus/runner",

// A map from regular expressions to paths to transformers
// transform: undefined,

// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
// transformIgnorePatterns: [
// "/node_modules/",
// "\\.pnp\\.[^\\/]+$"
// ],

// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,

// Indicates whether each individual test should be reported during the run
// verbose: undefined,

// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],

// Whether to use watchman for file crawling
// watchman: true,
};

module.exports = config;
Loading

0 comments on commit 247abc8

Please sign in to comment.