corestate55/directory.txt

## directory.txt
├── dist
│   ├── font
│   │   └── popoto
│   │       ├── popoto.eot
│   │       ├── popoto.svg
│   │       ├── popoto.ttf
│   │       └── popoto.woff
│   ├── index.html
│   ├── main.bundle.js
│   └── popoto.min.css
├── package.json
├── src
│   └── index.js
└── webpack.config.js

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>netomox graphdb viewer</title>
    <link rel="stylesheet" href="./popoto.min.css">
</head>

<body class="ppt-body">

<section class="ppt-section-main">

    <div class="ppt-container-graph">
        <nav id="popoto-taxonomy" class="ppt-taxo-nav">
            <!-- Label/taxonomy filter will be generated here -->
        </nav>
        <div id="popoto-graph" class="ppt-div-graph">
            <!-- Graph will be generated here-->
        </div>
    </div>

    <div id="popoto-query" class="ppt-container-query">
        <!-- Query viewer will be generated here -->
    </div>

    <div id="popoto-cypher" class="ppt-container-cypher">
        <!-- Cypher query viewer will be generated here -->
    </div>

    <div class="ppt-section-header">
        <!-- The total results count is updated with a listener defined below -->
        RESULTS <span id="result-total-count" class="ppt-count"></span>
    </div>

    <div id="popoto-results" class="ppt-container-results">
        <!-- Results will be generated here -->
    </div>

</section>

<!-- Required scripts -->

<script src="./main.bundle.js" charset="utf-8"></script>

## index.js
const popoto = require('popoto');

/**
 * URL used to access Neo4j REST API to execute queries.
 * Update this parameter to your running server instance.
 *
 * For more information on Neo4J REST API the documentation is available
 * here: http://neo4j.com/docs/stable/rest-api-cypher.html
 */
popoto.rest.CYPHER_URL = "http://localhost:7474/db/data/transaction/commit";

/**
 * Add this authorization property if your Neo4j server uses basic HTTP authentication.
 * The value of this property must be "Basic <payload>", where "payload" is a base64
 * encoded string of "username:password".
 *
 * "btoa" is a JavaScript function that can be used to encode the user and password
 * value in base64 but it is recommended to directly use the Base64 value.
 *
 *  For example Base64 encoded value of "neo4j:password" is "bmVvNGo6cGFzc3dvcmQ="
 *
 ***********************************************************************************
 *  /!\ It is not a safe way to keep these credentials in the page as anyone can
 * have access to this code in your web page.
 ***********************************************************************************
 */
popoto.rest.AUTHORIZATION = "Basic " + btoa("neo4j:password");

/**
 * Define the Label provider you need for your application.
 * This configuration is mandatory and should contain at least all the labels you could find in your graph model.
 *
 * In this version only nodes with a label are supported.
 *
 * By default If no attributes are specified Neo4j internal ID will be used.
 * These label provider configuration can be used to customize the node display in the graph.
 * See www.popotojs.com or example for more details on available configuration options.
 */
popoto.provider.node.Provider = {
  "network": {
    "returnAttributes": ["path"],
    "constraintAttribute": "path"
  },
  "node": {
    "returnAttributes": ["path"],
    "constraintAttribute": "path"
  },
  "termination_point": {
    "returnAttributes": ["path"],
    "constraintAttribute": "path"
  }
};

/**
 * You can activate debug traces with the following properties:
 * The value can be one of these values: DEBUG, INFO, WARN, ERROR, NONE.
 *
 * With INFO level all the executed cypher query can be seen in the navigator console.
 * Default is NONE
 */
popoto.logger.LEVEL = popoto.logger.LogLevels.INFO;

/**
 * Query configuration
 * See: https://github.com/Nhogs/popoto/wiki/Query-configuration
 */
popoto.query.USE_RELATION_DIRECTION = false;
popoto.query.COLLECT_RELATIONS_WITH_VALUES = false;

/**
 * Start popoto.js generation.
 * The function requires the label to use as root element in the graph.
 */
popoto.start("network");

## package.json
{
  "name": "netomox-popoto",
  "version": "0.0.1",
  "description": "netomox-popoto-view",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "popoto": "^2.0.13"
  },
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

## webpack.config.js
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  mode: 'development',
  devServer: {
    contentBase: 'dist',
    compress: true,
    open: true,
    historyApiFallback: true,
    host: '0.0.0.0',
    port: process.env.PORT || 8081,
    disableHostCheck: true,
    watchOptions: { aggregateTimeout: 500, poll: 2000 },
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js'
  }
};
	├── dist
	│ ├── font
	│ │ └── popoto
	│ │ ├── popoto.eot
	│ │ ├── popoto.svg
	│ │ ├── popoto.ttf
	│ │ └── popoto.woff
	│ ├── index.html
	│ ├── main.bundle.js
	│ └── popoto.min.css
	├── package.json
	├── src
	│ └── index.js
	└── webpack.config.js
	<!DOCTYPE html>
	<html>

	<head>
	<title>netomox graphdb viewer</title>
	<link rel="stylesheet" href="./popoto.min.css">
	</head>

	<body class="ppt-body">

	<section class="ppt-section-main">

	<div class="ppt-container-graph">
	<nav id="popoto-taxonomy" class="ppt-taxo-nav">
	<!-- Label/taxonomy filter will be generated here -->
	</nav>
	<div id="popoto-graph" class="ppt-div-graph">
	<!-- Graph will be generated here-->
	</div>
	</div>

	<div id="popoto-query" class="ppt-container-query">
	<!-- Query viewer will be generated here -->
	</div>

	<div id="popoto-cypher" class="ppt-container-cypher">
	<!-- Cypher query viewer will be generated here -->
	</div>

	<div class="ppt-section-header">
	<!-- The total results count is updated with a listener defined below -->
	RESULTS <span id="result-total-count" class="ppt-count"></span>
	</div>

	<div id="popoto-results" class="ppt-container-results">
	<!-- Results will be generated here -->
	</div>

	</section>

	<!-- Required scripts -->

	<script src="./main.bundle.js" charset="utf-8"></script>
	const popoto = require('popoto');

	/**
	* URL used to access Neo4j REST API to execute queries.
	* Update this parameter to your running server instance.
	*
	* For more information on Neo4J REST API the documentation is available
	* here: http://neo4j.com/docs/stable/rest-api-cypher.html
	*/
	popoto.rest.CYPHER_URL = "http://localhost:7474/db/data/transaction/commit";

	/**
	* Add this authorization property if your Neo4j server uses basic HTTP authentication.
	* The value of this property must be "Basic <payload>", where "payload" is a base64
	* encoded string of "username:password".
	*
	* "btoa" is a JavaScript function that can be used to encode the user and password
	* value in base64 but it is recommended to directly use the Base64 value.
	*
	* For example Base64 encoded value of "neo4j:password" is "bmVvNGo6cGFzc3dvcmQ="
	*
	***********************************************************************************
	* /!\ It is not a safe way to keep these credentials in the page as anyone can
	* have access to this code in your web page.
	***********************************************************************************
	*/
	popoto.rest.AUTHORIZATION = "Basic " + btoa("neo4j:password");

	/**
	* Define the Label provider you need for your application.
	* This configuration is mandatory and should contain at least all the labels you could find in your graph model.
	*
	* In this version only nodes with a label are supported.
	*
	* By default If no attributes are specified Neo4j internal ID will be used.
	* These label provider configuration can be used to customize the node display in the graph.
	* See www.popotojs.com or example for more details on available configuration options.
	*/
	popoto.provider.node.Provider = {
	"network": {
	"returnAttributes": ["path"],
	"constraintAttribute": "path"
	},
	"node": {
	"returnAttributes": ["path"],
	"constraintAttribute": "path"
	},
	"termination_point": {
	"returnAttributes": ["path"],
	"constraintAttribute": "path"
	}
	};

	/**
	* You can activate debug traces with the following properties:
	* The value can be one of these values: DEBUG, INFO, WARN, ERROR, NONE.
	*
	* With INFO level all the executed cypher query can be seen in the navigator console.
	* Default is NONE
	*/
	popoto.logger.LEVEL = popoto.logger.LogLevels.INFO;

	/**
	* Query configuration
	* See: https://github.com/Nhogs/popoto/wiki/Query-configuration
	*/
	popoto.query.USE_RELATION_DIRECTION = false;
	popoto.query.COLLECT_RELATIONS_WITH_VALUES = false;

	/**
	* Start popoto.js generation.
	* The function requires the label to use as root element in the graph.
	*/
	popoto.start("network");
	{
	"name": "netomox-popoto",
	"version": "0.0.1",
	"description": "netomox-popoto-view",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack",
	"start": "webpack-dev-server"
	},
	"author": "",
	"license": "MIT",
	"dependencies": {
	"popoto": "^2.0.13"
	},
	"devDependencies": {
	"webpack": "^4.27.1",
	"webpack-cli": "^3.1.2",
	"webpack-dev-server": "^3.1.10"
	}
	}
	const path = require('path');

	module.exports = {
	entry: path.resolve(__dirname, 'src/index.js'),
	mode: 'development',
	devServer: {
	contentBase: 'dist',
	compress: true,
	open: true,
	historyApiFallback: true,
	host: '0.0.0.0',
	port: process.env.PORT \|\| 8081,
	disableHostCheck: true,
	watchOptions: { aggregateTimeout: 500, poll: 2000 },
	headers: {
	'Access-Control-Allow-Origin': '*'
	}
	},
	output: {
	path: `${__dirname}/dist`,
	filename: '[name].bundle.js',
	chunkFilename: '[name].bundle.js'
	}
	};