From 80c913fdd96ce5e1dba92fb9efd5b26bebbfbedc Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Tue, 12 Feb 2019 14:11:42 +0100 Subject: [PATCH 01/22] Refactored to use container --- .../src/MapExploreContainer/GenArt.jsx | 105 ++++++++++++++++++ .../MapExploreContainer.jsx | 54 +++++++++ website/deep-art/src/MapPage/MapPage.jsx | 59 ++++------ 3 files changed, 179 insertions(+), 39 deletions(-) create mode 100644 website/deep-art/src/MapExploreContainer/GenArt.jsx create mode 100644 website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx diff --git a/website/deep-art/src/MapExploreContainer/GenArt.jsx b/website/deep-art/src/MapExploreContainer/GenArt.jsx new file mode 100644 index 0000000..d108d05 --- /dev/null +++ b/website/deep-art/src/MapExploreContainer/GenArt.jsx @@ -0,0 +1,105 @@ +import React, { Component } from 'react'; +import { saveAs } from 'file-saver'; + +import { Redirect } from 'react-router-dom'; +import CircularProgress from '@material-ui/core/CircularProgress'; + +/** + * The box containing the generated image + * 'image' prop: The generated image, in base64 encoded ArrayBuffer format + */ +export default class GenArt extends Component { + constructor(props) { + super(props); + + this.state = { + image: 0, + objID: 0, + redirect: false, + }; + this.saveImage = this.saveImage.bind(this); + this.getSimilarArtID = this.getSimilarArtID.bind(this); + this.coordToCantorPair = this.coordToCantorPair.bind(this); + } + + saveImage() { + let number = Math.floor(Math.random() * 10000); + let file = new File([this.props.data], 'image' + number.toString() + '.jpeg', { + type: 'image/jpeg', + }); + + saveAs(file); + } + + coordToCantorPair(x, y) { + let intX = x * 1000; + let intY = y * 1000; + let pairing = 0.5 * (intX + intY) * (intX + intY + 1) + intY; + return pairing; + } + + getSimilarArtID() { + //let file = new File([this.props.data], "image.jpeg", {type: "image/jpeg"}); + + let file = this.props.image; + + //const apiURL = 'https://imagedocker2.azurewebsites.net/FindSimilarImages/Byte'; + //const apiURL = 'https://metimagesearch.azurewebsites.net/neighbors?neighbors=1'; + const apiURL = 'https://methack-api.azure-api.net/ImageSimilarity/FindSimilarImages/Byte'; + const key = '?subscription-key=43d3f563ea224c4c990e437ada74fae8&neighbors=1'; + const Http = new XMLHttpRequest(); + const data = new FormData(); + data.append('image', file); + + Http.open('POST', apiURL + key); + Http.send(data); + Http.onreadystatechange = e => { + if (Http.readyState === 4) { + try { + let response = JSON.parse(Http.responseText); + let id = response.results[0].ObjectID; + if (id === undefined || id === null) { + id = 0; + } + + this.setState({ + objID: id, + redirect: true, + }); + } catch (e) { + console.log('malformed request:' + Http.responseText); + } + } + }; + } + + render() { + const ImageBox = () => ( + {this.props.image.id} + ); + + let loadOrImage = this.props.image === 0 || this.props.image === null || this.props.image === undefined ? () : (); + let message = this.props.point === null ? ('') : (

{this.props.message}

); + if (this.state.redirect) { + let link = `/search/${this.state.objID}`; + return ; + } else { + return ( +
+
+ {loadOrImage} +
+
+ {message} +
+ +
+ ); + } + } +} diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx new file mode 100644 index 0000000..8eb64f8 --- /dev/null +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -0,0 +1,54 @@ +import React, { Component } from 'react'; +import GenArt from './GenArt.jsx'; +import { NamespacesConsumer } from 'react-i18next'; + +class MapExploreContainer extends Component { + + generatePath = () => { + const pathname = this.props.location.pathname + console.log(pathname) + } + + renderHeader = () => { + return this.props.map ? + ( +
+ + +
+ ) : + ( +
+ + + {/* */} +
+ ) + } + + render () { + return ( + + {t => ( +
+ {this.renderHeader()} +
+ +

{t('map.title')}

+
+

{t('map.description')}

+
+ test asdasdasdas +
+
+ + {this.props.children} +
+
+ )} + + ) + } +} + +export default MapExploreContainer; \ No newline at end of file diff --git a/website/deep-art/src/MapPage/MapPage.jsx b/website/deep-art/src/MapPage/MapPage.jsx index ad28a65..d312b55 100644 --- a/website/deep-art/src/MapPage/MapPage.jsx +++ b/website/deep-art/src/MapPage/MapPage.jsx @@ -1,18 +1,19 @@ -import React, { Component } from 'react'; -import GenArt from './GenArt.jsx'; -import setupPlotly from './map.js'; +import React, { Component } from "react"; +import GenArt from "./GenArt.jsx"; +import setupPlotly from "./map.js"; +import { NamespacesConsumer } from "react-i18next"; -import { NamespacesConsumer } from 'react-i18next'; +import MapExploreContainer from "../MapExploreContainer/MapExploreContainer.jsx"; /** * A map explore page to explore the latent space of BigGAN */ // export default class MapExplorePage extends Component { -class MapExplorePage extends Component { +class MapPage extends Component { constructor(props) { super(props); this.state = { - cursorPoint: null, + cursorPoint: null }; } @@ -20,8 +21,8 @@ class MapExplorePage extends Component { //Decode the url data let url = this.props.match.params.id.toString(); url = decodeURIComponent(url); - let selectedArt = url.split('&')[0].slice(4); - let artArr = url.split('&')[1].slice(4); + let selectedArt = url.split("&")[0].slice(4); + let artArr = url.split("&")[1].slice(4); artArr = JSON.parse(artArr); //Setup the Plotly graph @@ -30,38 +31,18 @@ class MapExplorePage extends Component { render() { return ( - - {t => ( -
-
- - -
-
- -

{t('map.title')}

-
-

{t('map.description')}

-
- test asdasdasdas -
-
- -
- - -
-
-
-
- )} - + +
+ +
+
+ ); } } -export default MapExplorePage; +export default MapPage; From f6e29212bfbebe08c1d368bb78b38dfa43eba6f4 Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Tue, 12 Feb 2019 18:02:51 +0100 Subject: [PATCH 02/22] added navlinks --- .../deep-art/src/ExplorePage/ExplorePage.jsx | 625 +++++++++--------- .../MapExploreContainer.jsx | 40 +- website/deep-art/src/MapPage/MapPage.jsx | 3 +- website/deep-art/src/main.scss | 4 +- .../deep-art/src/styles/pages/_explore.scss | 3 + website/deep-art/src/styles/pages/_map.scss | 3 +- 6 files changed, 351 insertions(+), 327 deletions(-) create mode 100644 website/deep-art/src/styles/pages/_explore.scss diff --git a/website/deep-art/src/ExplorePage/ExplorePage.jsx b/website/deep-art/src/ExplorePage/ExplorePage.jsx index 1656273..ef8a78d 100644 --- a/website/deep-art/src/ExplorePage/ExplorePage.jsx +++ b/website/deep-art/src/ExplorePage/ExplorePage.jsx @@ -1,321 +1,342 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; -import GenArt from './GenArt.jsx'; -import ExplorePalette from './ExplorePalette.jsx'; -import InfoArt from './InfoArt.jsx'; +import GenArt from "./GenArt.jsx"; +import ExplorePalette from "./ExplorePalette.jsx"; +import InfoArt from "./InfoArt.jsx"; -import {Box, Grid, Paragraph} from 'grommet'; +import { Box, Grid, Paragraph } from "grommet"; +import MapExploreContainer from "../MapExploreContainer/MapExploreContainer.jsx"; /** * Page for the Exploring feature * Pulls data from the URL in props.match.params */ export default class ExplorePage extends Component { - - constructor(props) { - super(props); - this.state = { - imgData: '', - apiData: {}, - genImg: 0, - genSeed: [], - genLabel: [], - imgObjectsExplore: [] - }; - - this.addSeed = this.addSeed.bind(this); - this.subSeed = this.subSeed.bind(this); - + constructor(props) { + super(props); + this.state = { + imgData: "", + apiData: {}, + genImg: 0, + genSeed: [], + genLabel: [], + imgObjectsExplore: [] }; - /** - * sets state.imgObjectsExplore to contain a json object for each ID provided. object format: {img, id, key} - * @param {Int[]} objIDs - an array of art IDs - */ - objIDsToImages(objIDs) { - - const baseURL = 'https://deepartstorage.blob.core.windows.net/public/thumbnails3/'; - - let apiURLs = objIDs.map(ID => ( - { - url: baseURL + ID.toString(), - id: ID - } - )); - - for (let i = 0; i < apiURLs.length; i++) { - const Http = new XMLHttpRequest(); - Http.responseType = "arraybuffer"; - Http.open("GET", apiURLs[i].url); - Http.send(); - Http.onreadystatechange = (e) => { - if (Http.readyState === 4) { - try { - //console.log(Http.response); - this.setState((oldState) => { - return oldState.imgObjectsExplore.push( - { - img: btoa(String.fromCharCode.apply(null, new Uint8Array(Http.response))), - id: apiURLs[i].id, - key: i - } - ) - }) - } catch (e) { - console.log('malformed request:' + Http.responseText); - } - } - } + this.addSeed = this.addSeed.bind(this); + this.subSeed = this.subSeed.bind(this); + } + + /** + * sets state.imgObjectsExplore to contain a json object for each ID provided. object format: {img, id, key} + * @param {Int[]} objIDs - an array of art IDs + */ + objIDsToImages(objIDs) { + const baseURL = + "https://deepartstorage.blob.core.windows.net/public/thumbnails3/"; + + let apiURLs = objIDs.map(ID => ({ + url: baseURL + ID.toString(), + id: ID + })); + + for (let i = 0; i < apiURLs.length; i++) { + const Http = new XMLHttpRequest(); + Http.responseType = "arraybuffer"; + Http.open("GET", apiURLs[i].url); + Http.send(); + Http.onreadystatechange = e => { + if (Http.readyState === 4) { + try { + //console.log(Http.response); + this.setState(oldState => { + return oldState.imgObjectsExplore.push({ + img: btoa( + String.fromCharCode.apply(null, new Uint8Array(Http.response)) + ), + id: apiURLs[i].id, + key: i + }); + }); + } catch (e) { + console.log("malformed request:" + Http.responseText); + } } + }; } - - componentDidMount() { - let url = this.props.match.params.id.toString(); - url = decodeURIComponent(url); - let selectedArt = url.split('&')[0].slice(4); - let artArr = url.split('&')[1].slice(4); - artArr = JSON.parse(artArr); - const id = selectedArt; - this.objIDsToImages(artArr); - - this.firstTimeGenImage(id); - } - - /** - * Sets up component state the first time for the selected image represented by id - * @param {int} id - object ID of the initial piece of art to generate an image for - */ - firstTimeGenImage(id){ - - const baseMetUrl = 'https://collectionapi.metmuseum.org/public/collection/v1/objects/'; - let metApiUrl = baseMetUrl + id; - - const Http = new XMLHttpRequest(); - Http.open("GET", metApiUrl); - Http.send(); - Http.onreadystatechange = (e) => { - if (Http.readyState === 4){ - try { - let response = JSON.parse(Http.responseText); - this.setState({ - imgData: response.primaryImage, - apiData: response - }) - - const imageToSeedUrl="https://deepartstorage.blob.core.windows.net/public/inverted/biggan1/seeds/"; - const fileName = response.objectID.toString()+".json"; - const Http2 = new XMLHttpRequest(); - Http2.open("GET", imageToSeedUrl+fileName); - Http2.send(); - Http2.onreadystatechange = (e) => { - if (Http2.readyState === 4) { - try { - let response = JSON.parse(Http2.responseText); - let seed = [response.latents].toString(); - seed = `[[${seed}]]`; - let label = response.labels; - this.setState({ - genSeed: this.twoDArrayStringToOneDArray(seed), - genLabel: response.labels - }); - this.getGenImage(seed, label); - - - } catch { - console.log('malformed request:' + Http2.responseText); - } - } - } - } catch (e) { - console.log('malformed request:' + Http.responseText); - } - } - } - - } - - /** - * Calls an API, sending a seed, and getting back an ArrayBuffer reprsenting that image - * This function directly saves the ArrayBuffer to state - * @param {string} seedArr - string version of a 1xSEED_LENGTH array of floats between -1,1 - */ - getGenImage(seedArr, labelArr) { - let labels = labelArr.toString(); - labels = `[[${labels}]]`; - - const apiURL = 'https://methack-api.azure-api.net/biggan/labels?subscription-key=43d3f563ea224c4c990e437ada74fae8'; - const Http = new XMLHttpRequest(); - const data = new FormData(); - data.append('seed',seedArr); - data.append('labels', labels); - - Http.responseType = "arraybuffer"; - Http.open("POST", apiURL); - Http.send(data); - Http.onreadystatechange = (e) => { - if (Http.readyState === 4){ - try{ - let imgData = btoa(String.fromCharCode.apply(null, new Uint8Array(Http.response))); - this.setState({genImg: imgData, genArr: Http.response}); - - } catch (e) { - console.log('malformed request:'+Http.responseText); - } + } + + componentDidMount() { + let url = this.props.match.params.id.toString(); + url = decodeURIComponent(url); + let selectedArt = url.split("&")[0].slice(4); + let artArr = url.split("&")[1].slice(4); + artArr = JSON.parse(artArr); + const id = selectedArt; + this.objIDsToImages(artArr); + + this.firstTimeGenImage(id); + } + + /** + * Sets up component state the first time for the selected image represented by id + * @param {int} id - object ID of the initial piece of art to generate an image for + */ + firstTimeGenImage(id) { + const baseMetUrl = + "https://collectionapi.metmuseum.org/public/collection/v1/objects/"; + let metApiUrl = baseMetUrl + id; + + const Http = new XMLHttpRequest(); + Http.open("GET", metApiUrl); + Http.send(); + Http.onreadystatechange = e => { + if (Http.readyState === 4) { + try { + let response = JSON.parse(Http.responseText); + this.setState({ + imgData: response.primaryImage, + apiData: response + }); + + const imageToSeedUrl = + "https://deepartstorage.blob.core.windows.net/public/inverted/biggan1/seeds/"; + const fileName = response.objectID.toString() + ".json"; + const Http2 = new XMLHttpRequest(); + Http2.open("GET", imageToSeedUrl + fileName); + Http2.send(); + Http2.onreadystatechange = e => { + if (Http2.readyState === 4) { + try { + let response = JSON.parse(Http2.responseText); + let seed = [response.latents].toString(); + seed = `[[${seed}]]`; + let label = response.labels; + this.setState({ + genSeed: this.twoDArrayStringToOneDArray(seed), + genLabel: response.labels + }); + this.getGenImage(seed, label); + } catch { + console.log("malformed request:" + Http2.responseText); + } } + }; + } catch (e) { + console.log("malformed request:" + Http.responseText); } - } - - /** - * Converts a 2D array string into a 1D array of floats - * @param {string} arrayString - string version of a 1x? array of floats - * @returns {Float[]} - The 1D float array from arrayString - */ - twoDArrayStringToOneDArray(arrayString){ - let numbers = arrayString.substring(2,arrayString.length -2); //cut off the "[[]]" - let arrayNum = numbers.split(',').map(function(item) { - return parseFloat(item); - }); - return(arrayNum); - } - - /** - * Finds a difference vector between the genSeed and the otherSeed - * @param {Float[]} genSeed - the current generated image seed - * @param {Float[]} otherSeed - the other seed to frind the difference from - * @param {Float} stepSize - The multiplyer on the difference vector - */ - findDiff(genSeed, otherSeed, stepSize=.1){ - let diffVec = []; - for (let i = 0; i < genSeed.length; i++){ - let diff = ((genSeed[i] - otherSeed[i])*stepSize); //Magic number 10, works well - diffVec.push(diff); - } - return(diffVec); - } - - // findDiff(genSeed, otherSeed, vecMul=1){ - // let diffVec=[] - // for (let i = 0; i < genSeed.length; i++){ - // let diff = (genSeed[i] - otherSeed[i]); - // diffVec.push(diff); - // } - // let norm = this.normalizeVector(diffVec, vecMul); - // return norm; - // } - - // normalizeVector(vec, multiplyer){ - // let normVec = []; - // for (let i = 0; i < vec.length; i++){ - // let val = (vec[i] / Math.sqrt(vec[i]*vec[i]))*multiplyer; - // normVec.push(val) - // } - // console.log("Norm"+normVec) - // return(normVec); - // } - - /** - * Adds diffVec to genSeed, limits values to be between -1,1 - * @param {Float[]} genSeed - The current generated image seed - * @param {Float[]} diffVec - A difference vector to add to diffVec - */ - addVec(genSeed, diffVec){ - let newSeed = []; - for (let i = 0; i < genSeed.length; i++){ - let newVal = genSeed[i] - diffVec[i]; - newSeed.push(newVal); - } - return(newSeed); - } - - /** - * Subtracts diffVec from genSeed, limits values to be between -1,1 - * @param {Float[]} genSeed - The current generated image seed - * @param {Float[]} diffVec - A difference vector to subtract from diffVec - */ - subVec(genSeed, diffVec){ - let newSeed = []; - for (let i = 0; i < genSeed.length; i++){ - let newVal = genSeed[i] + diffVec[i]; - newSeed.push(newVal); + } + }; + } + + /** + * Calls an API, sending a seed, and getting back an ArrayBuffer reprsenting that image + * This function directly saves the ArrayBuffer to state + * @param {string} seedArr - string version of a 1xSEED_LENGTH array of floats between -1,1 + */ + getGenImage(seedArr, labelArr) { + let labels = labelArr.toString(); + labels = `[[${labels}]]`; + + const apiURL = + "https://methack-api.azure-api.net/biggan/labels?subscription-key=43d3f563ea224c4c990e437ada74fae8"; + const Http = new XMLHttpRequest(); + const data = new FormData(); + data.append("seed", seedArr); + data.append("labels", labels); + + Http.responseType = "arraybuffer"; + Http.open("POST", apiURL); + Http.send(data); + Http.onreadystatechange = e => { + if (Http.readyState === 4) { + try { + let imgData = btoa( + String.fromCharCode.apply(null, new Uint8Array(Http.response)) + ); + this.setState({ genImg: imgData, genArr: Http.response }); + } catch (e) { + console.log("malformed request:" + Http.responseText); } - return(newSeed); - } - - /** - * Moves genSeed towards seed linearly, and generates the new image. Directly modifies state. - * @param {Float[]} seed - 1xSEED_LENGTH array - */ - addSeed(seed, label){ - let diffSeed = this.findDiff(this.state.genSeed, seed); - let newSeed = this.addVec(this.state.genSeed, diffSeed); - - let diffLabel = this.findDiff(this.state.genLabel, label); - let newLabel = this.addVec(this.state.genLabel, diffLabel); - this.setState({ - genSeed: newSeed, - genLabel: newLabel - }); - let strSeed = `[[${newSeed}]]`; - - this.getGenImage(strSeed, newLabel); + } + }; + } + + /** + * Converts a 2D array string into a 1D array of floats + * @param {string} arrayString - string version of a 1x? array of floats + * @returns {Float[]} - The 1D float array from arrayString + */ + twoDArrayStringToOneDArray(arrayString) { + let numbers = arrayString.substring(2, arrayString.length - 2); //cut off the "[[]]" + let arrayNum = numbers.split(",").map(function(item) { + return parseFloat(item); + }); + return arrayNum; + } + + /** + * Finds a difference vector between the genSeed and the otherSeed + * @param {Float[]} genSeed - the current generated image seed + * @param {Float[]} otherSeed - the other seed to frind the difference from + * @param {Float} stepSize - The multiplyer on the difference vector + */ + findDiff(genSeed, otherSeed, stepSize = 0.1) { + let diffVec = []; + for (let i = 0; i < genSeed.length; i++) { + let diff = (genSeed[i] - otherSeed[i]) * stepSize; //Magic number 10, works well + diffVec.push(diff); } - - /** - * Moves genSeed away from seed linearly, and generates the new image. Directly modifies state. - * @param {Float[]} seed - 1xSEED_LENGTH array - */ - subSeed(seed, label){ - let diffSeed = this.findDiff(this.state.genSeed, seed); - let newSeed = this.subVec(this.state.genSeed, diffSeed); - - let diffLabel = this.findDiff(this.state.genLabel, label); - let newLabel = this.addVec(this.state.genLabel, diffLabel); - this.setState({ - genSeed: newSeed, - genLabel: newLabel - }); - let strSeed = `[[${newSeed}]]`; - this.getGenImage(strSeed, newLabel); + return diffVec; + } + + // findDiff(genSeed, otherSeed, vecMul=1){ + // let diffVec=[] + // for (let i = 0; i < genSeed.length; i++){ + // let diff = (genSeed[i] - otherSeed[i]); + // diffVec.push(diff); + // } + // let norm = this.normalizeVector(diffVec, vecMul); + // return norm; + // } + + // normalizeVector(vec, multiplyer){ + // let normVec = []; + // for (let i = 0; i < vec.length; i++){ + // let val = (vec[i] / Math.sqrt(vec[i]*vec[i]))*multiplyer; + // normVec.push(val) + // } + // console.log("Norm"+normVec) + // return(normVec); + // } + + /** + * Adds diffVec to genSeed, limits values to be between -1,1 + * @param {Float[]} genSeed - The current generated image seed + * @param {Float[]} diffVec - A difference vector to add to diffVec + */ + addVec(genSeed, diffVec) { + let newSeed = []; + for (let i = 0; i < genSeed.length; i++) { + let newVal = genSeed[i] - diffVec[i]; + newSeed.push(newVal); } - - render() { - return( - - - - - {this.state.apiData.title} - - - {this.state.apiData.objectDate} - - - Artist: {this.state.apiData.artistDisplayName} - - - - - - - - - - - - - - ); + return newSeed; + } + + /** + * Subtracts diffVec from genSeed, limits values to be between -1,1 + * @param {Float[]} genSeed - The current generated image seed + * @param {Float[]} diffVec - A difference vector to subtract from diffVec + */ + subVec(genSeed, diffVec) { + let newSeed = []; + for (let i = 0; i < genSeed.length; i++) { + let newVal = genSeed[i] + diffVec[i]; + newSeed.push(newVal); } -} \ No newline at end of file + return newSeed; + } + + /** + * Moves genSeed towards seed linearly, and generates the new image. Directly modifies state. + * @param {Float[]} seed - 1xSEED_LENGTH array + */ + addSeed(seed, label) { + let diffSeed = this.findDiff(this.state.genSeed, seed); + let newSeed = this.addVec(this.state.genSeed, diffSeed); + + let diffLabel = this.findDiff(this.state.genLabel, label); + let newLabel = this.addVec(this.state.genLabel, diffLabel); + this.setState({ + genSeed: newSeed, + genLabel: newLabel + }); + let strSeed = `[[${newSeed}]]`; + + this.getGenImage(strSeed, newLabel); + } + + /** + * Moves genSeed away from seed linearly, and generates the new image. Directly modifies state. + * @param {Float[]} seed - 1xSEED_LENGTH array + */ + subSeed(seed, label) { + let diffSeed = this.findDiff(this.state.genSeed, seed); + let newSeed = this.subVec(this.state.genSeed, diffSeed); + + let diffLabel = this.findDiff(this.state.genLabel, label); + let newLabel = this.addVec(this.state.genLabel, diffLabel); + this.setState({ + genSeed: newSeed, + genLabel: newLabel + }); + let strSeed = `[[${newSeed}]]`; + this.getGenImage(strSeed, newLabel); + } + + render() { + console.log(this.state.apiData) + return ( + + + + + + {this.state.apiData.title} + + + {this.state.apiData.objectDate} + + + Artist: {this.state.apiData.artistDisplayName} + + +

hiii

+ + + + + + + + + + + + ); + } +} diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index 8eb64f8..466baec 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -1,29 +1,32 @@ import React, { Component } from 'react'; -import GenArt from './GenArt.jsx'; import { NamespacesConsumer } from 'react-i18next'; +import {NavLink} from 'react-router-dom'; class MapExploreContainer extends Component { - generatePath = () => { - const pathname = this.props.location.pathname - console.log(pathname) + generatePath = (page) => { + const pathname = this.props.location.pathname.split('/')[2] + return `/${page}/${pathname}` } renderHeader = () => { - return this.props.map ? - ( -
- - -
- ) : - ( + const getClass = (page, isMapPage) => { + if (page === 'map' && isMapPage) { + return "map__tab is-active" + } else if (page === 'explore' && !isMapPage) { + return "map__tab is-active" + } else { + return "map__tab" + } + } + return ( +
- - - {/* */} + +
- ) + + ) } render () { @@ -33,15 +36,10 @@ class MapExploreContainer extends Component {
{this.renderHeader()}
-

{t('map.title')}

{t('map.description')}

-
- test asdasdasdas -
- {this.props.children}
diff --git a/website/deep-art/src/MapPage/MapPage.jsx b/website/deep-art/src/MapPage/MapPage.jsx index d312b55..bc9f7de 100644 --- a/website/deep-art/src/MapPage/MapPage.jsx +++ b/website/deep-art/src/MapPage/MapPage.jsx @@ -1,7 +1,6 @@ import React, { Component } from "react"; import GenArt from "./GenArt.jsx"; import setupPlotly from "./map.js"; -import { NamespacesConsumer } from "react-i18next"; import MapExploreContainer from "../MapExploreContainer/MapExploreContainer.jsx"; @@ -31,7 +30,7 @@ class MapPage extends Component { render() { return ( - +
Date: Tue, 12 Feb 2019 18:25:49 +0100 Subject: [PATCH 03/22] Component for artwork infoin map-explore container --- .../deep-art/src/ExplorePage/ExplorePage.jsx | 36 ++++--------------- .../src/MapExploreContainer/ArtworkInfo.jsx | 36 +++++++++++++++++++ .../MapExploreContainer.jsx | 8 ++++- 3 files changed, 50 insertions(+), 30 deletions(-) create mode 100644 website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx diff --git a/website/deep-art/src/ExplorePage/ExplorePage.jsx b/website/deep-art/src/ExplorePage/ExplorePage.jsx index ef8a78d..8bbfc31 100644 --- a/website/deep-art/src/ExplorePage/ExplorePage.jsx +++ b/website/deep-art/src/ExplorePage/ExplorePage.jsx @@ -7,6 +7,7 @@ import InfoArt from "./InfoArt.jsx"; import { Box, Grid, Paragraph } from "grommet"; import MapExploreContainer from "../MapExploreContainer/MapExploreContainer.jsx"; +import ArtworkInfo from "../MapExploreContainer/ArtworkInfo.jsx"; /** * Page for the Exploring feature @@ -277,9 +278,9 @@ export default class ExplorePage extends Component { } render() { - console.log(this.state.apiData) + console.log(this.state.apiData); return ( - + - - - - {this.state.apiData.title} - - - {this.state.apiData.objectDate} - - - Artist: {this.state.apiData.artistDisplayName} - - -

hiii

- - + { + return ( + + + + {apiData.title} + + + {apiData.objectDate} + + + Artist: {apiData.artistDisplayName} + + + + + ); +}; + +export default ArtworkInfo; diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index 466baec..e12996b 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { NamespacesConsumer } from 'react-i18next'; import {NavLink} from 'react-router-dom'; +import ArtworkInfo from "./ArtworkInfo.jsx"; class MapExploreContainer extends Component { @@ -38,7 +39,12 @@ class MapExploreContainer extends Component {

{t('map.title')}

-

{t('map.description')}

+

{t('map.description')}>

+ +
{this.props.children}
From 1d99ce3c9d2d4e12fc15dec85ca2a4b4de7e8154 Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 09:58:35 +0100 Subject: [PATCH 04/22] conditional in ME container to stop error from missing data in map page --- .../MapExploreContainer/MapExploreContainer.jsx | 14 ++++++++++---- website/deep-art/src/SelectPage/SelectPage.jsx | 1 + 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index e12996b..09ceeb2 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -30,6 +30,15 @@ class MapExploreContainer extends Component { ) } + renderArtworkInfo = () => { + return ( + + ) + } + render () { return ( @@ -40,10 +49,7 @@ class MapExploreContainer extends Component {

{t('map.title')}

{t('map.description')}>

- + {this.props.apiData && this.renderArtworkInfo(this.props.apiData, this.props.imgData)}
{this.props.children} diff --git a/website/deep-art/src/SelectPage/SelectPage.jsx b/website/deep-art/src/SelectPage/SelectPage.jsx index 09a8871..48aa7ac 100644 --- a/website/deep-art/src/SelectPage/SelectPage.jsx +++ b/website/deep-art/src/SelectPage/SelectPage.jsx @@ -234,6 +234,7 @@ class SelectPage extends Component { let url = '?id=' + this.state.selectedImage.id.toString() + '&ids=[' + idList.toString() + ']'; url = encodeURIComponent(url); + console.log(urlBase + url) return urlBase + url; } From 9cdda6040a59ff7f466029f6ef4469493176253b Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 09:58:44 +0100 Subject: [PATCH 05/22] format --- website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index 09ceeb2..a7ab0c8 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -50,7 +50,6 @@ class MapExploreContainer extends Component {

{t('map.description')}>

{this.props.apiData && this.renderArtworkInfo(this.props.apiData, this.props.imgData)} -
{this.props.children}
From 45399417d0d0e3f22e9f53dd7f47a57843961777 Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 10:15:53 +0100 Subject: [PATCH 06/22] fn to get missing artwork info data --- website/deep-art/src/MapPage/MapPage.jsx | 33 +++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/website/deep-art/src/MapPage/MapPage.jsx b/website/deep-art/src/MapPage/MapPage.jsx index bc9f7de..83bac56 100644 --- a/website/deep-art/src/MapPage/MapPage.jsx +++ b/website/deep-art/src/MapPage/MapPage.jsx @@ -12,7 +12,9 @@ class MapPage extends Component { constructor(props) { super(props); this.state = { - cursorPoint: null + cursorPoint: null, + imgData: "", + apiData: {} }; } @@ -23,14 +25,39 @@ class MapPage extends Component { let selectedArt = url.split("&")[0].slice(4); let artArr = url.split("&")[1].slice(4); artArr = JSON.parse(artArr); - + const id = selectedArt; //Setup the Plotly graph setupPlotly(this, artArr, selectedArt); + this.getArtworkInfo(id); + } + + getArtworkInfo = (id) => { + console.log(id) + const baseMetUrl = + "https://collectionapi.metmuseum.org/public/collection/v1/objects/"; + let metApiUrl = baseMetUrl + id; + + const Http = new XMLHttpRequest(); + Http.open("GET", metApiUrl); + Http.send(); + Http.onreadystatechange = e => { + if (Http.readyState === 4) { + try { + let response = JSON.parse(Http.responseText); + this.setState({ + imgData: response.primaryImage, + apiData: response + }, () => console.log(this.state)); + } catch(e) { + console.log("malformed request:" + Http.responseText); + } + } + } } render() { return ( - +
Date: Wed, 13 Feb 2019 11:04:32 +0100 Subject: [PATCH 07/22] reactored getArtworkinfo to mapcontainer --- .../deep-art/src/ExplorePage/ExplorePage.jsx | 1 - .../src/MapExploreContainer/ArtworkInfo.jsx | 4 +- .../MapExploreContainer.jsx | 45 +++++++++++++++++-- website/deep-art/src/MapPage/MapPage.jsx | 31 +------------ .../deep-art/src/SelectPage/SelectPage.jsx | 1 - 5 files changed, 46 insertions(+), 36 deletions(-) diff --git a/website/deep-art/src/ExplorePage/ExplorePage.jsx b/website/deep-art/src/ExplorePage/ExplorePage.jsx index 8bbfc31..3f9591a 100644 --- a/website/deep-art/src/ExplorePage/ExplorePage.jsx +++ b/website/deep-art/src/ExplorePage/ExplorePage.jsx @@ -278,7 +278,6 @@ export default class ExplorePage extends Component { } render() { - console.log(this.state.apiData); return ( { diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index a7ab0c8..2e073d3 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -4,6 +4,45 @@ import {NavLink} from 'react-router-dom'; import ArtworkInfo from "./ArtworkInfo.jsx"; class MapExploreContainer extends Component { + constructor(props) { + super(props); + this.state = { + imgData: "", + apiData: {} + }; + } + + componentDidMount() { + let url = this.props.location.pathname.split('/')[2] + //Decode the url data + url = decodeURIComponent(url); + let selectedArt = url.split("&")[0].slice(4); + const id = selectedArt; + this.getArtworkInfo(id); + } + + getArtworkInfo = (id) => { + const baseMetUrl = + "https://collectionapi.metmuseum.org/public/collection/v1/objects/"; + let metApiUrl = baseMetUrl + id; + + const Http = new XMLHttpRequest(); + Http.open("GET", metApiUrl); + Http.send(); + Http.onreadystatechange = e => { + if (Http.readyState === 4) { + try { + let response = JSON.parse(Http.responseText); + this.setState({ + imgData: response.primaryImage, + apiData: response + }); + } catch(e) { + console.log("malformed request:" + Http.responseText); + } + } + } + } generatePath = (page) => { const pathname = this.props.location.pathname.split('/')[2] @@ -33,8 +72,8 @@ class MapExploreContainer extends Component { renderArtworkInfo = () => { return ( ) } @@ -49,7 +88,7 @@ class MapExploreContainer extends Component {

{t('map.title')}

{t('map.description')}>

- {this.props.apiData && this.renderArtworkInfo(this.props.apiData, this.props.imgData)} + {(this.state.apiData && this.state.imgData) && this.renderArtworkInfo()}
{this.props.children}
diff --git a/website/deep-art/src/MapPage/MapPage.jsx b/website/deep-art/src/MapPage/MapPage.jsx index 83bac56..6f3c5b5 100644 --- a/website/deep-art/src/MapPage/MapPage.jsx +++ b/website/deep-art/src/MapPage/MapPage.jsx @@ -12,9 +12,7 @@ class MapPage extends Component { constructor(props) { super(props); this.state = { - cursorPoint: null, - imgData: "", - apiData: {} + cursorPoint: null }; } @@ -28,36 +26,11 @@ class MapPage extends Component { const id = selectedArt; //Setup the Plotly graph setupPlotly(this, artArr, selectedArt); - this.getArtworkInfo(id); - } - - getArtworkInfo = (id) => { - console.log(id) - const baseMetUrl = - "https://collectionapi.metmuseum.org/public/collection/v1/objects/"; - let metApiUrl = baseMetUrl + id; - - const Http = new XMLHttpRequest(); - Http.open("GET", metApiUrl); - Http.send(); - Http.onreadystatechange = e => { - if (Http.readyState === 4) { - try { - let response = JSON.parse(Http.responseText); - this.setState({ - imgData: response.primaryImage, - apiData: response - }, () => console.log(this.state)); - } catch(e) { - console.log("malformed request:" + Http.responseText); - } - } - } } render() { return ( - +
Date: Wed, 13 Feb 2019 11:49:40 +0100 Subject: [PATCH 08/22] Fixed NPM vulnerabilities --- website/deep-art/package-lock.json | 44 +++++++++++++++--------------- website/deep-art/package.json | 2 +- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/website/deep-art/package-lock.json b/website/deep-art/package-lock.json index 6f133b4..0b59d54 100644 --- a/website/deep-art/package-lock.json +++ b/website/deep-art/package-lock.json @@ -4685,9 +4685,9 @@ } }, "d3-quadtree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.5.tgz", - "integrity": "sha512-U2tjwDFbZ75JRAg8A+cqMvqPg1G3BE7UTJn3h8DHjY/pnsAfWdbJKgyfcy7zKjqGtLAmI0q8aDSeG1TVIKRaHQ==" + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.6.tgz", + "integrity": "sha512-NUgeo9G+ENQCQ1LsRr2qJg3MQ4DJvxcDNCiohdJGHt5gRhBW6orIB5m5FJ9kK3HNL8g9F4ERVoBzcEwQBfXWVA==" }, "d3-timer": { "version": "1.0.9", @@ -7709,9 +7709,9 @@ } }, "gl-error3d": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/gl-error3d/-/gl-error3d-1.0.12.tgz", - "integrity": "sha512-OaYMB0G9RJx8MfC16x6Q0TnYKZ51nrac4GiUqBlIKyDuNGW1U6YLmiuzY3u6ftQlh0jVhk7lDXCawgAeeYA3JA==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/gl-error3d/-/gl-error3d-1.0.13.tgz", + "integrity": "sha512-KxZ7NhsYOLZTXpYpoHfebGZJPCxl5ZumlqX1NvJ+1hRxE0pt7gT6ZBMZvWCgUSt+XDtMtD6IolG6ADtRvgYCcg==", "requires": { "gl-buffer": "^2.1.2", "gl-shader": "^4.2.1", @@ -7760,9 +7760,9 @@ } }, "gl-line3d": { - "version": "1.1.9", - "resolved": "https://registry.npmjs.org/gl-line3d/-/gl-line3d-1.1.9.tgz", - "integrity": "sha512-00E3VAxTXGOpn8cGImtMaDnKs6UkyVYEZ2tzUBYwjea9N8UB6wvR1NBoKwb0A/wFNIYUsLhdc3LKZyliB0DVLA==", + "version": "1.1.10", + "resolved": "https://registry.npmjs.org/gl-line3d/-/gl-line3d-1.1.10.tgz", + "integrity": "sha512-/IudYVrkERVwtQNaXYJNwDy3qoN/q/2Pb71bk2cqtTswda7moD2JO5o7xg9enSXGRb6vggRw26G4DDt/iMpK+Q==", "requires": { "binary-search-bounds": "^2.0.4", "gl-buffer": "^2.0.8", @@ -7891,9 +7891,9 @@ } }, "gl-scatter3d": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/gl-scatter3d/-/gl-scatter3d-1.1.5.tgz", - "integrity": "sha512-i/5Vrd2c9rqvgISkJcrSz3st7eCCIBgCkICb73MBJANd+PI+ptRZ3mgrUttwGB3bQm01HKJPpBr/R4/gQ6PPAw==", + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/gl-scatter3d/-/gl-scatter3d-1.1.6.tgz", + "integrity": "sha512-KwdBJMyc9d7snHAfIlJAPPFa70zNWjrxuZV6NyMCEM9WlzFCoIScMtbuPdpQZJccaFjmM+aBfyiyWBbGWYsBjw==", "requires": { "gl-buffer": "^2.0.6", "gl-mat4": "^1.0.0", @@ -12571,9 +12571,9 @@ } }, "plotly.js": { - "version": "1.44.2", - "resolved": "https://registry.npmjs.org/plotly.js/-/plotly.js-1.44.2.tgz", - "integrity": "sha512-BkHeJEXPpOEh/V+Agy7jaC6/cm4RpLKKQq5A+CEsdqzvmkpdR0mn6zfppX9M1rfdO0s1dG+hdtij9LiTMkNA4A==", + "version": "1.44.4", + "resolved": "https://registry.npmjs.org/plotly.js/-/plotly.js-1.44.4.tgz", + "integrity": "sha512-YTSR4gZCpZw4PznaxdRQEh39SUok0lTJtRfIYG5AGoSmQ83JN6nEbHsGbaNZeB3L0M5eHRbeCEEJDSDLngKFTQ==", "requires": { "3d-view": "^2.0.0", "@plotly/d3-sankey": "^0.5.1", @@ -12591,15 +12591,15 @@ "font-atlas-sdf": "^1.3.3", "gl-cone3d": "^1.2.2", "gl-contour2d": "^1.1.5", - "gl-error3d": "^1.0.12", + "gl-error3d": "^1.0.13", "gl-heatmap2d": "^1.0.5", - "gl-line3d": "^1.1.9", + "gl-line3d": "^1.1.10", "gl-mat4": "^1.2.0", "gl-mesh3d": "^2.0.7", "gl-plot2d": "^1.4.2", "gl-plot3d": "^1.6.3", "gl-pointcloud2d": "^1.0.2", - "gl-scatter3d": "^1.1.5", + "gl-scatter3d": "^1.1.6", "gl-select-box": "^1.0.3", "gl-spikes2d": "^1.0.2", "gl-streamtube3d": "^1.1.2", @@ -19808,15 +19808,15 @@ "integrity": "sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA==" }, "tape": { - "version": "4.9.2", - "resolved": "https://registry.npmjs.org/tape/-/tape-4.9.2.tgz", - "integrity": "sha512-lPXKRKILZ1kZaUy5ynWKs8ATGSUO7HAFHCFnBam6FaGSqPdOwMWbxXHq4EXFLE8WRTleo/YOMXkaUTRmTB1Fiw==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/tape/-/tape-4.10.0.tgz", + "integrity": "sha512-3PgdF0vcZ1t7HEYbpTXdo58KXi19QCGcZfj07A53M2DH14P2Fw3cB3f9pF7e/Br2z+PQm7xlvhjzHH3D8ti99g==", "requires": { "deep-equal": "~1.0.1", "defined": "~1.0.0", "for-each": "~0.3.3", "function-bind": "~1.1.1", - "glob": "~7.1.2", + "glob": "~7.1.3", "has": "~1.0.3", "inherits": "~2.0.3", "minimist": "~1.2.0", diff --git a/website/deep-art/package.json b/website/deep-art/package.json index 9420503..bd57952 100644 --- a/website/deep-art/package.json +++ b/website/deep-art/package.json @@ -7,7 +7,7 @@ "file-saver": "^2.0.0", "grommet": "^2.2.1", "i18next": "^12.0.0", - "plotly.js": "^1.44.2", + "plotly.js": "^1.44.4", "plotly.js-dist": "^1.44.1", "react": "^16.7.0", "react-dom": "^16.7.0", From 2dccf8a67da186d9d6801a4e7a150df7d75b443c Mon Sep 17 00:00:00 2001 From: Ignacio Villanueva Date: Wed, 13 Feb 2019 11:59:10 +0100 Subject: [PATCH 09/22] Removed @mixin container-centered() padding --- .../src/styles/abstracts/mixins/_container-centered.scss | 2 -- website/deep-art/src/styles/components/_btn.scss | 5 +---- website/deep-art/src/styles/layout/_selectpage-head.scss | 2 ++ 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss b/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss index aa18c09..73170ce 100644 --- a/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss +++ b/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss @@ -5,7 +5,5 @@ margin-left: auto; margin-right: auto; max-width: $container-width; - padding-left: $space-m; - padding-right: $space-m; width: 100%; } diff --git a/website/deep-art/src/styles/components/_btn.scss b/website/deep-art/src/styles/components/_btn.scss index 99b4a97..e64b053 100644 --- a/website/deep-art/src/styles/components/_btn.scss +++ b/website/deep-art/src/styles/components/_btn.scss @@ -12,10 +12,7 @@ text-decoration: none; margin-left: 0; margin-right: 0; - padding-bottom: $space-m; - padding-left: $space-l; - padding-right: $space-l; - padding-top: $space-m; + padding: $space-m; text-transform: uppercase; transition-duration: $animation-speed; transition-property: color, background-color; diff --git a/website/deep-art/src/styles/layout/_selectpage-head.scss b/website/deep-art/src/styles/layout/_selectpage-head.scss index a99968d..55dac81 100644 --- a/website/deep-art/src/styles/layout/_selectpage-head.scss +++ b/website/deep-art/src/styles/layout/_selectpage-head.scss @@ -4,6 +4,8 @@ height: 94px; justify-content: space-between; margin-bottom: $space-xl; + padding-left: $space-m; + padding-right: $space-m; @include container-centered(); } From a796cfaec36dcb832693e153089bb431bfc6abf6 Mon Sep 17 00:00:00 2001 From: Ignacio Villanueva Date: Wed, 13 Feb 2019 12:01:21 +0100 Subject: [PATCH 10/22] Updated map's font size --- website/deep-art/src/styles/abstracts/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/deep-art/src/styles/abstracts/_variables.scss b/website/deep-art/src/styles/abstracts/_variables.scss index a5d6c89..0861187 100644 --- a/website/deep-art/src/styles/abstracts/_variables.scss +++ b/website/deep-art/src/styles/abstracts/_variables.scss @@ -81,7 +81,7 @@ $scale: 1.25; // $font-s: 0.75rem; // 12px $font-m: 1rem; // 16px -$font-l: 1.125; // 18px +$font-l: 1.125rem; // 18px // // #Spacing From 837a6daefb185e37639f6f20936506092d9e9b46 Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 13:02:36 +0100 Subject: [PATCH 11/22] wip style map explore header --- .../deep-art/src/ExplorePage/ExplorePage.jsx | 45 ++----- website/deep-art/src/ExplorePage/GenArt.jsx | 116 ++++++++++++------ website/deep-art/src/ExplorePage/InfoArt.jsx | 2 +- .../src/MapExploreContainer/ArtworkInfo.jsx | 36 ++---- .../MapExploreContainer.jsx | 20 +-- .../deep-art/src/SelectPage/SelectControl.jsx | 4 +- website/deep-art/src/main.scss | 4 +- .../src/styles/components/_artwork-info.scss | 13 ++ .../src/styles/components/_map-explore.scss | 66 ++++++++++ .../deep-art/src/styles/pages/_explore.scss | 3 + 10 files changed, 197 insertions(+), 112 deletions(-) create mode 100644 website/deep-art/src/styles/components/_artwork-info.scss create mode 100644 website/deep-art/src/styles/components/_map-explore.scss diff --git a/website/deep-art/src/ExplorePage/ExplorePage.jsx b/website/deep-art/src/ExplorePage/ExplorePage.jsx index 3f9591a..26c2a79 100644 --- a/website/deep-art/src/ExplorePage/ExplorePage.jsx +++ b/website/deep-art/src/ExplorePage/ExplorePage.jsx @@ -279,40 +279,17 @@ export default class ExplorePage extends Component { render() { return ( - - - - - - - - - - - + +
+ +
+ +
+
); } diff --git a/website/deep-art/src/ExplorePage/GenArt.jsx b/website/deep-art/src/ExplorePage/GenArt.jsx index e409def..9744fe3 100644 --- a/website/deep-art/src/ExplorePage/GenArt.jsx +++ b/website/deep-art/src/ExplorePage/GenArt.jsx @@ -1,51 +1,89 @@ -import React, { Component } from 'react'; -import { Box, Button, Image} from 'grommet'; -import { saveAs } from 'file-saver'; +import React, { Component } from "react"; +import { Box, Image } from "grommet"; +import { saveAs } from "file-saver"; +import CircularProgress from "@material-ui/core/CircularProgress"; /** * The box containing the generated image * 'image' prop: The generated image, in base64 encoded ArrayBuffer format */ export default class GenArt extends Component { - constructor(props){ - super(props); + constructor(props) { + super(props); - this.state = { - image: 0, - } - this.saveImage = this.saveImage.bind(this); + this.state = { + image: 0, + objID: 0, + redirect: false }; + this.saveImage = this.saveImage.bind(this); + } + + getSimilarArtID() { + let file = this.props.image; + + const apiURL = + "https://methack-api.azure-api.net/ImageSimilarity/FindSimilarImages/Byte"; + const key = + "?subscription-key=43d3f563ea224c4c990e437ada74fae8&neighbors=1"; + const Http = new XMLHttpRequest(); + const data = new FormData(); + data.append("image", file); - saveImage(){ - let number = Math.floor(Math.random()*(10000)); - let file = new File([this.props.data], "image"+number.toString()+".jpeg", {type: "image/jpeg"}); - saveAs(file); + Http.open("POST", apiURL + key); + Http.send(data); + Http.onreadystatechange = e => { + if (Http.readyState === 4) { + try { + let response = JSON.parse(Http.responseText); + let id = response.results[0].ObjectID; + if (id === undefined || id === null) { + id = 0; + } + this.setState({ + objID: id, + redirect: true + }); + } catch (e) { + console.log("malformed request:" + Http.responseText); + } + } }; + } + + saveImage() { + let number = Math.floor(Math.random() * 10000); + let file = new File( + [this.props.data], + "image" + number.toString() + ".jpeg", + { type: "image/jpeg" } + ); + saveAs(file); + } + + render() { + let loadOrImage = + this.props.image === 0 || + this.props.image === null || + this.props.image === undefined ? ( + + ) : ( + + ); - render(){ - - const ImageBox = () => ( - - - - - ); - - return( - - - - + +
+ ); + } +} diff --git a/website/deep-art/src/ExplorePage/InfoArt.jsx b/website/deep-art/src/ExplorePage/InfoArt.jsx index 11b6ab9..69768f9 100644 --- a/website/deep-art/src/ExplorePage/InfoArt.jsx +++ b/website/deep-art/src/ExplorePage/InfoArt.jsx @@ -21,7 +21,7 @@ export default class InfoArt extends Component { ); return( - + ); } } \ No newline at end of file diff --git a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx index a49f78a..f31ad70 100644 --- a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx +++ b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx @@ -2,34 +2,18 @@ import React from "react"; import { Box, Paragraph } from "grommet"; import InfoArt from "../ExplorePage/InfoArt.jsx"; +//TODO translations for unknown values const ArtworkInfo = ({ apiData, imgData }) => { + const {title, objectDate, artistDisplayName} = apiData; return ( - - - - {apiData.title} - - - {apiData.objectDate} - - - Artist: {apiData.artistDisplayName} - - - - +
+ +
+

{title ? title : 'Unknown'}

+

Date:

{objectDate ? objectDate : 'Unknown'}
+

Artist:

{artistDisplayName ? artistDisplayName : 'Unknown'}
+
+
); }; diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index 2e073d3..a9cce58 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -52,16 +52,16 @@ class MapExploreContainer extends Component { renderHeader = () => { const getClass = (page, isMapPage) => { if (page === 'map' && isMapPage) { - return "map__tab is-active" + return "map-explore__tab is-active" } else if (page === 'explore' && !isMapPage) { - return "map__tab is-active" + return "map-explore__tab is-active" } else { - return "map__tab" + return "map-explore__tab" } } return ( -
+
@@ -82,13 +82,15 @@ class MapExploreContainer extends Component { return ( {t => ( -
+
{this.renderHeader()} -
+

{t('map.title')}

-
-

{t('map.description')}>

- {(this.state.apiData && this.state.imgData) && this.renderArtworkInfo()} +
+

{t('map.description')}

+
+ {(this.state.apiData && this.state.imgData) && this.renderArtworkInfo()} +
{this.props.children}
diff --git a/website/deep-art/src/SelectPage/SelectControl.jsx b/website/deep-art/src/SelectPage/SelectControl.jsx index 91fa789..bbe9cbb 100644 --- a/website/deep-art/src/SelectPage/SelectControl.jsx +++ b/website/deep-art/src/SelectPage/SelectControl.jsx @@ -23,12 +23,12 @@ export default class SearchControl extends Component { * @param {*} n - the number of unqiue elements to choose. N <= list.length */ pickNUniqueFromList(list, n) { - if (n > list.length) { + if (list && n > list.length) { return 'N IS TOO LARGE'; } let output = []; - while (output.length < n) { + while (list && output && output.length < n) { let randIndex = Math.floor(Math.random() * list.length); let choice = list[randIndex]; if (!output.includes(choice)) { diff --git a/website/deep-art/src/main.scss b/website/deep-art/src/main.scss index b07ee0d..6663272 100644 --- a/website/deep-art/src/main.scss +++ b/website/deep-art/src/main.scss @@ -38,7 +38,9 @@ '/styles/components/btn', '/styles/components/nav', '/styles/components/gen-art', - '/styles/components/plot'; + '/styles/components/plot', + '/styles/components/map-explore', + '/styles/components/artwork-info'; // 6. Page-specific styles @import diff --git a/website/deep-art/src/styles/components/_artwork-info.scss b/website/deep-art/src/styles/components/_artwork-info.scss new file mode 100644 index 0000000..7341d0f --- /dev/null +++ b/website/deep-art/src/styles/components/_artwork-info.scss @@ -0,0 +1,13 @@ +.artwork-info { + display: flex; + + &__image { + flex: 1; + width: 15%; + height: 15%; + } + + &__detail { + flex: 1 + } +} \ No newline at end of file diff --git a/website/deep-art/src/styles/components/_map-explore.scss b/website/deep-art/src/styles/components/_map-explore.scss new file mode 100644 index 0000000..bc81d49 --- /dev/null +++ b/website/deep-art/src/styles/components/_map-explore.scss @@ -0,0 +1,66 @@ +.map-explore { + box-shadow: $box-shadow; + margin-bottom: 4.5rem; + width: $container-width; + + @include container-centered(); + + &__header { + font-weight: $font-weight-semibold; + letter-spacing: 3.43px; + } + + &__tab { + background-color: $color-shade-light; + border: none; + color: $color-primary; + padding: $space-m; + text-align: center; + + &:hover { + cursor: pointer; + } + + &.is-active { + background-color: $color-secondary; + color: $color-text-light; + } + } + + &__content { + padding: $map-padding; + } + + &__data { + border-bottom: 1px solid $color-shade-light; + display: flex; + } + + .claim { + text-transform: uppercase; + } + + &__description { + color: $color-primary; + font-size: $font-l; + line-height: 1.78; + margin-top: 0; + margin-bottom: 3rem; + // margin-right: $map-description-margin; + flex: 7; + padding-bottom: 1.5rem; + } + + &__artwork-info { + flex: 5; + } + + &__original { + max-width: clac(100% - #{$map-description-width} - #{$map-description-margin}); + width: 100%; + } + + &__result { + display: flex; + } +} diff --git a/website/deep-art/src/styles/pages/_explore.scss b/website/deep-art/src/styles/pages/_explore.scss index 8873a53..16973b5 100644 --- a/website/deep-art/src/styles/pages/_explore.scss +++ b/website/deep-art/src/styles/pages/_explore.scss @@ -1,3 +1,6 @@ .explore { color: red; + &__result { + display: flex + } } \ No newline at end of file From ce846aaf4b921a2ad820cceb17cedc337b5f43e4 Mon Sep 17 00:00:00 2001 From: Ignacio Villanueva Date: Wed, 13 Feb 2019 14:17:46 +0100 Subject: [PATCH 12/22] Added node styles in map --- website/deep-art/src/MapPage/map.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/website/deep-art/src/MapPage/map.js b/website/deep-art/src/MapPage/map.js index 14bc7e8..3362465 100644 --- a/website/deep-art/src/MapPage/map.js +++ b/website/deep-art/src/MapPage/map.js @@ -65,9 +65,9 @@ export default function setupPlotly(stateHolder, objIDs, firstID) { name: 'primary', layer: "above", marker: { - size: 15, - color: 'rgb(0, 0, 0)', - symbol: "square", + size: 44, + color: '#002050', + symbol: "circle", }, } ]; @@ -110,7 +110,7 @@ export default function setupPlotly(stateHolder, objIDs, firstID) { /** * Calls an API, sending a seed, and getting back an ArrayBuffer reprsenting that image * This function directly saves the image data and ArrayBuffer to state - * @param {string} seedArr - string version of a 1xSEED_LENGTH array of floats between -1,1 + * @param {string} seedArr - string version of a 1xSEED_LENGTH array of floats between -1,1 * @param {Float[]} labelArr - data version of a 1000 length array of floats between 0,1 */ function getGenImage(seedArr, labelArr) { @@ -240,7 +240,7 @@ export default function setupPlotly(stateHolder, objIDs, firstID) { /** * If a click is super close to a point, generates an image based on that point's object, then returns false - * @param {int[]} ids - list of object IDs, in the same order as distances + * @param {int[]} ids - list of object IDs, in the same order as distances * @param {float[]} distances - list of distances from click to points, in same order as ids */ function checkIfNotSuperClose(ids, distances){ @@ -269,7 +269,7 @@ export default function setupPlotly(stateHolder, objIDs, firstID) { let totalLabel = new Array(1000).fill(0); ratios.forEach(function (r, i) { const index = idToIndex[ids[i]]; - + const labels = stateHolder.state.images[index].labels; const latents = stateHolder.state.images[index].latents; totalLatent = addVector(totalLatent, scalarMultiplyVector(latents, r)); @@ -293,8 +293,8 @@ export default function setupPlotly(stateHolder, objIDs, firstID) { /** * Multiplies a vector by a scalar - * @param {Float[]} vec - * @param {Float} scalar + * @param {Float[]} vec + * @param {Float} scalar */ function scalarMultiplyVector(vec, scalar) { return vec.map(v => v * scalar) @@ -331,8 +331,8 @@ export default function setupPlotly(stateHolder, objIDs, firstID) { /** * Changes from mouse coords to plotly coords - * @param {int} x - x coord in pixels of the mouse - * @param {int} y - y coord in pixels of the mouse + * @param {int} x - x coord in pixels of the mouse + * @param {int} y - y coord in pixels of the mouse */ function toPlotlyCoords(x, y) { const width = myPlot.clientWidth + 8; @@ -346,7 +346,7 @@ export default function setupPlotly(stateHolder, objIDs, firstID) { /** * updates the location of the main marker and updates the generated image periodically - * @param {int[]} point - the point of the marker + * @param {int[]} point - the point of the marker */ function updatePOI(point) { Plotly.restyle(divName, { 'x': [[point[0]]], 'y': [[point[1]]] }, 1); From 994b88c4e59296da885e6f648cfa96b478036b06 Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 16:41:56 +0100 Subject: [PATCH 13/22] add alt to img in artwork info --- website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx | 3 ++- .../deep-art/src/MapExploreContainer/MapExploreContainer.jsx | 3 ++- .../src/styles/abstracts/mixins/_container-centered.scss | 2 -- website/deep-art/src/styles/components/_artwork-info.scss | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx index f31ad70..523c5fc 100644 --- a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx +++ b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx @@ -4,10 +4,11 @@ import InfoArt from "../ExplorePage/InfoArt.jsx"; //TODO translations for unknown values const ArtworkInfo = ({ apiData, imgData }) => { + console.log(apiData) const {title, objectDate, artistDisplayName} = apiData; return (
- + {apiData.objectName}/

{title ? title : 'Unknown'}

Date:

{objectDate ? objectDate : 'Unknown'}
diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index a9cce58..b21c285 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -33,8 +33,9 @@ class MapExploreContainer extends Component { if (Http.readyState === 4) { try { let response = JSON.parse(Http.responseText); + console.log(response) this.setState({ - imgData: response.primaryImage, + imgData: response.primaryImageSmall, apiData: response }); } catch(e) { diff --git a/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss b/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss index aa18c09..73170ce 100644 --- a/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss +++ b/website/deep-art/src/styles/abstracts/mixins/_container-centered.scss @@ -5,7 +5,5 @@ margin-left: auto; margin-right: auto; max-width: $container-width; - padding-left: $space-m; - padding-right: $space-m; width: 100%; } diff --git a/website/deep-art/src/styles/components/_artwork-info.scss b/website/deep-art/src/styles/components/_artwork-info.scss index 7341d0f..4f59f8d 100644 --- a/website/deep-art/src/styles/components/_artwork-info.scss +++ b/website/deep-art/src/styles/components/_artwork-info.scss @@ -3,8 +3,8 @@ &__image { flex: 1; - width: 15%; - height: 15%; + width: 5%; + height: 5%; } &__detail { From 5c05460914f5956084de6384ac0872184683badb Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 16:42:12 +0100 Subject: [PATCH 14/22] formatting --- website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx index 523c5fc..aea4d8b 100644 --- a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx +++ b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx @@ -4,7 +4,6 @@ import InfoArt from "../ExplorePage/InfoArt.jsx"; //TODO translations for unknown values const ArtworkInfo = ({ apiData, imgData }) => { - console.log(apiData) const {title, objectDate, artistDisplayName} = apiData; return (
From 5827915dde754e6946fb8ffcb5a38ab5af2e040a Mon Sep 17 00:00:00 2001 From: Ignacio Villanueva Date: Wed, 13 Feb 2019 16:54:17 +0100 Subject: [PATCH 15/22] Added map styles --- website/deep-art/src/main.scss | 3 +- .../src/styles/components/_gen-art.scss | 11 +++ .../deep-art/src/styles/components/_plot.scss | 11 --- website/deep-art/src/styles/pages/_map.scss | 72 +++++++++++++++++-- 4 files changed, 80 insertions(+), 17 deletions(-) delete mode 100644 website/deep-art/src/styles/components/_plot.scss diff --git a/website/deep-art/src/main.scss b/website/deep-art/src/main.scss index 39a8a37..1ac100b 100644 --- a/website/deep-art/src/main.scss +++ b/website/deep-art/src/main.scss @@ -37,8 +37,7 @@ @import '/styles/components/btn', '/styles/components/nav', - '/styles/components/gen-art', - '/styles/components/plot'; + '/styles/components/gen-art'; // 6. Page-specific styles @import diff --git a/website/deep-art/src/styles/components/_gen-art.scss b/website/deep-art/src/styles/components/_gen-art.scss index 34b11e9..439c16e 100644 --- a/website/deep-art/src/styles/components/_gen-art.scss +++ b/website/deep-art/src/styles/components/_gen-art.scss @@ -2,5 +2,16 @@ // This file contains all styles related to the .gen-art component // --------------------------------------------------------------- .gen-art { + margin-right: $space-l; width: $gen-width; + + &__loader > div { + display: block; + margin-left: auto; + margin-right: auto; + } + + .button { + width: 100%; + } } diff --git a/website/deep-art/src/styles/components/_plot.scss b/website/deep-art/src/styles/components/_plot.scss deleted file mode 100644 index aa32f98..0000000 --- a/website/deep-art/src/styles/components/_plot.scss +++ /dev/null @@ -1,11 +0,0 @@ -// --------------------------------------------------------------- -// This file contains all styles related to the .plot component -// --------------------------------------------------------------- -.plot { - border-collapse: collapse; - height: 90%; - margin: 0; - pad: 0; - padding: 0; - width: calc(100% - #{$gen-width} - #{$map-padding}); -} diff --git a/website/deep-art/src/styles/pages/_map.scss b/website/deep-art/src/styles/pages/_map.scss index 57da5af..9cdf6a4 100644 --- a/website/deep-art/src/styles/pages/_map.scss +++ b/website/deep-art/src/styles/pages/_map.scss @@ -49,16 +49,80 @@ font-size: $font-l; line-height: 1.78; margin-top: 0; - margin-right: $map-description-margin; + margin-right: $space-l; margin-bottom: 3rem; + width: calc(70% - #{$space-l}); } - &__original { - max-width: clac(100% - #{$map-description-width} - #{$map-description-margin}); + &__result { + display: flex; + } + + &__result-header { + background-color: $color-primary; + color: white; + text-align: center; + } + + &__plot { + width: calc(100% - #{$space-l} - #{$gen-width}); + } + + &__plot-header { + background-color: $color-primary; + color: $color-text-light; + padding-bottom: $space-xs; + padding-top: $space-xs; + text-align: center; + } + + &__plot-graph { + border-collapse: collapse; + height: 28.125rem; + margin: 0; + pad: 0; + padding: 0; width: 100%; } +} - &__result { +.original { + display: flex; + width: 30%; + + &__img { + background-color: $color-shade-light; + height: $original-img-size; + margin-right: $space-m; + object-fit: contain; + width: $original-img-size; + } + + &__description, + &__data { + margin-top: 0; + } + + &__description { + color: $color-primary; + font-size: $font-m; + font-weight: $font-weight-semibold; + margin-bottom: $space-m; + } + + &__data { display: flex; + margin-bottom: $space-xs; + } + + &__title, + &__text { + font-size: $font-s; + color: $color-primary; + } + + &__title { + font-weight: $font-weight-semibold; + margin-right: $space-xs; } } From 983322da9b867f05f46de5f40380839fa4b45a22 Mon Sep 17 00:00:00 2001 From: Ignacio Villanueva Date: Wed, 13 Feb 2019 16:54:46 +0100 Subject: [PATCH 16/22] Added original HTML --- website/deep-art/src/MapPage/MapPage.jsx | 32 +++++++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/website/deep-art/src/MapPage/MapPage.jsx b/website/deep-art/src/MapPage/MapPage.jsx index ad28a65..3f3c897 100644 --- a/website/deep-art/src/MapPage/MapPage.jsx +++ b/website/deep-art/src/MapPage/MapPage.jsx @@ -28,7 +28,18 @@ class MapExplorePage extends Component { setupPlotly(this, artArr, selectedArt); } + setDateFormat() { + + } + render() { + const { apiData } = this.state; + const artistDisplayName = apiData && apiData.artistDisplayName; + const primaryImageSmall = apiData && apiData.primaryImageSmall; + const objectName = apiData && apiData.objectName; + const objectDate = apiData && apiData.objectDate; + const title = apiData && apiData.title; + return ( {t => ( @@ -38,12 +49,22 @@ class MapExplorePage extends Component {
-

{t('map.title')}

{t('map.description')}

-
- test asdasdasdas +
+ {objectName +
+

{title}

+

+

{t('map.time')}:
+
{artistDisplayName || 'Unknown'}
+

+ +
@@ -54,7 +75,10 @@ class MapExplorePage extends Component { data={this.state.genArr} /> -
+
+
{t('map.explore')}
+
+
From b0ef720484a9bd4b93a2d7a363a150bdca7be2fa Mon Sep 17 00:00:00 2001 From: Ignacio Villanueva Date: Wed, 13 Feb 2019 16:54:52 +0100 Subject: [PATCH 17/22] Added translations --- website/deep-art/src/assets/locales/translation.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/deep-art/src/assets/locales/translation.json b/website/deep-art/src/assets/locales/translation.json index 36cb6bf..e897a2a 100644 --- a/website/deep-art/src/assets/locales/translation.json +++ b/website/deep-art/src/assets/locales/translation.json @@ -13,6 +13,8 @@ "map.title": "Gan", "map.description": "A trained GAN (Generative Adversarial Network) contains a model of a shared feature space underlying a collection of images. Based on given artworks from The Met collection, the GAN allows you to explore and visualize the spaces in between selected artworks from The Met’s Open Access collection.", "map.explore": "Explore the map to discover new objects in the space between existing Met artworks", + "map.time": "Time", + "map.date": "Date", "foo.desc": "Gen Studio is a prototype concepts which was created over a two-day hackathon with collaborators across The Met, Microsoft, and MIT.", "foo.privacy_cookies": "Privacy & Cookies", From 5f5082a2affbfab3bc2d0989814ed1e57b09bb98 Mon Sep 17 00:00:00 2001 From: Ignacio Villanueva Date: Wed, 13 Feb 2019 16:55:37 +0100 Subject: [PATCH 18/22] Added Sass Var --- website/deep-art/src/styles/abstracts/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/deep-art/src/styles/abstracts/_variables.scss b/website/deep-art/src/styles/abstracts/_variables.scss index 0861187..12fbcdc 100644 --- a/website/deep-art/src/styles/abstracts/_variables.scss +++ b/website/deep-art/src/styles/abstracts/_variables.scss @@ -149,9 +149,9 @@ $horizontal-space: 6.25rem; $horizontal-foo-padding: 2.875rem; $letter-spacing: 3px; $map-description-width: 34rem; // 544px -$map-description-margin: 8rem; $map-padding: 3rem; $nav-unit: 6rem; +$original-img-size: 6rem; // // Slick carousel custom Sizes From 6878de8c58d806bc247a704f74ed756f1a0711ad Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 16:59:36 +0100 Subject: [PATCH 19/22] remove console log --- website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx index b21c285..feb9996 100644 --- a/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx +++ b/website/deep-art/src/MapExploreContainer/MapExploreContainer.jsx @@ -33,7 +33,6 @@ class MapExploreContainer extends Component { if (Http.readyState === 4) { try { let response = JSON.parse(Http.responseText); - console.log(response) this.setState({ imgData: response.primaryImageSmall, apiData: response From 0037abbfc4aa29f655fe4e039ed5c3cf775f8d96 Mon Sep 17 00:00:00 2001 From: "PLAINCONCEPTS\\ichen" Date: Wed, 13 Feb 2019 17:54:54 +0100 Subject: [PATCH 20/22] successful merge ... --- .../deep-art/src/ExplorePage/ExplorePage.jsx | 20 +++++---- .../src/MapExploreContainer/ArtworkInfo.jsx | 4 +- .../MapExploreContainer.jsx | 22 +--------- website/deep-art/src/MapPage/MapPage.jsx | 7 ++- .../src/styles/components/_map-explore.scss | 44 +++++++++++++++++-- website/deep-art/src/styles/pages/_map.scss | 41 ----------------- 6 files changed, 60 insertions(+), 78 deletions(-) diff --git a/website/deep-art/src/ExplorePage/ExplorePage.jsx b/website/deep-art/src/ExplorePage/ExplorePage.jsx index 26c2a79..e11d1f9 100644 --- a/website/deep-art/src/ExplorePage/ExplorePage.jsx +++ b/website/deep-art/src/ExplorePage/ExplorePage.jsx @@ -280,16 +280,18 @@ export default class ExplorePage extends Component { render() { return ( -
- -
- + {t => ( +
+ +
+ +
-
+ )} ); } diff --git a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx index 6953287..4320520 100644 --- a/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx +++ b/website/deep-art/src/MapExploreContainer/ArtworkInfo.jsx @@ -14,8 +14,8 @@ const ArtworkInfo = ({ apiData, t }) => {

{title}

-

{t("map.time")}:
-
{artistDisplayName || "Unknown"}
+ {t("map.time")}: + {artistDisplayName || "Unknown"}