diff --git a/.gitignore b/.gitignore index 0ce0c0478..7f24c98ef 100644 --- a/.gitignore +++ b/.gitignore @@ -76,3 +76,6 @@ src/Redux/Store.js #GetStarted Images src/assets/images/GetStarted/* + +#ThirdPartyServices Images +src/assets/images/ThirdPartyServices/* diff --git a/package-lock.json b/package-lock.json index 74874da5a..441d637ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1255,28 +1255,180 @@ } }, "@material-ui/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.1.0.tgz", - "integrity": "sha512-dpS7OvW4eBInskB3l72htaBY+3VFfgEs0UiNczyJyqb6SjymVx7ymi0BnwfUOWJYwPq0jfRqPddy0ThADBqvHQ==", - "requires": { - "@babel/runtime": "^7.2.0", - "@material-ui/styles": "^4.1.0", - "@material-ui/system": "^4.1.0", - "@material-ui/types": "^4.1.0", - "@material-ui/utils": "^4.1.0", - "@types/react-transition-group": "^2.0.16", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.4.0.tgz", + "integrity": "sha512-p6yDcLYYHzJD0A6im+prcCahZBdlhh2OrTGQ4W1XN1X5uiMIg4niJ8FYBpgV0ssaluO+EYlaAKp2qGeMNRr/bA==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.3.3", + "@material-ui/system": "^4.3.3", + "@material-ui/types": "^4.1.1", + "@material-ui/utils": "^4.4.0", + "@types/react-transition-group": "^4.2.0", "clsx": "^1.0.2", - "convert-css-length": "^2.0.0", - "debounce": "^1.1.0", - "deepmerge": "^3.0.0", + "convert-css-length": "^2.0.1", + "deepmerge": "^4.0.0", "hoist-non-react-statics": "^3.2.1", "is-plain-object": "^3.0.0", "normalize-scroll-left": "^0.2.0", "popper.js": "^1.14.1", "prop-types": "^15.7.2", - "react-event-listener": "^0.6.6", "react-transition-group": "^4.0.0", "warning": "^4.0.1" + }, + "dependencies": { + "@material-ui/styles": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.3.3.tgz", + "integrity": "sha512-quupQ6RYXbtKBJxhLkF3RQx6LSfrfuh2lYpILvk7p9XNkfqOQq36fuNVgrJ/A+NNn03uqDFfQYIWh4CByKr4hA==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.7.1", + "@material-ui/types": "^4.1.1", + "@material-ui/utils": "^4.1.0", + "clsx": "^1.0.2", + "csstype": "^2.5.2", + "deepmerge": "^4.0.0", + "hoist-non-react-statics": "^3.2.1", + "jss": "10.0.0-alpha.24", + "jss-plugin-camel-case": "10.0.0-alpha.24", + "jss-plugin-default-unit": "10.0.0-alpha.24", + "jss-plugin-global": "10.0.0-alpha.24", + "jss-plugin-nested": "10.0.0-alpha.24", + "jss-plugin-props-sort": "10.0.0-alpha.24", + "jss-plugin-rule-value-function": "10.0.0-alpha.24", + "jss-plugin-vendor-prefixer": "10.0.0-alpha.24", + "prop-types": "^15.7.2", + "warning": "^4.0.1" + } + }, + "@material-ui/types": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.1.tgz", + "integrity": "sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==", + "requires": { + "@types/react": "*" + } + }, + "@material-ui/utils": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.4.0.tgz", + "integrity": "sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.6" + } + }, + "@types/react-transition-group": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.2.tgz", + "integrity": "sha512-YfoaTNqBwbIqpiJ5NNfxfgg5kyFP1Hqf/jqBtSWNv0E+EkkxmN+3VD6U2fu86tlQvdAc1o0SdWhnWFwcRMTn9A==", + "requires": { + "@types/react": "*" + } + }, + "css-vendor": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.6.tgz", + "integrity": "sha512-buv8FoZh84iMrtPHYGYll00/qSNV0gYO6E/GUCjUPTsSPj7uf/wot/QZwig+7qdFGxJ7HjOSJoclbhag09TVUQ==", + "requires": { + "@babel/runtime": "^7.5.5", + "is-in-browser": "^1.0.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz", + "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "deepmerge": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.0.0.tgz", + "integrity": "sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww==" + }, + "jss": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.24.tgz", + "integrity": "sha512-kfuSitcj7MTrDtSPLkrWcZppgZlTE3A+cqrkC+Z10WYROt0RXIWINAaK8tE2ohwkDfUlaM1YcRYvV3iT6YNFTA==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^2.6.5", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.24.tgz", + "integrity": "sha512-cRYLbGl6oO9wdGXp3hn+xqc8pw8bjaui25dDYuEeEsRZMh5/OKl3ByYxDT3PLKgFqouy5Xo+YmLGVH8l+nnEdQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.0.0-alpha.24" + } + }, + "jss-plugin-default-unit": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.24.tgz", + "integrity": "sha512-1E1XlJqJ/9I1lR5EO/tA75U1LIIicKvW6xZEKLxAP8NC/rUjI+yBQBTBJn61LOpua51e7fgW8me46Z+iuXiC4A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.24" + } + }, + "jss-plugin-global": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.24.tgz", + "integrity": "sha512-3LoxrZloF4tvXrS5S7enV9OhtaxXsEP3BQdiE76vI/ecCmgNDZNpnPd8MG20ptn2iAOsoMGfoMX20Ea1IKl/Mg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.24" + } + }, + "jss-plugin-nested": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.24.tgz", + "integrity": "sha512-BWU6NaRZTVSJc7N+3FeHacdkFOjCMThouoRQPCWVxeT0nmAVlVGwgYzChcI+vzncx+UaRQC0x+01FYhVQ2xAFA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.24", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.24.tgz", + "integrity": "sha512-TB4RpXwnGSEE58rN2RRzcWqhIaz0oAS1UBg10mk1fuLpkKyHEJWuuZXzgGih23Ivl/8LDVzTF+QRY5JagMUUGg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.24" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.24.tgz", + "integrity": "sha512-uFw4tf8PN48bdv4ZcDjG3OzKPIFZ4gpCC1cWO/dyexYfFIubX3bnQUbK4B0wPNe9LJU4KQo8s4F42B8B1ADTrA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.24" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.24.tgz", + "integrity": "sha512-hffKj0kSSvZsXs6RYEylpBlEGjryMzU1lsWqC5vQAT/Xb3tDe60BbEarEOFLBGv7EfyajXkuRwlXAQocV5ejCg==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.5", + "jss": "10.0.0-alpha.24" + } + } } }, "@material-ui/icons": { @@ -1337,14 +1489,21 @@ } }, "@material-ui/system": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.1.0.tgz", - "integrity": "sha512-1v/J2X820CzYhiH46z9qcbd+AVcQ+578ycsHAo6MVpu5eI399S6t+OcO6vg0FPhCrLshWynNGNfeF0JcLlrYzA==", + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.3.3.tgz", + "integrity": "sha512-j7JyvlhcTdc1wV6HzrDTU7XXlarxYXEUyzyHawOA0kCGmYVN2uFHENQRARLUdl+mEmuXO4TsAhNAiqiKakkFMg==", "requires": { - "@babel/runtime": "^7.2.0", - "deepmerge": "^3.0.0", + "@babel/runtime": "^7.4.4", + "deepmerge": "^4.0.0", "prop-types": "^15.7.2", "warning": "^4.0.1" + }, + "dependencies": { + "deepmerge": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.0.0.tgz", + "integrity": "sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww==" + } } }, "@material-ui/types": { @@ -3873,11 +4032,6 @@ "date-now": "^0.1.4" } }, - "console-polyfill": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/console-polyfill/-/console-polyfill-0.1.2.tgz", - "integrity": "sha1-ls/tUcr3gYn2mVcubxgnHcN8DjA=" - }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -3902,13 +4056,9 @@ "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" }, "convert-css-length": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.0.tgz", - "integrity": "sha512-ygBgHNzImHJ/kjgqdzC0oaY2+EMID3s88/CZD2C9O1stM3PwsOwXzzlFTTkZy/bPZe0wjyt1UoYjilfunQGjlw==", - "requires": { - "console-polyfill": "^0.1.2", - "parse-unit": "^1.0.1" - } + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz", + "integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==" }, "convert-source-map": { "version": "1.6.0", @@ -4465,11 +4615,6 @@ "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=" }, - "debounce": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", - "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==" - }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -6938,7 +7083,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -12576,7 +12722,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -12594,11 +12741,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -12611,15 +12760,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -12722,7 +12874,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -12732,6 +12885,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -12744,17 +12898,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -12771,6 +12928,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -12843,7 +13001,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -12853,6 +13012,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -12928,7 +13088,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -12958,6 +13119,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -12975,6 +13137,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -13013,11 +13176,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -14267,7 +14432,7 @@ "bs58": "^4.0.1", "buffer": "^5.2.1", "cids": "~0.5.5", - "concat-stream": "github:hugomrdias/concat-stream#057bc7b5d6d8df26c8cf00a3f151b6721a0a8034", + "concat-stream": "github:hugomrdias/concat-stream#feat/smaller", "debug": "^4.1.0", "detect-node": "^2.0.4", "end-of-stream": "^1.4.1", @@ -14289,7 +14454,7 @@ "multibase": "~0.6.0", "multicodec": "~0.5.0", "multihashes": "~0.4.14", - "ndjson": "github:hugomrdias/ndjson#4db16da6b42e5b39bf300c3a7cde62abb3fa3a11", + "ndjson": "github:hugomrdias/ndjson#feat/readable-stream3", "once": "^1.4.0", "peer-id": "~0.12.2", "peer-info": "~0.15.1", @@ -22750,7 +22915,7 @@ "bs58": "^4.0.1", "buffer": "^5.2.1", "cids": "~0.5.5", - "concat-stream": "github:hugomrdias/concat-stream#057bc7b5d6d8df26c8cf00a3f151b6721a0a8034", + "concat-stream": "github:hugomrdias/concat-stream#feat/smaller", "debug": "^4.1.0", "detect-node": "^2.0.4", "end-of-stream": "^1.4.1", @@ -22772,7 +22937,7 @@ "multibase": "~0.6.0", "multicodec": "~0.5.0", "multihashes": "~0.4.14", - "ndjson": "github:hugomrdias/ndjson#4db16da6b42e5b39bf300c3a7cde62abb3fa3a11", + "ndjson": "github:hugomrdias/ndjson#feat/readable-stream3", "once": "^1.4.0", "peer-id": "~0.12.2", "peer-info": "~0.15.1", @@ -26533,11 +26698,6 @@ "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=" }, - "parse-unit": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz", - "integrity": "sha1-fhu21b7zh0wo45JSaiVBFwKR7s8=" - }, "parse5": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", @@ -28775,9 +28935,9 @@ } }, "react-transition-group": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.1.tgz", - "integrity": "sha512-K/N1wqJ2GRP2yj3WBqEUYa0KV5fiaAWpUfU9SpHOHefeKvyrO+VrnMBML21M19QZoVbDZKmuQFHZYoMMi1xuJA==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.2.tgz", + "integrity": "sha512-uP0tjqewtvjb7kGZFpZYPoD/NlVZmIgts9eTt1w35pAaEApPxQGv94lD3VkqyXf2aMqrSGwhs6EV/DLaoKbLSw==", "requires": { "@babel/runtime": "^7.4.5", "dom-helpers": "^3.4.0", diff --git a/package.json b/package.json index 428f03c4a..073c3aad5 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "@improbable-eng/grpc-web": "^0.9.6", - "@material-ui/core": "^4.0.2", + "@material-ui/core": "^4.4.0", "@material-ui/icons": "^4.1.0", "@material-ui/lab": "^3.0.0-alpha.30", "@material-ui/styles": "^4.0.2", diff --git a/src/assets/thirdPartyServices/snet/opencog_vqa/index.js b/src/assets/thirdPartyServices/snet/opencog_vqa/index.js index 29c68192d..38edb3ba6 100644 --- a/src/assets/thirdPartyServices/snet/opencog_vqa/index.js +++ b/src/assets/thirdPartyServices/snet/opencog_vqa/index.js @@ -9,7 +9,6 @@ export default class VisualQAOpencog extends React.Component { constructor(props) { super(props); this.submitAction = this.submitAction.bind(this); - this.handleServiceName = this.handleServiceName.bind(this); this.handleFormUpdate = this.handleFormUpdate.bind(this); this.getImageData = this.getImageData.bind(this); @@ -18,12 +17,12 @@ export default class VisualQAOpencog extends React.Component { code_repo: "https://github.com/singnet/semantic-vision/tree/master/services/vqa-service", reference: "https://github.com/singnet/semantic-vision", - serviceName: undefined, - methodName: undefined, + serviceName: "VqaService", + methodName: "answer", imageData: undefined, question: "", - use_pm: false, + use_pm: true, response: undefined, isComplete : false @@ -32,132 +31,40 @@ export default class VisualQAOpencog extends React.Component { this.serviceMethods = []; this.allServices = []; this.methodsForAllServices = []; - this.parseProps(props); - } - - componentWillReceiveProps(nextProps) { - if (this.isComplete !== nextProps.isComplete) { - this.parseProps(nextProps); - } - } - - parseProps(nextProps) { - this.isComplete = nextProps.isComplete; - if (!this.isComplete) { - this.parseServiceSpec(nextProps.serviceSpec); - } else { - console.log(nextProps.response); - if (typeof nextProps.response !== "undefined") { - this.state.response = nextProps.response; - } - } - } - - parseServiceSpec(serviceSpec) { - const packageName = Object.keys(serviceSpec.nested).find( - key => typeof serviceSpec.nested[key] === "object" && hasOwnDefinedProperty(serviceSpec.nested[key], "nested") - ); - - var objects = undefined; - var items = undefined; - if (typeof packageName !== "undefined") { - items = serviceSpec.lookup(packageName); - objects = Object.keys(items); - } else { - items = serviceSpec.nested; - objects = Object.keys(serviceSpec.nested); - } - - this.allServices.push("Select a service"); - this.methodsForAllServices = []; - objects.map(rr => { - if (typeof items[rr] === "object" && items[rr] !== null && items[rr].hasOwnProperty("methods")) { - this.allServices.push(rr); - this.methodsForAllServices.push(rr); - - var methods = Object.keys(items[rr]["methods"]); - methods.unshift("Select a method"); - this.methodsForAllServices[rr] = methods; - } - }); } handleFormUpdate(event) { this.setState({ [event.target.name]: event.target.value }); } - handleServiceName(event) { - var strService = event.target.value; - this.setState({ - serviceName: strService, - }); - console.log("Selected service is " + strService); - var data = this.methodsForAllServices[strService]; - if (typeof data === "undefined") { - data = []; - } - this.serviceMethods = data; - } - getImageData(imgData) { this.state.imageData = imgData; } submitAction() { - const { methodName, question,use_pm,imageData } = this.state; - const methodDescriptor = VqaService[methodName]; - const request = new methodDescriptor.requestType(); - - request.setQuestion(question) - request.setUsePm(use_pm) - request.setImageData(imageData) - - - const props = { - request, - onEnd: ({ message }) => { - this.setState({ isComplete: true, - response: { answer: message.getAnswer(),ok:message.getOk(),error_message:message.getErrorMessage() } }); - }, - }; - - this.props.serviceClient.unary(methodDescriptor, props); + const { methodName, question,use_pm,imageData } = this.state; + const methodDescriptor = VqaService[methodName]; + const request = new methodDescriptor.requestType(); + + request.setQuestion(question) + request.setUsePm(use_pm==="true") + request.setImageData(imageData) + + const props = { + request, + onEnd: ({ message }) => { + this.setState({ + response: { answer: message.getAnswer(),ok:message.getOk(),error_message:message.getErrorMessage() }, + }); + }, + }; + + this.props.serviceClient.unary(methodDescriptor, props); } renderForm() { return ( -
-
- Service Name -
-
- -
-
-
-
- Method Name -
-
- -
-
Use pattern matcher or URE @@ -168,15 +75,15 @@ export default class VisualQAOpencog extends React.Component { style={{ height: "30px", width: "250px", fontSize: "13px", marginBottom: "5px" }} onChange={this.handleFormUpdate} > - +
-
+ {/*
Image URL -
+
*/}
@@ -233,7 +140,8 @@ export default class VisualQAOpencog extends React.Component { let delta_time = "\n"; let answer = "\n"; if (typeof this.state.response === "object") { - delta_time = this.state.response.deltaTime + "s\n"; + // There is no response from the service for deltaTime + // delta_time = this.state.response.deltaTime + "s\n"; if (this.state.response.ok) { answer = "answer " + this.state.response.answer; } else { @@ -246,8 +154,9 @@ export default class VisualQAOpencog extends React.Component {

Response from service is: 

+          Question : {this.state.question}

           Status : {status}
-          Time : {delta_time}
+          {/* Time : {delta_time} */}
           {answer}
@@ -255,7 +164,7 @@ export default class VisualQAOpencog extends React.Component { } render() { - if (this.state.isComplete) return
{this.renderComplete()}
; + if (this.props.isComplete) return
{this.renderComplete()}
; else { return
{this.renderForm()}
; } diff --git a/src/assets/thirdPartyServices/snet/text_generation/index.js b/src/assets/thirdPartyServices/snet/text_generation/index.js index 1c1c4b24a..1e344e32c 100644 --- a/src/assets/thirdPartyServices/snet/text_generation/index.js +++ b/src/assets/thirdPartyServices/snet/text_generation/index.js @@ -1,60 +1,159 @@ import React from "react"; -import { hasOwnDefinedProperty } from "../../../../utility/JSHelper"; -import { makeStyles } from '@material-ui/core/styles'; -import Button from "@material-ui/core/Button"; -import Slider from "@material-ui/lab/Slider"; +import { withStyles } from "@material-ui/styles"; +import Slider from "@material-ui/core/Slider"; +import Grid from "@material-ui/core/Grid"; +import OutlinedInput from "@material-ui/core/OutlinedInput"; +import InputLabel from "@material-ui/core/InputLabel"; +import MenuItem from "@material-ui/core/MenuItem"; +import FormControl from "@material-ui/core/FormControl"; +import Select from "@material-ui/core/Select"; +import TextField from "@material-ui/core/TextField"; +import InfoIcon from "@material-ui/icons/Info"; +import Avatar from "@material-ui/core/Avatar"; -import {GENGPT2} from "./ntg_pb_service" +import StyledButton from "../../../../components/common/StyledButton"; + +import BarackObama from "../../../images/ThirdPartyServices/snet/text_generation/BarackObama.jpg"; +import BarackObamaAvatar from "../../../images/ThirdPartyServices/snet/text_generation/BarackObama_avatar.jpg"; + +import BernieSanders from "../../../images/ThirdPartyServices/snet/text_generation/BernieSanders.jpg"; +import BernieSandersAvatar from "../../../images/ThirdPartyServices/snet/text_generation/BernieSanders_avatar.jpg"; + +import BethanyBrookshire from "../../../images/ThirdPartyServices/snet/text_generation/BethanyBrookshire.jpg"; +import BethanyBrookshireAvatar from "../../../images/ThirdPartyServices/snet/text_generation/BethanyBrookshire_avatar.jpg"; + +import BillGates from "../../../images/ThirdPartyServices/snet/text_generation/BillGates.jpg"; +import BillGatesAvatar from "../../../images/ThirdPartyServices/snet/text_generation/BillGates_avatar.jpg"; + +import BrianSwitek from "../../../images/ThirdPartyServices/snet/text_generation/BrianSwitek.jpg"; +import BrianSwitekAvatar from "../../../images/ThirdPartyServices/snet/text_generation/BrianSwitek_avatar.jpg"; + +import ConanOBrien from "../../../images/ThirdPartyServices/snet/text_generation/ConanOBrien.jpg"; +import ConanOBrienAvatar from "../../../images/ThirdPartyServices/snet/text_generation/ConanOBrien_avatar.jpg"; + +import DeborahBlum from "../../../images/ThirdPartyServices/snet/text_generation/DeborahBlum.jpg"; +import DeborahBlumAvatar from "../../../images/ThirdPartyServices/snet/text_generation/DeborahBlum_avatar.jpg"; + +import DeepakChopra from "../../../images/ThirdPartyServices/snet/text_generation/DeepakChopra.jpg"; +import DeepakChopraAvatar from "../../../images/ThirdPartyServices/snet/text_generation/DeepakChopra_avatar.jpg"; + +import DonaldTrump from "../../../images/ThirdPartyServices/snet/text_generation/DonaldTrump.jpg"; +import DonaldTrumpAvatar from "../../../images/ThirdPartyServices/snet/text_generation/DonaldTrump_avatar.jpg"; + +import DwayneJohnson from "../../../images/ThirdPartyServices/snet/text_generation/DwayneJohnson.jpg"; +import DwayneJohnsonAvatar from "../../../images/ThirdPartyServices/snet/text_generation/DwayneJohnson_avatar.jpg"; + +import EllenDeGeneres from "../../../images/ThirdPartyServices/snet/text_generation/EllenDeGeneres.jpg"; +import EllenDeGeneresAvatar from "../../../images/ThirdPartyServices/snet/text_generation/EllenDeGeneres_avatar.jpg"; + +import ElonMusk from "../../../images/ThirdPartyServices/snet/text_generation/ElonMusk.jpg"; +import ElonMuskAvatar from "../../../images/ThirdPartyServices/snet/text_generation/ElonMusk_avatar.jpg"; + +import EricWeinstein from "../../../images/ThirdPartyServices/snet/text_generation/EricWeinstein.png"; +import EricWeinsteinAvatar from "../../../images/ThirdPartyServices/snet/text_generation/EricWeinstein_avatar.png"; + +import god from "../../../images/ThirdPartyServices/snet/text_generation/god.jpg"; +import godAvatar from "../../../images/ThirdPartyServices/snet/text_generation/god_avatar.jpg"; + +import HillaryClinton from "../../../images/ThirdPartyServices/snet/text_generation/HillaryClinton.jpg"; +import HillaryClintonAvatar from "../../../images/ThirdPartyServices/snet/text_generation/HillaryClinton_avatar.jpg"; + +import JimmyFallon from "../../../images/ThirdPartyServices/snet/text_generation/JimmyFallon.jpg"; +import JimmyFallonAvatar from "../../../images/ThirdPartyServices/snet/text_generation/JimmyFallon_avatar.jpg"; + +import JoeBiden from "../../../images/ThirdPartyServices/snet/text_generation/JoeBiden.jpg"; +import JoeBidenAvatar from "../../../images/ThirdPartyServices/snet/text_generation/JoeBiden_avatar.jpg"; + +import JoeRogan from "../../../images/ThirdPartyServices/snet/text_generation/JoeRogan.png"; +import JoeRoganAvatar from "../../../images/ThirdPartyServices/snet/text_generation/JoeRogan_avatar.png"; + +import JordanPeterson from "../../../images/ThirdPartyServices/snet/text_generation/JordanPeterson.jpg"; +import JordanPetersonAvatar from "../../../images/ThirdPartyServices/snet/text_generation/JordanPeterson_avatar.jpg"; + +import JustinBieber from "../../../images/ThirdPartyServices/snet/text_generation/JustinBieber.jpg"; +import JustinBieberAvatar from "../../../images/ThirdPartyServices/snet/text_generation/JustinBieber_avatar.jpg"; + +import KatyPerry from "../../../images/ThirdPartyServices/snet/text_generation/KatyPerry.jpg"; +import KatyPerryAvatar from "../../../images/ThirdPartyServices/snet/text_generation/KatyPerry_avatar.jpg"; + +import KevinHart from "../../../images/ThirdPartyServices/snet/text_generation/KevinHart.jpg"; +import KevinHartAvatar from "../../../images/ThirdPartyServices/snet/text_generation/KevinHart_avatar.jpg"; + +import KimKardashian from "../../../images/ThirdPartyServices/snet/text_generation/KimKardashian.png"; +import KimKardashianAvatar from "../../../images/ThirdPartyServices/snet/text_generation/KimKardashian_avatar.png"; + +import LadyGaga from "../../../images/ThirdPartyServices/snet/text_generation/LadyGaga.jpg"; +import LadyGagaAvatar from "../../../images/ThirdPartyServices/snet/text_generation/LadyGaga_avatar.jpg"; + +import NeildeGrasseTyson from "../../../images/ThirdPartyServices/snet/text_generation/NeildeGrasseTyson.jpg"; +import NeildeGrasseTysonAvatar from "../../../images/ThirdPartyServices/snet/text_generation/NeildeGrasseTyson_avatar.jpg"; + +import PhilipPlait from "../../../images/ThirdPartyServices/snet/text_generation/PhilipPlait.jpg"; +import PhilipPlaitAvatar from "../../../images/ThirdPartyServices/snet/text_generation/PhilipPlait_avatar.jpg"; + +import RebeccaSkloot from "../../../images/ThirdPartyServices/snet/text_generation/RebeccaSkloot.jpg"; +import RebeccaSklootAvatar from "../../../images/ThirdPartyServices/snet/text_generation/RebeccaSkloot_avatar.jpg"; + +import RichardDawkins from "../../../images/ThirdPartyServices/snet/text_generation/RichardDawkins.jpg"; +import RichardDawkinsAvatar from "../../../images/ThirdPartyServices/snet/text_generation/RichardDawkins_avatar.jpg"; + +import RickyGervais from "../../../images/ThirdPartyServices/snet/text_generation/RickyGervais.jpg"; +import RickyGervaisAvatar from "../../../images/ThirdPartyServices/snet/text_generation/RickyGervais_avatar.jpg"; + +import SamHarris from "../../../images/ThirdPartyServices/snet/text_generation/SamHarris.jpg"; +import SamHarrisAvatar from "../../../images/ThirdPartyServices/snet/text_generation/SamHarris_avatar.jpg"; + +import TerenceMcKenna from "../../../images/ThirdPartyServices/snet/text_generation/TerenceMcKenna.jpg"; +import TerenceMcKennaAvatar from "../../../images/ThirdPartyServices/snet/text_generation/TerenceMcKenna_avatar.jpg"; + +import { GENGPT2 } from "./ntg_pb_service"; +import { useStyles } from "./styles"; +import AnchorLink from "../../../../components/common/AnchorLink"; const initialUserInput = { start_text: "", run_name: "trump", - temperature : 1.2, + temperature: 0.8, top_k: 20, - length:256, + length: 256, }; -const runNames = [{ "key":"badastronomer", "value": "Phil Plait",}, -{ "key":"barackobama", "value": "Barack Obama",}, -{ "key":"beebrookshire", "value": "Bethany Brookshire",}, -{ "key":"berniesanders", "value": "Bernie Sanders",}, -{ "key":"billgates", "value": "Bill Gates",}, -{ "key":"cmdr_hadfield", "value": "Chris Hadfield",}, -{ "key":"conanobrien", "value": "Conan O'Brien",}, -{ "key":"deborahblum", "value": "Deborah Blum",}, -{ "key":"deepakchopra", "value": "Deepak Chopra",}, -{ "key":"dril", "value": "wint",}, -{ "key":"elonmusk", "value": "Elon Musk",}, -{ "key":"ericrweinstein", "value": "Eric Weinstein",}, -{ "key":"hillaryclinton", "value": "Hillary Clinton",}, -{ "key":"jimmyfallon", "value": "jimmyfallon",}, -{ "key":"joebiden", "value": "Joe Biden",}, -{ "key":"joerogan", "value": "Joe Rogan",}, -{ "key":"jordanbpeterson", "value": "Dr Jordan B Peterson",}, -{ "key":"justinbieber", "value": "Justin Bieber",}, -{ "key":"katyperry", "value": "Katy Perry",}, -{ "key":"kevinhart4real", "value": "Kevin Hart",}, -{ "key":"kimkardashian", "value": "Kim Kardashian West",}, -{ "key":"ladygaga", "value": "Lady Gaga",}, -{ "key":"laelaps", "value": "Brian Switek",}, -{ "key":"neiltyson", "value": "Neil deGrasse Tyson",}, -{ "key":"nietzschequotes", "value": "NietzscheQuotes",}, -{ "key":"officialmcafee", "value": "John McAfee",}, -{ "key":"trump", "value": "Donald J. Trump",}, -{ "key":"rebeccaskloot", "value": "Rebecca Skloot",}, -{ "key":"richarddawkins", "value": "Richard Dawkins",}, -{ "key":"rickygervais", "value": "Ricky Gervais",}, -{ "key":"samharrisorg", "value": "Sam Harris",}, -{ "key":"terencemckenna_", "value": "Terence McKenna" ,}, -{ "key":"theellenshow", "value": "Ellen DeGeneres",}, -{ "key":"therock", "value": "Dwayne Johnson",}, -{ "key":"thetweetofgod", "value": "God",}, -{ "key":"ticbot", "value": "TicBot",}, -{ "key":"veryshortstory", "value": "Very Short Story",}, -{ "key":"virginiahughes", "value": "Virginia Hughes"}] - - -export default class TextGenerationService extends React.Component { +const runNames = [ + { key: "badastronomer", value: "Phil Plait", image: PhilipPlait, avatar: PhilipPlaitAvatar }, + { key: "barackobama", value: "Barack Obama", image: BarackObama, avatar: BarackObamaAvatar }, + { key: "beebrookshire", value: "Bethany Brookshire", image: BethanyBrookshire, avatar: BethanyBrookshireAvatar }, + { key: "berniesanders", value: "Bernie Sanders", image: BernieSanders, avatar: BernieSandersAvatar }, + { key: "billgates", value: "Bill Gates", image: BillGates, avatar: BillGatesAvatar }, + { key: "conanobrien", value: "Conan O'Brien", image: ConanOBrien, avatar: ConanOBrienAvatar }, + { key: "deborahblum", value: "Deborah Blum", image: DeborahBlum, image: DeborahBlumAvatar }, + { key: "deepakchopra", value: "Deepak Chopra", image: DeepakChopra, avatar: DeepakChopraAvatar }, + { key: "elonmusk", value: "Elon Musk", image: ElonMusk, avatar: ElonMuskAvatar }, + { key: "ericrweinstein", value: "Eric Weinstein", image: EricWeinstein, avatar: EricWeinsteinAvatar }, + { key: "hillaryclinton", value: "Hillary Clinton", image: HillaryClinton, avatar: HillaryClintonAvatar }, + { key: "jimmyfallon", value: "jimmyfallon", image: JimmyFallon, avatar: JimmyFallonAvatar }, + { key: "joebiden", value: "Joe Biden", image: JoeBiden, avatar: JoeBidenAvatar }, + { key: "joerogan", value: "Joe Rogan", image: JoeRogan, avatar: JoeRoganAvatar }, + { key: "jordanbpeterson", value: "Dr Jordan B Peterson", image: JordanPeterson, avatar: JordanPetersonAvatar }, + { key: "justinbieber", value: "Justin Bieber", image: JustinBieber, avatar: JustinBieberAvatar }, + { key: "katyperry", value: "Katy Perry", image: KatyPerry, avatar: KatyPerryAvatar }, + { key: "kevinhart4real", value: "Kevin Hart", image: KevinHart, avatar: KevinHartAvatar }, + { key: "kimkardashian", value: "Kim Kardashian West", image: KimKardashian, avatar: KimKardashianAvatar }, + { key: "ladygaga", value: "Lady Gaga", image: LadyGaga, avatar: LadyGagaAvatar }, + { key: "laelaps", value: "Brian Switek", image: BrianSwitek, avatar: BrianSwitekAvatar }, + { key: "neiltyson", value: "Neil deGrasse Tyson", image: NeildeGrasseTyson, avatar: NeildeGrasseTysonAvatar }, + { key: "trump", value: "Donald J. Trump", image: DonaldTrump, avatar: DonaldTrumpAvatar }, + { key: "rebeccaskloot", value: "Rebecca Skloot", image: RebeccaSkloot, avatar: RebeccaSklootAvatar }, + { key: "richarddawkins", value: "Richard Dawkins", image: RichardDawkins, avatar: RichardDawkinsAvatar }, + { key: "rickygervais", value: "Ricky Gervais", image: RickyGervais, avatar: RickyGervaisAvatar }, + { key: "samharrisorg", value: "Sam Harris", image: SamHarris, avatar: SamHarrisAvatar }, + { key: "terencemckenna_", value: "Terence McKenna", image: TerenceMcKenna, avatar: TerenceMcKennaAvatar }, + { key: "theellenshow", value: "Ellen DeGeneres", image: EllenDeGeneres, avatar: EllenDeGeneresAvatar }, + { key: "therock", value: "Dwayne Johnson", image: DwayneJohnson, avatar: DwayneJohnsonAvatar }, + { key: "thetweetofgod", value: "God", image: god, avatar: godAvatar }, + { key: "ticbot", value: "TicBot" }, +]; + +class TextGenerationService extends React.Component { constructor(props) { super(props); this.submitAction = this.submitAction.bind(this); @@ -94,16 +193,11 @@ export default class TextGenerationService extends React.Component { } submitAction() { - - var btn = document.getElementById("invoke-button"); - btn.disabled = true; - btn.innerHTML = "Wait..."; - const { methodName, start_text, temperature, top_k, run_name, length } = this.state; const methodDescriptor = GENGPT2[methodName]; const request = new methodDescriptor.requestType(); - request.setStartText(start_text); + request.setStartText(start_text); request.setTemperature(temperature); request.setTopK(top_k); request.setRunName(run_name); @@ -116,9 +210,11 @@ export default class TextGenerationService extends React.Component { if (status !== 0) { throw new Error(statusMessage); } + const selectedRunName = runNames.find(el => el.key === this.state.run_name); + const image = selectedRunName && selectedRunName.image; this.setState({ ...initialUserInput, - response: { status: "success", answer: message.getAnswer() }, + response: { status: "success", answer: message.getAnswer(), image, start_text }, }); }, }; @@ -126,143 +222,198 @@ export default class TextGenerationService extends React.Component { this.props.serviceClient.unary(methodDescriptor, props); } + parseAvatarSrc = () => { + const selectedRunName = runNames.find(el => el.key === this.state.run_name); + return selectedRunName && selectedRunName.avatar; + }; renderForm() { + const { run_name, start_text, length: maxResponseLength, top_k, temperature } = this.state; + const { classes } = this.props; return ( - -
-
- Start tweet text -
-
- -
-
-
-
- Choose Model -
-
- -
-
- - - -
-
- Max length -
-
- + + + + + + Max Length + + + + 0 + this.changeSlider("length", val) } - > - -
-
- -
-
- Top K -
-
- this.changeSlider("length", val)} + /> + 1024 + + + + + + + Top K + + + + 0 + this.changeSlider("top_k", val) } - > - -
-
- -
-
- Temperature -
-
- this.changeSlider("top_k", val)} + /> + 100 + + + + + + + Temperature + + + + 0 + this.changeSlider("temperature", val) } - > - -
-
- - - - - -
-
- -
-
- -
-
- About -
-
- -
-
+ onChange={(e, val) => this.changeSlider("temperature", val)} + /> + 1.5 + + + + + + + ); } renderComplete() { + const { response } = this.state; + const { classes } = this.props; return ( -
-

- Response from service is: {this.state.response.answer.replace("[END BY LENGTH]", "")}{" "} -

-
+ + +

Your request has been completed. You can now vote for the agent below.

+ + + +

Results

+ + + + + + + + + + + Status + + + success + + + + + + + Input text + + + {response.start_text} + + + + + + + Response output + + + {response.answer.replace("[END BY LENGTH]", "")} + + + + ); } @@ -273,3 +424,5 @@ export default class TextGenerationService extends React.Component { } } } + +export default withStyles(useStyles)(TextGenerationService); diff --git a/src/assets/thirdPartyServices/snet/text_generation/styles.js b/src/assets/thirdPartyServices/snet/text_generation/styles.js new file mode 100644 index 000000000..13877e867 --- /dev/null +++ b/src/assets/thirdPartyServices/snet/text_generation/styles.js @@ -0,0 +1,161 @@ +export const useStyles = theme => ({ + description: { + "& p": { + margin: "25px 0 0", + color: "rgba(0,0,0,0.60)", + fontSize: 14, + letterSpacing: 0.3, + lineHeight: "21px", + }, + "& a": { + color: theme.palette.text.primary, + fontWeight: 600, + textDecoration: "none", + padding: "0 5px", + }, + }, + header: { + paddingTop: 10, + borderTop: 1, + borderTopStyle: "solid", + borderTopColor: theme.palette.text.disabledBtnBg, + marginTop: 45, + "& h4": { + padding: "0 15px", + fontSize: 18, + color: theme.palette.text.black1, + }, + }, + infoIcon: { + paddingRight: 12, + display: "none", + color: theme.palette.text.lightGray, + verticalAlign: "middle", + }, + dropdownAndAvatar: { + marginTop: 30, + display: "flex", + alignItems: "center", + }, + dropdown: { + "& > div": { + width: "95%", + "& label": { + fontFamily: theme.typography.primary, + color: theme.palette.text.darkShadedGray, + letterSpacing: 0.4, + lineHeight: "16px", + }, + "& > div": { + "& legend": { width: "110px !important" }, + }, + }, + }, + menuItem: { + fontSize: 16, + color: theme.palette.text.black1, + letterSpacing: 0.5, + lineHeight: "28px", + "&:hover": { + color: theme.palette.text.primary, + backgroundColor: theme.palette.text.offWhiteColor, + }, + }, + avatar: { + width: 72, + height: 72, + }, + textArea: { + padding: "0 30px 0 4px", + marginTop: 25, + "& svg": { paddingTop: 10 }, + "& div": { width: "94%" }, + }, + title: { + marginRight: 20, + fontSize: 14, + color: theme.palette.text.mediumShadeGray, + letterSpacing: 0.13, + lineHeight: "24px", + }, + progressBarContainer: { + marginTop: 60, + display: "flex", + }, + sliderContainer: { + maxWidth: "60%", + display: "flex", + "& .MuiSlider-root": { color: theme.palette.text.primary }, + }, + startEndNumber: { + width: 41, + borderBottomWidth: 1, + borderBottomStyle: "solid", + borderBottomColor: theme.palette.text.inputBoxBorder, + display: "inline-block", + fontSize: 16, + color: theme.palette.text.black1, + letterSpacing: 0.15, + lineHeight: "24px", + textAlign: "center", + }, + errorMsg: { margin: "25px 0 0" }, + btnContainer: { + marginTop: 30, + textAlign: "center", + "& button": { + "&:first-of-type": { padding: "13px 0 11px" }, + "&:last-of-type": { padding: "13px 68px 11px" }, + }, + }, + runTabDescription: { + margin: "25px 0", + fontSize: 14, + color: theme.palette.text.mediumShadeGray, + letterSpacing: 0.25, + lineHeight: "20px", + }, + resultsHeader: { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + "& h4": { fontSize: "20 !important" }, + "& svg": { + display: "none", + color: theme.palette.text.lightShadedGray, + }, + }, + resultsContent: { + padding: "20px 0 90px", + borderRadius: 4, + marginbottom: 40, + backgroundColor: theme.palette.text.cardBackground, + }, + imgContainer: { + width: 479, + height: 273, + margin: "0 auto", + "& img": { + width: "100%", + height: "100%", + objectFit: "contain", + }, + }, + resultDetails: { + padding: "15px 0", + borderBottomWidth: 1, + borderBottomStyle: "solid", + borderBottomColor: theme.palette.text.lightGray, + margin: "0 10px", + display: "flex", + }, + resultTitle: { + color: theme.palette.text.darkShadedGray, + fontSize: 14, + }, + resultValue: { + color: theme.palette.text.mediumShadeGray, + fontSize: 14, + }, + resultBtnContainer: { textAlign: "center" }, +}); diff --git a/src/assets/thirdPartyServices/snet/time_series_anomaly_discovery/index.js b/src/assets/thirdPartyServices/snet/time_series_anomaly_discovery/index.js index 8697c5666..d11b48c14 100644 --- a/src/assets/thirdPartyServices/snet/time_series_anomaly_discovery/index.js +++ b/src/assets/thirdPartyServices/snet/time_series_anomaly_discovery/index.js @@ -295,6 +295,9 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component { response: { status: "success", timeseries: message.getTimeseries(), density: message.getDensity(), normalized: message.getNormalized(), inverted: message.getInverted()}, }); + this.state.timeSeriesJson = JSON.parse(this.state.response.timeseries); + this.state.invertedDensityCurveJson = JSON.parse(this.state.response.inverted); + }, }; @@ -371,6 +374,7 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component { } renderComplete() { + return ( // this.props.response.output @@ -448,6 +452,7 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component { this.updateParentExansion(); if (this.props.isComplete) { + if (this.state.first_render === true) { this.state.first_render = false; this.updateRenderTimeSeries(); diff --git a/src/assets/thirdPartyServices/snet/topic_analysis/index.js b/src/assets/thirdPartyServices/snet/topic_analysis/index.js index b1dfc3716..cf1f48956 100644 --- a/src/assets/thirdPartyServices/snet/topic_analysis/index.js +++ b/src/assets/thirdPartyServices/snet/topic_analysis/index.js @@ -158,7 +158,8 @@ export default class TopicAnalysisService extends React.Component { const link = document.createElement("a"); link.setAttribute("type", "hidden"); let resp = this.state.response; - resp["handle"] = "https://tz-services-1.snet.sh:2298/topic-analysis/api/v1.0/results?handle=" + resp["handle"]; + // Concatenation already done in the render complete method + //resp["handle"] = "https://tz-services-1.snet.sh:2298/topic-analysis/api/v1.0/results?handle=" + resp["handle"]; link.setAttribute("href", "data:text/json," + JSON.stringify(resp)); link.setAttribute("download", "result.json"); document.body.appendChild(link); @@ -370,13 +371,9 @@ export default class TopicAnalysisService extends React.Component { } classes={{ title: classes.cardTitle, subheader: classes.cardSubheader }} title={

{props.cardTitle}

} - subheader={"By " + props.cardSubheader} + subheader="SingularityNET" /> diff --git a/src/components/AiMarketplace/MainSection/ServiceCollection/ToolBar/ServiceSortOptions.js b/src/components/AiMarketplace/MainSection/ServiceCollection/ToolBar/ServiceSortOptions.js index 747d556c5..9a2956104 100644 --- a/src/components/AiMarketplace/MainSection/ServiceCollection/ToolBar/ServiceSortOptions.js +++ b/src/components/AiMarketplace/MainSection/ServiceCollection/ToolBar/ServiceSortOptions.js @@ -15,7 +15,7 @@ const ServiceSortOptions = ({ pagination, updatePagination, fetchService }) => { if (value === "default" || value === activeSortItem) { return; } - const latestPagination = { ...pagination, ...defaultPaginationParameters, sort_by: value }; + const latestPagination = { ...pagination, ...defaultPaginationParameters, sort_by: value, order_by: "asc" }; updatePagination(latestPagination); await fetchService(latestPagination); setActiveSortItem(value); diff --git a/src/components/AiMarketplace/styles.js b/src/components/AiMarketplace/styles.js index faf275212..3711a03fd 100644 --- a/src/components/AiMarketplace/styles.js +++ b/src/components/AiMarketplace/styles.js @@ -1,8 +1,5 @@ export const useStyles = theme => ({ - aiMarketPlaceContainer: { - paddingTop: 70, - backgroundColor: theme.palette.text.offWhiteColor, - }, + aiMarketPlaceContainer: { backgroundColor: theme.palette.text.offWhiteColor }, mainWrapper: { width: "92%", margin: "0 auto", diff --git a/src/components/GetStarted/styles.js b/src/components/GetStarted/styles.js index 470a066b7..6f1ce3f6a 100644 --- a/src/components/GetStarted/styles.js +++ b/src/components/GetStarted/styles.js @@ -1,6 +1,6 @@ export const useStyles = theme => ({ GetStartedMainContaienr: { - padding: "100px 60px 60px", + padding: "30px 60px 60px", backgroundColor: theme.palette.text.offWhiteColor, flexDirection: "column", }, diff --git a/src/components/HOC/WithInAppHeader.js b/src/components/HOC/WithInAppHeader.js deleted file mode 100644 index 0c8fed72d..000000000 --- a/src/components/HOC/WithInAppHeader.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Fragment } from "react"; - -import Header from "../common/Header"; -import Footer from "../common/Footer"; - -const withInAppWrapper = InputComponent => { - return props => { - return ( - -
- -
- - ); - }; -}; - -export default withInAppWrapper; diff --git a/src/components/HOC/WithInAppHeader/index.js b/src/components/HOC/WithInAppHeader/index.js new file mode 100644 index 000000000..c81ab1af9 --- /dev/null +++ b/src/components/HOC/WithInAppHeader/index.js @@ -0,0 +1,22 @@ +import React, { Fragment } from "react"; + +import Header from "../../common/Header"; +import Footer from "../../common/Footer"; +import { useStyles } from "./styles"; + +const withInAppWrapper = InputComponent => { + return props => { + const classes = useStyles(); + return ( + +
+
+ +
+
+ + ); + }; +}; + +export default withInAppWrapper; diff --git a/src/components/HOC/WithInAppHeader/styles.js b/src/components/HOC/WithInAppHeader/styles.js new file mode 100644 index 000000000..b8bf43c02 --- /dev/null +++ b/src/components/HOC/WithInAppHeader/styles.js @@ -0,0 +1,10 @@ +import { makeStyles } from "@material-ui/styles"; + +export const useStyles = makeStyles(theme => ({ + scrollableContent: { + height: "calc(100vh - 70px)", + position: "absolute", + top: 70, + overflowY: "scroll", + }, +})); diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js index f209b1002..9b2b392af 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js @@ -1,14 +1,27 @@ -import React from "react"; +import React, { useState } from "react"; import { withStyles } from "@material-ui/styles"; +import Tooltip from "@material-ui/core/Tooltip"; import AlertBox from "../../../../../common/AlertBox"; import StyledButton from "../../../../../common/StyledButton"; import StyledLinearProgress from "../../../../../common/StyledLinearProgress"; import { useStyles } from "./styles"; -const ActiveSession = ({ classes, freeCallsRemaining, handleComplete, freeCallsAllowed }) => { +const ActiveSession = ({ classes, freeCallsRemaining, handleComplete, freeCallsAllowed, isServiceAvailable }) => { + const [showTooltip, setShowTooltip] = useState(false); + const progressValue = () => (freeCallsRemaining / freeCallsAllowed) * 100; + const handleTooltipOpen = () => { + if (!isServiceAvailable) { + setShowTooltip(true); + } + }; + + const handleTooltipClose = () => { + setShowTooltip(false); + }; + return (
Free API Calls {freeCallsRemaining} - + +
+ +
+
); diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/styles.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/styles.js index 5fce912b8..af858c6c6 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/styles.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/styles.js @@ -22,4 +22,7 @@ export const useStyles = theme => ({ fontWeight: 600, lineHeight: "33px", }, + tooltip: { + fontSize: 14, + }, }); diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/MetamaskFlow.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/MetamaskFlow.js index dc8a4dbcb..44ad0621f 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/MetamaskFlow.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/MetamaskFlow.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; import { connect } from "react-redux"; +import Tooltip from "@material-ui/core/Tooltip"; import StyledButton from "../../../../../common/StyledButton"; import PaymentInfoCard from "../PaymentInfoCard"; @@ -36,6 +37,7 @@ class MetamaskFlow extends Component { noOfServiceCalls: 1, totalPrice: cogsToAgi(this.props.pricing.price_in_cogs), alert: {}, + showTooltip: false, }; serviceClient; @@ -56,7 +58,7 @@ class MetamaskFlow extends Component { this.serviceClient = new ServiceClient(sdk, org_id, service_id, sdk._mpeContract, {}, groupInfo); this.paymentChannelManagement = new PaymentChannelManagement(sdk, this.serviceClient); } catch (error) { - this.props.handlePurchaseError(error); + this.props.handlePurchaseError("Unable to initialize payment channel. Please try again"); } }; @@ -98,6 +100,7 @@ class MetamaskFlow extends Component { handleConnectMM = async () => { const { startMMconnectLoader, stopLoader } = this.props; + this.setState({ alert: {} }); try { startMMconnectLoader(); const sdk = await initSdk(); @@ -118,7 +121,7 @@ class MetamaskFlow extends Component { this.setState({ MMconnected: true, mpeBal, channelBalance }); } catch (error) { - this.setState({ alert: { type: alertTypes.ERROR, message: `Unable to connect to metamask ${error}` } }); + this.setState({ alert: { type: alertTypes.ERROR, message: `Unable to connect to metamask. Please try again` } }); } stopLoader(); }; @@ -158,19 +161,19 @@ class MetamaskFlow extends Component { if (selectedPayType === payTypes.SINGLE_CALL) { noOfServiceCalls = 1; } - const sdk = await initSdk(); - const mpeBal = await sdk.account.escrowBalance(); - if (mpeBal < this.paymentChannelManagement.noOfCallsToCogs(noOfServiceCalls)) { - this.setState({ - mpeBal, - alert: { - type: alertTypes.ERROR, - message: `Insufficient MPE balance. Please deposit some AGI tokens to your escrow account`, - }, - }); - return; - } try { + const sdk = await initSdk(); + const mpeBal = await sdk.account.escrowBalance(); + if (mpeBal < this.paymentChannelManagement.noOfCallsToCogs(noOfServiceCalls)) { + this.setState({ + mpeBal, + alert: { + type: alertTypes.ERROR, + message: `Insufficient MPE balance. Please deposit some AGI tokens to your escrow account`, + }, + }); + return; + } if (!this.paymentChannelManagement.channel) { await this.paymentChannelManagement.openChannel(noOfServiceCalls); } else { @@ -189,10 +192,20 @@ class MetamaskFlow extends Component { return this.PaymentInfoCardData.find(el => el.title === "Channel Balance").value; }; - shouldContinueBeEnabled = () => this.state.mpeBal > 0; + shouldContinueBeEnabled = () => this.state.mpeBal > 0 && this.props.isServiceAvailable; shouldDepositToEscrowBeHighlighted = () => this.state.mpeBal <= 0; + handleTooltipOpen = () => { + if (!this.props.isServiceAvailable) { + this.setState({ showTooltip: true }); + } + }; + + handleTooltipClose = () => { + this.setState({ showTooltip: false }); + }; + render() { const { classes } = this.props; const { @@ -203,7 +216,9 @@ class MetamaskFlow extends Component { noOfServiceCalls, totalPrice, alert, + showTooltip, } = this.state; + if (!MMconnected) { return (
@@ -272,17 +287,31 @@ class MetamaskFlow extends Component {
- - +
+ +
+ +
+ +
+
); diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/index.js index 0fa7b5bdd..be2034d46 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/index.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/index.js @@ -8,7 +8,15 @@ import { useStyles } from "./styles"; import MetamaskFlow from "./MetamaskFlow"; import Routes from "../../../../../../utility/constants/Routes"; -const ExpiredSession = ({ classes, handleComplete, metamask, groupInfo, history, handlePurchaseError }) => { +const ExpiredSession = ({ + classes, + handleComplete, + metamask, + groupInfo, + history, + handlePurchaseError, + isServiceAvailable, +}) => { const handleAddPayment = () => { history.push(`/${Routes.USER_PROFILE}`); }; @@ -20,6 +28,7 @@ const ExpiredSession = ({ classes, handleComplete, metamask, groupInfo, history, classes={classes} groupInfo={groupInfo} handlePurchaseError={handlePurchaseError} + isServiceAvailable={isServiceAvailable} /> ); } diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/styles.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/styles.js index 26ca9e29b..4b2307dfa 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/styles.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/styles.js @@ -23,6 +23,10 @@ export const useStyles = theme => ({ buttonContainer: { marginTop: 35, textAlign: "center", + justifyContent: "center", + "& div": { + display: "inline-block", + }, }, channelSelectionTitle: { marginBottom: 5, @@ -31,4 +35,7 @@ export const useStyles = theme => ({ fontSize: 16, fontWeight: 600, }, + tooltip: { + fontSize: 14, + }, }); diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js index d3109d96c..cf76a9e2c 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js @@ -4,7 +4,15 @@ import ActiveSession from "./ActiveSession"; import ExpiredSession from "./ExpiredSession"; import { walletTypes } from "../../../../../Redux/actionCreators/UserActions"; -const Purchase = ({ handleComplete, freeCallsRemaining, freeCallsAllowed, wallet, groupInfo, handlePurchaseError }) => { +const Purchase = ({ + handleComplete, + freeCallsRemaining, + freeCallsAllowed, + wallet, + groupInfo, + handlePurchaseError, + isServiceAvailable, +}) => { const isMetamaskAvailable = () => { return wallet.type === walletTypes.METAMASK; }; @@ -16,6 +24,7 @@ const Purchase = ({ handleComplete, freeCallsRemaining, freeCallsAllowed, wallet metamask={isMetamaskAvailable()} groupInfo={groupInfo} handlePurchaseError={handlePurchaseError} + isServiceAvailable={isServiceAvailable} /> ); } @@ -24,6 +33,7 @@ const Purchase = ({ handleComplete, freeCallsRemaining, freeCallsAllowed, wallet freeCallsRemaining={freeCallsRemaining} freeCallsAllowed={freeCallsAllowed} handleComplete={handleComplete} + isServiceAvailable={isServiceAvailable} /> ); }; diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/index.js index c4f8160e0..1f6d76f9f 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/index.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/index.js @@ -126,6 +126,7 @@ class ServiceDemo extends Component { freeCallsAllowed, wallet, handlePurchaseError, + isServiceAvailable: Boolean(service.is_available), }} thirdPartyProps={{ service_id: service.service_id, diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/styles.js b/src/components/ServiceDetails/AboutService/ServiceDemo/styles.js index 701505108..a16a933fc 100644 --- a/src/components/ServiceDetails/AboutService/ServiceDemo/styles.js +++ b/src/components/ServiceDetails/AboutService/ServiceDemo/styles.js @@ -86,44 +86,40 @@ export const useStyles = theme => ({ }, }, serviceDetailsTab: { - borderTopWidth: 1, - borderTopStyle: "solid", - borderTopColor: theme.palette.text.lightGray, - marginTop: 25, - "& .row": { - marginTop: 25, - display: "flex", - justifyContent: "center", - }, - "& select": { marginBottom: "45px !important" }, - "& .btn-primary": { - marginRight: "0 !important", - backgroundColor: theme.backgroundColor.blue, - color: theme.palette.text.white, - borderWidth: 1, - borderStyle: "solid", - borderColor: "transparent", - padding: "13px 35px 11px", - textTransform: "uppercase", - fontWeight: 600, - letterSpacing: "1.25px", - lineHeight: "16px", - }, - "& button": { - marginBottom: 25, - "&:disabled": { - marginRight: "0 !important", - backgroundColor: theme.palette.text.disabledBtnBg, - color: theme.palette.text.white, - borderWidth: 1, - borderStyle: "solid", - borderColor: "transparent", - padding: "13px 35px 11px", - textTransform: "uppercase", - fontWeight: 600, - letterSpacing: "1.25px", - lineHeight: "16px", - }, - }, + // "& .row": { + // marginTop: 25, + // display: "flex", + // justifyContent: "center", + // }, + // "& select": { marginBottom: "45px !important" }, + // "& .btn-primary": { + // marginRight: "0 !important", + // backgroundColor: theme.backgroundColor.blue, + // color: theme.palette.text.white, + // borderWidth: 1, + // borderStyle: "solid", + // borderColor: "transparent", + // padding: "13px 35px 11px", + // textTransform: "uppercase", + // fontWeight: 600, + // letterSpacing: "1.25px", + // lineHeight: "16px", + // }, + // "& button": { + // marginBottom: 25, + // "&:disabled": { + // marginRight: "0 !important", + // backgroundColor: theme.palette.text.disabledBtnBg, + // color: theme.palette.text.white, + // borderWidth: 1, + // borderStyle: "solid", + // borderColor: "transparent", + // padding: "13px 35px 11px", + // textTransform: "uppercase", + // fontWeight: 600, + // letterSpacing: "1.25px", + // lineHeight: "16px", + // }, + // }, }, }); diff --git a/src/components/ServiceDetails/CreatorDetails/index.js b/src/components/ServiceDetails/CreatorDetails/index.js index 3e7979ac8..216063ee6 100644 --- a/src/components/ServiceDetails/CreatorDetails/index.js +++ b/src/components/ServiceDetails/CreatorDetails/index.js @@ -7,11 +7,11 @@ import { useStyles } from "./styles"; const CreatorDetails = ({ classes, organizationName }) => { return (
-

Creator Details

+

Provider

SingularityNET
-

{organizationName}

+

SingularityNET

diff --git a/src/components/ServiceDetails/CreatorDetails/styles.js b/src/components/ServiceDetails/CreatorDetails/styles.js index cc6715274..cebeb0b19 100644 --- a/src/components/ServiceDetails/CreatorDetails/styles.js +++ b/src/components/ServiceDetails/CreatorDetails/styles.js @@ -16,7 +16,7 @@ export const useStyles = theme => ({ paddingLeft: 20, "& h4": { margin: 0, - color: theme.palette.text.lightShadedGray, + color: theme.palette.text.primary, fontSize: 18, fontWeight: 600, letterSpacing: "0.23px", diff --git a/src/components/ServiceDetails/InstallAndRunService/index.js b/src/components/ServiceDetails/InstallAndRunService/index.js index d0516305f..aa4681d8a 100644 --- a/src/components/ServiceDetails/InstallAndRunService/index.js +++ b/src/components/ServiceDetails/InstallAndRunService/index.js @@ -18,7 +18,7 @@ class InstallAndRunService extends Component { }; render() { - const { classes } = this.props; + const { classes, service } = this.props; const { activeTab } = this.state; const tabs = [ { name: "Python", activeIndex: 0, component: }, @@ -35,7 +35,7 @@ class InstallAndRunService extends Component {
- + ); diff --git a/src/components/ServiceDetails/index.js b/src/components/ServiceDetails/index.js index e811ad58a..29db4e762 100644 --- a/src/components/ServiceDetails/index.js +++ b/src/components/ServiceDetails/index.js @@ -76,7 +76,7 @@ class ServiceDetails extends Component { activeIndex: 0, component: , }, - { name: "Install and Run", activeIndex: 1, component: }, + { name: "Install and Run", activeIndex: 1, component: }, ]; return ( diff --git a/src/components/ServiceDetails/styles.js b/src/components/ServiceDetails/styles.js index 8895291fe..19c3d4f25 100644 --- a/src/components/ServiceDetails/styles.js +++ b/src/components/ServiceDetails/styles.js @@ -1,7 +1,6 @@ export const useStyles = theme => ({ serviceDetailContainer: { width: "auto", - padding: "67px 0", backgroundColor: theme.palette.text.offWhiteColor, "& > div": { paddingLeft: 60, diff --git a/src/components/UserProfile/UserProfileAccount/MetamaskDetails/index.js b/src/components/UserProfile/UserProfileAccount/MetamaskDetails/index.js index 05ef8dc3c..c2bff91d0 100644 --- a/src/components/UserProfile/UserProfileAccount/MetamaskDetails/index.js +++ b/src/components/UserProfile/UserProfileAccount/MetamaskDetails/index.js @@ -33,18 +33,25 @@ class MetamaskDetails extends Component { }; retrieveAccountDetails = async () => { - const sdk = await initSdk(); - const escrowBalance = await sdk.account.escrowBalance(); - const tokenBalance = await sdk.account.balance(); - const networkId = sdk._networkId; - this.setState({ - escrowBalance: cogsToAgi(escrowBalance), - tokenBalance: cogsToAgi(tokenBalance), - currentNetwork: Networks[networkId], - }); + try { + const sdk = await initSdk(); + const escrowBalance = await sdk.account.escrowBalance(); + const tokenBalance = await sdk.account.balance(); + const networkId = sdk._networkId; + this.setState({ + escrowBalance: cogsToAgi(escrowBalance), + tokenBalance: cogsToAgi(tokenBalance), + currentNetwork: Networks[networkId], + }); + } catch (error) { + this.setState({ + alert: { type: alertTypes.ERROR, message: `Unable to fetch account details` }, + }); + } }; onTabChange = (event, value) => { + this.setState({ alert: {} }); if (this.props.handleTitleChange) { this.props.handleTitleChange(value); } @@ -57,31 +64,33 @@ class MetamaskDetails extends Component { }; handleDeposit = async () => { + this.setState({ alert: {} }); this.props.startDepositLoader(); - const sdk = await initSdk(); try { + const sdk = await initSdk(); const amountInAGI = this.state.amount[txnTypes.DEPOSIT]; const amountInCogs = agiToCogs(amountInAGI); await sdk.account.depositToEscrowAccount(amountInCogs); await this.retrieveAccountDetails(); this.setState({ alert: { type: alertTypes.SUCCESS, message: "Successfully deposited" } }); - } catch (err) { - this.setState({ alert: { type: alertTypes.ERROR, message: `Unable to deposit amount: ${err}` } }); + } catch (error) { + this.setState({ alert: { type: alertTypes.ERROR, message: `Unable to deposit amount` } }); } this.props.stopLoader(); }; handleWithDraw = async () => { + this.setState({ alert: {} }); this.props.startWithdrawLoader(); - const sdk = await initSdk(); try { + const sdk = await initSdk(); const amountInAGI = this.state.amount[txnTypes.WITHDRAW]; const amountInCogs = agiToCogs(amountInAGI); await sdk.account.withdrawFromEscrowAccount(amountInCogs); await this.retrieveAccountDetails(); this.setState({ alert: { type: alertTypes.SUCCESS, message: "Successfully withdrawn" } }); - } catch (err) { - this.setState({ alert: { type: alertTypes.ERROR, message: `Unable to withdraw amount: ${err}` } }); + } catch (error) { + this.setState({ alert: { type: alertTypes.ERROR, message: `Unable to withdraw amount` } }); } this.props.stopLoader(); }; diff --git a/src/components/UserProfile/UserProfileAccount/index.js b/src/components/UserProfile/UserProfileAccount/index.js index 6b0bbf164..cb1466f98 100644 --- a/src/components/UserProfile/UserProfileAccount/index.js +++ b/src/components/UserProfile/UserProfileAccount/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import Grid from "@material-ui/core/Grid"; import { withStyles } from "@material-ui/styles"; import { connect } from "react-redux"; @@ -15,18 +15,27 @@ import AlertBox, { alertTypes } from "../../common/AlertBox"; const walletDropdownList = Object.entries(walletTypes).map(([key, value]) => ({ value, label: key })); const UserProfileAccount = ({ updateWallet, classes, wallet }) => { + const [alert, setAlert] = useState({}); + const handleWalletTypeChange = async event => { + setAlert({}); const { value } = event.target; if (value === walletTypes.METAMASK) { - const sdk = await initSdk(); - const address = sdk.account.address; - //1. To be replaced with wallet API - if (!isEmpty(address)) { - sessionStorage.setItem("wallet", JSON.stringify({ type: walletTypes.METAMASK, address })); + try { + const selectedEthAddress = window.ethereum && window.ethereum.selectedAddress; + const sdk = await initSdk(selectedEthAddress); + const address = sdk.account.address; + //1. To be replaced with wallet API + if (!isEmpty(address)) { + sessionStorage.setItem("wallet", JSON.stringify({ type: walletTypes.METAMASK, address })); + updateWallet({ type: value, address }); + return; + } + setAlert({ type: alertTypes.ERROR, message: `Unable to fetch Metamask address. Please try again` }); + //till here(1) + } catch (error) { + setAlert({ type: alertTypes.ERROR, message: `Something went wrong. Please try again` }); } - //till here(1) - updateWallet({ type: value, address }); - return; } //2. to be removed once wallet API is available sessionStorage.removeItem("wallet"); @@ -55,6 +64,7 @@ const UserProfileAccount = ({ updateWallet, classes, wallet }) => { {walletDetails[wallet.type] || ( )} + diff --git a/src/components/UserProfile/styles.js b/src/components/UserProfile/styles.js index ba1251f8e..d3207c5e8 100644 --- a/src/components/UserProfile/styles.js +++ b/src/components/UserProfile/styles.js @@ -1,6 +1,6 @@ export const useStyles = theme => ({ UserProfileContainer: { - padding: "70px 85px 0", + padding: "0 85px", backgroundColor: theme.palette.text.offWhiteColor, }, tabsHeader: { diff --git a/src/components/common/AnchorLink.js b/src/components/common/AnchorLink.js new file mode 100644 index 000000000..7877ab17a --- /dev/null +++ b/src/components/common/AnchorLink.js @@ -0,0 +1,19 @@ +import React from "react"; +import MUILink from "@material-ui/core/Link"; + +const AnchorLink = ({ label, href, newTab, ...rest }) => { + if (newTab) { + return ( + + {label} + + ); + } + return ( + + {label} + + ); +}; + +export default AnchorLink; diff --git a/src/components/common/Header/NavBar.js b/src/components/common/Header/NavBar.js index 551da399c..f21afdba0 100644 --- a/src/components/common/Header/NavBar.js +++ b/src/components/common/Header/NavBar.js @@ -1,19 +1,19 @@ import React from "react"; import { withRouter } from "react-router-dom"; -//import StyledDropdown from "../StyledDropdown/"; import { useStyles } from "./styles"; import NavItem from "./NavItem"; import Routes from "../../../utility/constants/Routes"; +import StyledMenu from "../StyledMenu"; const NavBar = ({ data, history }) => { const classes = useStyles(); const isActiveTab = link => { - if (history.location.pathname === "/") { - return link === `/${Routes.AI_MARKETPLACE}`; + if (history.location.pathname === `/${Routes.GET_STARTED}`) { + return link === `/${Routes.GET_STARTED}`; } - return link === history.location.pathname; + return link !== `/${Routes.GET_STARTED}`; }; return ( @@ -25,14 +25,14 @@ const NavBar = ({ data, history }) => { title={tab.title} link={tab.link} active={isActiveTab(tab.link)} - openInNewTab={tab.openInNewTab} + newTab={tab.newTab} /> ))} - {/*data.dropdowns.map(dropdown => ( -
  • - -
    • - ))*/} + {data.dropdowns.map(dropdown => ( +
    + +
    + ))} ); diff --git a/src/components/common/Header/NavItem.js b/src/components/common/Header/NavItem.js index b3a3f1615..c77523c38 100644 --- a/src/components/common/Header/NavItem.js +++ b/src/components/common/Header/NavItem.js @@ -1,20 +1,18 @@ import React from "react"; import { useStyles } from "./styles"; +import AnchorLink from "../AnchorLink"; -const NavItem = ({ active, title, link, openInNewTab }) => { +const NavItem = ({ active, title, link, newTab }) => { const classes = useStyles(); return (
  • - - {title} - + newTab={newTab} + />
    • ); }; diff --git a/src/components/common/Header/styles.js b/src/components/common/Header/styles.js index f9f17d034..c5ceae0df 100644 --- a/src/components/common/Header/styles.js +++ b/src/components/common/Header/styles.js @@ -8,7 +8,7 @@ export const useStyles = makeStyles(theme => ({ position: "fixed", right: 0, left: 0, - zIndex: 1, + zIndex: 5, backgroundColor: theme.palette.text.purple, boxShadow: "0 2px 6px 0 rgba(0,0,0,0.3)", "@media (max-width:1280px)": { padding: "13px 10px 3px 10px" }, @@ -36,10 +36,30 @@ export const useStyles = makeStyles(theme => ({ marginBottom: 10, "@media (max-width:1024px)": { display: "none" }, }, + headerDropDown:{ + "&:hover": { + "& button": { color: theme.palette.text.white }, + "& svg": { color: theme.palette.text.white }, + }, + }, navUl: { padding: 0, margin: 0, display: "flex", + "& button": { + padding: 0, + color: "#9b9b9b", + fontFamily: theme.typography.primary.main, + fontSize: 16, + fontWeight: 400, + lineHeight: "22px", + }, + "& svg": { + paddingLeft: 5, + color: "#9b9b9b", + cursor: "pointer", + verticalAlign: "middle", + }, }, navLinks: { marginRight: 53, @@ -47,13 +67,13 @@ export const useStyles = makeStyles(theme => ({ "@media (max-width:1280px) and (min-width: 1024px)": { marginRight: 26, }, - }, - navLinksAnchor: { - textDecoration: "none", - fontSize: 16, - color: theme.palette.text.lightShadedGray, - lineHeight: "22px", - "&:hover": { color: theme.palette.text.white }, + "& a": { + textDecoration: "none", + fontSize: 16, + color: theme.palette.text.lightShadedGray, + lineHeight: "22px", + "&:hover": { color: theme.palette.text.white, textDecoration: "none" }, + }, }, navLinksDropDown: { listStyle: "none", @@ -62,10 +82,10 @@ export const useStyles = makeStyles(theme => ({ }, activeTab: { paddingBottom: 4, - borderBottomWidth: "2px", + borderBottomWidth: 2, borderBottomStyle: "solid", borderBottomColor: theme.palette.text.white, - color: theme.palette.text.white, + color: '#fff !important', fontWeight: 600, }, loginBtnsSection: { diff --git a/src/components/common/StyledButton/index.js b/src/components/common/StyledButton/index.js index a146f78c5..cb80480cf 100644 --- a/src/components/common/StyledButton/index.js +++ b/src/components/common/StyledButton/index.js @@ -16,11 +16,16 @@ const buttonColor = { redBg: "redBg", }; -const StyledButton = ({ disabled, onClick, type, iconClass, btnText }) => { +const StyledButton = ({ disabled, onClick, type, iconClass, btnText, ...rest }) => { const classes = useStyles(); return ( - diff --git a/src/components/common/StyledMenu/index.js b/src/components/common/StyledMenu/index.js new file mode 100644 index 000000000..36729a396 --- /dev/null +++ b/src/components/common/StyledMenu/index.js @@ -0,0 +1,38 @@ +import React, { Fragment, useState } from "react"; +import Button from "@material-ui/core/Button"; +import Menu from "@material-ui/core/Menu"; +import MenuItem from "@material-ui/core/MenuItem"; +import { withStyles } from "@material-ui/styles"; +import CaretIcon from "@material-ui/icons/ArrowDropDown"; + +import { useStyles } from "./styles"; +import AnchorLink from "../AnchorLink"; + +const StyledMenu = ({ classes, label, list }) => { + const [anchorEl, setAnchorEl] = useState(null); + + const handleOpen = event => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + return ( + +
    + + +
    + + {list.map(item => ( + + + + ))} + +     + ); +}; + +export default withStyles(useStyles)(StyledMenu); diff --git a/src/components/common/StyledMenu/styles.js b/src/components/common/StyledMenu/styles.js new file mode 100644 index 000000000..aa8c47f19 --- /dev/null +++ b/src/components/common/StyledMenu/styles.js @@ -0,0 +1,10 @@ +export const useStyles = theme => ({ + button: { + "& span": { + textTransform: "none", + }, + }, + menuItem: { + fontFamily: theme.typography.primary.main, + }, +}); diff --git a/src/utility/PaymentChannelManagement.js b/src/utility/PaymentChannelManagement.js index 509f71d4d..182a1074c 100644 --- a/src/utility/PaymentChannelManagement.js +++ b/src/utility/PaymentChannelManagement.js @@ -35,6 +35,7 @@ export default class PaymentChannelManagement { const defaultExpiration = await this._channelExtensionBlockNumber(); this._channel = await this.serviceClient.openChannel(serviceCallPrice, defaultExpiration); + await this._channel.syncState(); this._sdkContext.currentChannel = this._channel; } diff --git a/src/utility/constants/Header.js b/src/utility/constants/Header.js index 986755f44..9d8d5b12f 100644 --- a/src/utility/constants/Header.js +++ b/src/utility/constants/Header.js @@ -32,12 +32,12 @@ const tabs = [ { title: "AI Marketplace", link: `/${Routes.AI_MARKETPLACE}`, - openInNewTab: false, + newTab: false, }, { title: "Get Started", link: `/${Routes.GET_STARTED}`, - openInNewTab: false, + newTab: false, }, ]; @@ -45,10 +45,10 @@ const dropdowns = [ { label: "Resources", list: [ - { label: "Documentation", value: "https://github.com/singnet" }, - { label: "Telegram", link: "https://telegram.me/singularitynet" }, - { label: "Forum", link: "https://community.singularitynet.io/" }, - { label: "Blog", link: "http://blog.singularitynet.io/" }, + { label: "Documentation", link: "https://github.com/singnet", newTab: true }, + { label: "Telegram", link: "https://telegram.me/singularitynet", newTab: true }, + { label: "Forum", link: "https://community.singularitynet.io/", newTab: true }, + { label: "Blog", link: "http://blog.singularitynet.io/", newTab: true }, ], }, ]; diff --git a/src/utility/constants/Pagination.js b/src/utility/constants/Pagination.js index 8e0d922b8..151fe7ddc 100644 --- a/src/utility/constants/Pagination.js +++ b/src/utility/constants/Pagination.js @@ -32,7 +32,7 @@ export const generateFilterObject = filterData => { return filterObject; }; -export const sortByCategories = [{ value: "display_name", label: "Featured" }]; +export const sortByCategories = [{ value: "display_name", label: "Display Name" }]; export const defaultPaginationParameters = { q: "", @@ -46,8 +46,8 @@ export const defaultFilterParameters = { }; export const defaultSortParameters = { - sort_by: "display_name", - order_by: "desc", + sort_by: "ranking", + order_by: "asc", }; export const defaultListingConfig = { diff --git a/src/utility/sdk.js b/src/utility/sdk.js index fcfd39fb6..bc7d1777c 100644 --- a/src/utility/sdk.js +++ b/src/utility/sdk.js @@ -76,11 +76,7 @@ const generateOptions = (callType, wallet, serviceRequestErrorHandler) => { } }; -export const initSdk = async () => { - if (sdk) { - return sdk; - } - +export const initSdk = async address => { const updateSDK = () => { const networkId = web3Provider.networkVersion; const config = { @@ -92,21 +88,40 @@ export const initSdk = async () => { sdk = new SnetSDK(config); }; + if (sdk && address) { + const currentAddress = sdk.account.address; + if (currentAddress.toLowerCase() !== address.toLowerCase()) { + window.web3.eth.defaultAccount = address; + updateSDK(); + } + return sdk; + } + + if (sdk) { + return sdk; + } + const hasEth = typeof window.ethereum !== "undefined"; const hasWeb3 = typeof window.web3 !== "undefined"; - if (hasEth && hasWeb3) { - web3Provider = window.ethereum; - await web3Provider.enable(); - web3Provider.addListener(ON_ACCOUNT_CHANGE, accounts => { - const event = new CustomEvent("snetMMAccountChanged", { detail: { address: accounts[0] } }); - window.dispatchEvent(event); - }); - web3Provider.addListener(ON_NETWORK_CHANGE, network => { - const event = new CustomEvent("snetMMNetworkChanged", { detail: { network } }); - window.dispatchEvent(event); - }); - updateSDK(); + try { + if (hasEth && hasWeb3) { + web3Provider = window.ethereum; + const accounts = await web3Provider.enable(); + window.web3.eth.defaultAccount = accounts[0]; + web3Provider.addListener(ON_ACCOUNT_CHANGE, accounts => { + const event = new CustomEvent("snetMMAccountChanged", { detail: { address: accounts[0] } }); + window.dispatchEvent(event); + }); + web3Provider.addListener(ON_NETWORK_CHANGE, network => { + const event = new CustomEvent("snetMMNetworkChanged", { detail: { network } }); + window.dispatchEvent(event); + }); + updateSDK(); + } + } catch (error) { + throw error; } + return sdk; };