From cfd44430cdcb1b4195ef401f4b4047cddef66a2f Mon Sep 17 00:00:00 2001
From: wildone <max.barrass@gmail.com>
Date: Thu, 6 Jul 2023 16:40:16 +1000
Subject: [PATCH] copy components to proper names.

---
 components/api-algorithm.html |  92 ++++++++++++++++++++++++++++
 components/api-createsvg.html | 109 ++++++++++++++++++++++++++++++++++
 2 files changed, 201 insertions(+)
 create mode 100644 components/api-algorithm.html
 create mode 100644 components/api-createsvg.html
diff --git a/components/api-algorithm.html b/components/api-algorithm.html
new file mode 100644
index 0000000..7707f5a
--- /dev/null
+++ b/components/api-algorithm.html
@@ -0,0 +1,92 @@
+<script total>
+	
+	exports.id = 'typerefinery_api_python_algorithm';
+	exports.name = 'API Python Algorithm';
+	exports.icon = 'fa fa-code';
+	exports.group = '@TypeRefinery';
+	exports.author = 'TypeRefinery.io';
+	exports.version = '1';
+
+	exports.config = { title: exports.name, version: exports.version, algorithm: '', algorithmrequirements: 'argparse loguru', endpoint: 'http://127.0.0.1:8000/algorithm' };
+	exports.inputs = [{ id: 'connection', name: 'Connection' }, { id: 'query', name: 'TQL Query' }];
+	exports.outputs = [{ id: 'output', name: 'Output' }];
+	
+	exports.meta = { settingswidth: 1200 };
+
+	exports.make = function(instance, config) {
+		var fn;
+		var values = {};
+		instance.message = function($) {
+			// Getting endpoint from the user
+			const endpointData = {
+					endpoint: config.endpoint,
+			}
+		
+			// Inputs to this block will be saved in values Object
+			values[$.input] = $.data;
+
+			if (values.connection && values.query && config.algorithm) {
+				var payload = {
+					dbhost: values.connection.dbhost,
+					dbport: values.connection.dbport,
+					dbdatabase: values.connection.dbdatabase,
+					dbquery: values.query.dbquery,
+					algorithm: config.algorithm,
+					algorithmrequirements: config.algorithmrequirements.split(' ').join('\n'),
+					returnoutput: 'output'
+				};
+				let options = {
+					method: 'POST',
+					headers: {
+						'Content-Type':
+						'application/json;charset=utf-8'
+					},
+					body: JSON.stringify(payload)
+				}
+		
+				// Sending request to get Data
+				let fetchRes = fetch(endpointData.endpoint,options);
+				fetchRes.then(res =>res.json())
+					.then(d => { $.send('output', d) })
+					.catch(err => { $.send('output', err) })
+					
+					values.query = null;
+			} else {
+				// IMPORTANT: we must destroy the current message becase we don't need to send it next
+				$.destroy();
+			}
+		};
+		
+		instance.close = function() {
+			fn = null;
+		};
+
+		instance.configure = function() {
+			if (config.title === "") {
+				config.title = exports.name;
+			}
+			config.version = exports.version;
+		};
+
+		instance.configure();
+
+	};
+</script>
+<readme>
+	Run a node and edges algorithm on a TypeRefinery database.
+</readme>
+<settings>
+	<div class="padding">
+		<div data---="input__?.title__text"><b>Title</b></div>
+		<div data---="input__?.endpoint__required:1" class="m">Endpont</div>
+		<div data---="input__?.algorithmrequirements__text:1" class="m">Requirements (space separated)</div>
+		<div class="ui-input-label">Algorithm:</div>
+		<div data---="codemirror__?.algorithm__type:python;minheight:300;parent:auto;margin:60;tabs:true;trim:true" class="m"></div>
+	</div>
+</settings>
+<body>
+	<header>
+		<i class="ICON"></i><b class="monospace" data-bind="CONFIG.title__text__empty"></b>
+		<div><small><i>NAME v<span data-bind="CONFIG.version__text__empty"></span></i></small></div>
+	</header>
+</body>
diff --git a/components/api-createsvg.html b/components/api-createsvg.html
new file mode 100644
index 0000000..d3ff862
--- /dev/null
+++ b/components/api-createsvg.html
@@ -0,0 +1,109 @@
+<script total>
+
+	exports.id = 'typerefinery_api_javascript_createsvg';
+	exports.name = 'API Javascript Create SVG';
+	exports.icon = 'fa fa-code';
+	exports.group = '@TypeRefinery';
+	exports.author = 'TypeRefinery.io';
+	exports.version = '2';
+
+	exports.config = { title: exports.name, version: exports.version, endpointcreatesvg: "http://127.0.0.1:8000/createSvg", endpointproject: 'http://127.0.0.1:8000/datastore/project', dependenciesjs: 'https://d3js.org/d3.v4.js https://cdn.jsdelivr.net/npm/webcola@3.4.0/WebCola/cola.js', code: '' };
+	exports.inputs = [{ id: 'graph_data', name: 'DATA' },{ id: 'theme', name: 'Theme' }];
+	exports.outputs = [{ id: 'output', name: 'Output' }];
+	exports.meta = { settingswidth: 1200 };
+	exports.make = function(instance, config) {
+		var fn;
+		var values = {};
+
+		instance.message = function($) {
+
+			// Inputs to this block will be saved in values Object
+			values[$.input] = $.data
+
+			if (values.graph_data && values.theme) {
+				var project;
+				var input_data = {
+					theme: values.theme,
+					graph_data: values.graph_data
+				};
+
+				// Replacing GRAPH_DATA variable with actual DATA
+				const codeWithData = config.code.replace('GRAPH_DATA', JSON.stringify(input_data.graph_data))
+				// Replacing THEME variable with actual THEME
+				const code = codeWithData.replace('THEME', JSON.stringify(input_data.theme))
+
+				const payload = {
+					"code": code,
+					"dependencies": config.dependenciesjs.split(' '),
+					"returnoutput": "script"
+				};
+
+				let options = {
+					method: 'POST',
+					headers: {
+					'Content-Type':
+						'application/json;charset=utf-8'
+					},
+					body: JSON.stringify(payload)
+				}
+
+				// Sending request to generate SVG
+				Promise.all([
+						fetch(config.endpointproject).then(value => value.json()),
+						fetch(config.endpointcreatesvg, options).then(value => value.json()),
+				]).then(([projects, output]) => {
+					// Getting current project
+					project = projects.find(el => el.flowid == instance.main.id)
+					// response output
+					const res = {
+						path: output["output.url"],
+						stepId: instance.id,
+						stepName: instance.module.name,
+						flowId: instance.main.id,
+						projectId: project.projectid
+					}
+					// Sending the response
+					$.send('output', res)
+				}).catch((err) => {
+					// Sending the error
+					$.send('output', err)
+				});
+
+				values.theme = null
+			}
+		};
+
+		instance.close = function() {
+			fn = null;
+		};
+
+		instance.configure = function() {
+			if (config.title === "") {
+				config.title = exports.name;
+			}
+			config.version = exports.version;
+		};
+
+		instance.configure();
+
+	};
+</script>
+<readme>
+	Run WebCola Viz to your flow.
+</readme>
+<settings>
+	<div class="padding">
+		<div data---="input__?.title__text"><b>Title</b></div>
+		<div data---="input__?.endpointproject__required:1" class="m">Endpont Projects</div>
+		<div data---="input__?.endpointcreatesvg__required:1" class="m">Endpont CreateSvg</div>
+		<div data---="input__?.dependenciesjs__text:1" class="m">Dependencies JS (space separated)</div>
+		<div class="ui-input-label">Code:</div>
+		<div data---="codemirror__?.code__type:javascript;minheight:300;parent:auto;margin:60;tabs:true;trim:true" class="m"></div>
+	</div>
+</settings>
+<body>
+	<header>
+		<i class="ICON"></i><b class="monospace" data-bind="CONFIG.title__text__empty"></b>
+		<div><small><i>NAME v<span data-bind="CONFIG.version__text__empty"></span></i></small></div>
+	</header>
+</body>
\ No newline at end of file
