update api components to passthough data.

typerefinery-ai · Sep 19, 2023 · 9f982e3 · 9f982e3
1 parent f17955c
commit 9f982e3
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 30 deletions.
diff --git a/components/api-algorithm.html b/components/api-algorithm.html
@@ -1,40 +1,45 @@
 <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.version = '3';
+
+	exports.config = { title: exports.name, version: exports.version, algorithm: '', algorithmrequirements: 'argparse loguru', endpoint: 'http://127.0.0.1:8000/algorithm', jyputerid: "" };
+	exports.inputs = [{ id: 'config', name: 'Config' }];
+	exports.outputs = [{ id: 'output', name: 'Output' }, { id: 'payload', name: 'Payload' }];
 
-	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) {
+		config.jyputerid = instance.id;
 		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;
+			var inputData = $.data;
 
-			if (values.connection && values.query && config.algorithm) {
+			if (inputData.connection && inputData.url) {
+				var dbquery = "";
+				if (inputData.query && inputData.query.dbquery) {
+					dbquery = inputData.query.dbquery;
+				}
 				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'
+					"algorithm": {
+						"source": config.algorithm,
+						"requirements": config.algorithmrequirements.split(' ').join('\n'),
+						"output": 'output'
+					},
+					"config": inputData
 				};
+				$.send('payload', payload);
 				let options = {
 					method: 'POST',
 					headers: {
@@ -43,20 +48,20 @@
 					},
 					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;
 		};
@@ -75,6 +80,7 @@
 <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>
@@ -84,9 +90,126 @@
 		<div data---="codemirror__?.algorithm__type:python;minheight:300;parent:auto;margin:60;tabs:true;trim:true" class="m"></div>
 	</div>
 </settings>
+
+<style>
+	.CLASS .padding { padding: 0 10px 10px; }
+	.CLASS footer > div { margin: 10px; }
+	.CLASS pre { font-size: 10px; margin: 0; padding: 5px; background-color: #F0F0F0; border-radius: var(--radius); }
+	.CLASS button { width: 100%; height: 24px; border: 1px solid #E0E0E0; border-radius: var(--radius); color: #000; background-color: #F0F0F0; margin: 0; }
+	.CLASS button:hover { background-color: #F8F8F8; }
+	.CLASS button:active { background-color: #E0E0E0; }
+	.CLASS .ui-objecttree { background-color: #f0f0f0; padding: 4px; }
+	.CLASS .largetext { max-height: 100px; overflow-y: auto; }
+
+	.ui-dark .CLASS button { border-color: #404040; color: #FFF; background-color: #222; }
+	.ui-dark .CLASS button:hover { background-color: #303030; }
+	.ui-dark .CLASS button:active { background-color: #404040; }
+
+	.CLASS .output { text-align: right }
+</style>
+
+
 <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>
+	<!--div class="padding">
+		<button class="exec">Edit</button>
+	</div-->
 </body>
+
+
+<script>
+
+	var newNotebook = {
+		"name": "aaaa1.ipynb",
+		"path": "aaaa1.ipynb",
+		"content": {
+			"cells": [
+				{
+					"cell_type": "code",
+					"metadata": {
+						"trusted": true
+					},
+					"outputs": [],
+					"source": ""
+				}
+			],
+			"metadata": {
+				"kernelspec": {
+					"display_name": "Python 3 (ipykernel)",
+					"language": "python",
+					"name": "python3"
+				},
+				"language_info": {
+					"codemirror_mode": {
+						"name": "ipython",
+						"version": 3
+					},
+					"file_extension": ".py",
+					"mimetype": "text/x-python",
+					"name": "python",
+					"nbconvert_exporter": "python",
+					"pygments_lexer": "ipython3",
+					"version": "3.10.0"
+				}
+			},
+			"nbformat": 4,
+			"nbformat_minor": 5
+		},
+		"type": "notebook"
+	};
+
+	TOUCH(function(exports, reinit) {
+		if (!reinit) {
+			exports.element.on('click', 'button', function() {
+				var id = exports.config.jyputerid || '_blank';
+				var name = `${id}.ipynb`;
+				var host = "https://jupyterlab.typerefinery.localhost:8101";
+				//var host = "http://localhost:8888";
+				var api_url =  `${host}/api/contents/${name}`;
+				var open_url =  `${host}/lab/tree/${name}`;
+				var createPayload = Object.assign({}, newNotebook);
+				createPayload.name = name;
+				createPayload.path = name;
+				createPayload.content.cells[0].source = exports.config.algorithm;
+				console.log(createPayload);
+				console.log(JSON.stringify(createPayload));
+				$.ajax({
+					url: api_url,
+					type: 'PUT',
+					dataType : "json",
+					data: JSON.stringify(createPayload),
+					contentType: "application/json",
+					success: function(data) {
+						console.log("success");
+						//play with data
+						console.log(data);
+						window.open(open_url,id);
+					},
+					error: function (xhr, ajaxOptions, thrownError) {
+						console.log("error");
+						console.log(xhr.status);
+						console.log(thrownError);
+					},
+					complete: function (xhr, textStatus) {
+						console.log("complete");
+						console.log(xhr.status);
+						console.log(textStatus);
+					},
+					statusCode: {
+						400: function() {
+							console.log("statusCode");
+							console.log("bad request");
+						}
+					}
+				});
+  				var headers1 = {'ContentType': 'application/json'};
+
+
+			});
+		}
+	});
+
+</script>
diff --git a/components/api-datastoreconnection.html b/components/api-datastoreconnection.html
@@ -1,13 +1,13 @@
 <script total>
-	
+
 	exports.id = 'typerefinery_api_datastore_connection';
 	exports.name = 'API Datastore Connection';
 	exports.icon = 'fa fa-code';
 	exports.group = '@TypeRefinery';
 	exports.author = 'TypeRefinery.io';
-	exports.version = '1';
-	
-	exports.config = { title: exports.name, version: exports.version, endpoint: 'http://127.0.0.1:8000/datastore/connection', connectionid:'' };
+	exports.version = '3';
+
+	exports.config = { title: exports.name, version: exports.version, endpoint: 'http://127.0.0.1:8000/datastore/connection', connectionid:'defaultconnection' };
 	exports.inputs = [{ id: 'input', name: 'Input' }];
 	exports.outputs = [{ id: 'output', name: 'Output' }];
 
@@ -17,6 +17,7 @@
 		instance.message = async function($) {
 			var connectionsList;
 
+			var inputData = $.data;
 			// Getting all the connections from the store
 			const endpoint = config.endpoint;
 			const res = await fetch(endpoint);
@@ -29,13 +30,14 @@
 			const connection = res_data.find(el => el.connectionid === config.connectionid);
 
 			if(connection) {
-				const connectionDetails = {
+				inputData.connection = {
 					dbhost: connection.host,
 					dbport: connection.port,
 					dbdatabase: connection.database,
 				}
+
 				// send the connection details as the output of this block
-				$.send('output', connectionDetails);
+				$.send('output', inputData);
 				$.destroy();
 			}
 			// Set the connections dropdown in the UI
@@ -82,4 +84,4 @@
 		<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>
+</body>
diff --git a/components/api-datastorequery.html b/components/api-datastorequery.html
@@ -17,6 +17,7 @@
 		instance.message = async function($) {
 			var queryList;
 
+			var inputData = $.data;
 			// Getting all the queries from the store
 			const endpoint = config.endpoint;
 			const res = await fetch(endpoint);
@@ -29,9 +30,11 @@
 			const selectedQuery = res_data.find(el => el.queryid === config.queryid)
 
 			if(selectedQuery) {
-				const queryDetails = { dbquery: selectedQuery.query };
+				inputData.query = {
+					dbquery: selectedQuery.query,
+				}
 				// send the query details as the output of this block
-				$.send('output', queryDetails);
+				$.send('output', inputData);
 				$.destroy();
 			}
 			// Set the queries dropdown in the UI

diff --git a/components/api-datastoretheme.html b/components/api-datastoretheme.html
@@ -17,6 +17,7 @@
 		instance.message = async function($) {
 			var themesList;
 
+			var inputData = $.data;
 			// Getting all the themes from the store
 			const endpoint = config.endpoint;
 			const res = await fetch(endpoint);
@@ -29,9 +30,11 @@
 			const selectedTheme = res_data.find(el => el.themeid === config.themeid)
 
 			if(selectedTheme) {
-				const themeDetails = JSON.parse(selectedTheme.theme);
+				inputData.theme = {
+					theme: selectedTheme.theme,
+				}				
 				// send the theme details as the output of this block
-				$.send('output', themeDetails);
+				$.send('output', inputData);
 				$.destroy();
 			}