From 52d08cd798489de1bbe775a5388abaa0eb69460a Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Wed, 19 May 2021 02:05:20 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Begin=20building=20the=20PageRep?= =?UTF-8?q?ository?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../interactive/BoxRepositoryTweets.js | 2 +- .../components/interactive/PickerFilter.js | 15 ++++ .../interactive/PickerVisualization.js | 14 +++ nest_frontend/routes/PageRepository.js | 89 ++++++++++++++----- .../routes/PageRepository.module.css | 33 +++++-- 5 files changed, 122 insertions(+), 31 deletions(-) create mode 100644 nest_frontend/components/interactive/PickerFilter.js create mode 100644 nest_frontend/components/interactive/PickerVisualization.js diff --git a/nest_frontend/components/interactive/BoxRepositoryTweets.js b/nest_frontend/components/interactive/BoxRepositoryTweets.js index 3ca1e7a..d5e32fa 100644 --- a/nest_frontend/components/interactive/BoxRepositoryTweets.js +++ b/nest_frontend/components/interactive/BoxRepositoryTweets.js @@ -8,7 +8,7 @@ export default function BoxRepositoryTweets({ tweets, ...props }) { return ( - {tweets.map(tweet => )} + {tweets.map(tweet => )} ) } diff --git a/nest_frontend/components/interactive/PickerFilter.js b/nest_frontend/components/interactive/PickerFilter.js new file mode 100644 index 0000000..253d8d1 --- /dev/null +++ b/nest_frontend/components/interactive/PickerFilter.js @@ -0,0 +1,15 @@ +import React from "react" +import ButtonIconOnly from "../base/ButtonIconOnly" +import { faAt, faChartBar, faClock, faCloud, faHashtag, faMap, faMapPin } from "@fortawesome/free-solid-svg-icons" + + +export default function PickerFilter({ currentTab, setTab, ...props }) { + return ( +
+ setTab("hashtag")} disabled={currentTab === "hashtag"} color={"Grey"} icon={faHashtag}/> + setTab("user")} disabled={currentTab === "user"} color={"Grey"} icon={faAt}/> + setTab("location")} disabled={currentTab === "location"} color={"Grey"} icon={faMapPin}/> + setTab("time")} disabled={currentTab === "time"} color={"Grey"} icon={faClock}/> +
+ ) +} diff --git a/nest_frontend/components/interactive/PickerVisualization.js b/nest_frontend/components/interactive/PickerVisualization.js new file mode 100644 index 0000000..5baeed7 --- /dev/null +++ b/nest_frontend/components/interactive/PickerVisualization.js @@ -0,0 +1,14 @@ +import React from "react" +import ButtonIconOnly from "../base/ButtonIconOnly" +import { faAt, faChartBar, faClock, faCloud, faHashtag, faMap, faMapPin } from "@fortawesome/free-solid-svg-icons" + + +export default function PickerVisualization({ currentTab, setTab, ...props }) { + return ( +
+ setTab("wordcloud")} disabled={currentTab === "wordcloud"} color={"Grey"} icon={faCloud}/> + setTab("histogram")} disabled={currentTab === "histogram"} color={"Grey"} icon={faChartBar}/> + setTab("map")} disabled={currentTab === "map"} color={"Grey"} icon={faMap}/> +
+ ) +} diff --git a/nest_frontend/routes/PageRepository.js b/nest_frontend/routes/PageRepository.js index 792f8dd..4e6e82b 100644 --- a/nest_frontend/routes/PageRepository.js +++ b/nest_frontend/routes/PageRepository.js @@ -1,11 +1,20 @@ -import React from "react" +import React, { useMemo, useState } from "react" import Style from "./PageRepository.module.css" import classNames from "classnames" import BoxRepositoryTweets from "../components/interactive/BoxRepositoryTweets" import BoxWordcloud from "../components/interactive/BoxWordcloud" +import ButtonIconOnly from "../components/base/ButtonIconOnly" +import { faAt, faChartBar, faClock, faCloud, faHashtag, faMap, faMapPin } from "@fortawesome/free-solid-svg-icons" +import BoxFull from "../components/base/BoxFull" +import BoxHeader from "../components/base/BoxHeader" +import PickerVisualization from "../components/interactive/PickerVisualization" +import PickerFilter from "../components/interactive/PickerFilter" export default function PageRepository({ className, ...props }) { + const [visualizationTab, setVisualizationTab] = useState("wordcloud") + const [addFilterTab, setAddFilterTab] = useState("hashtag") + const tweets = [ { "conditions": [], @@ -18,34 +27,66 @@ export default function PageRepository({ className, ...props }) { }, ] - let preprocessedWords = {} - for(const tweet of tweets) { - if(!tweet.content) { - continue - } - for(const word of tweet.content.toLowerCase().split(/\s+/)) { - if(!preprocessedWords.hasOwnProperty(word)) { - preprocessedWords[word] = 0 + const words = useMemo( + () => { + let preprocessedWords = {} + for(const tweet of tweets) { + if(!tweet.content) { + continue + } + for(const word of tweet.content.toLowerCase().split(/\s+/)) { + if(!preprocessedWords.hasOwnProperty(word)) { + preprocessedWords[word] = 0 + } + preprocessedWords[word] += 1 + } } - preprocessedWords[word] += 1 - } - } - let processedWords = [] - for(const word in preprocessedWords) { - if(!preprocessedWords.hasOwnProperty(word)) { - continue - } - processedWords.push({ - text: word, - value: preprocessedWords[word] - }) - } + let processedWords = [] + for(const word in preprocessedWords) { + if(!preprocessedWords.hasOwnProperty(word)) { + continue + } + processedWords.push({ + text: word, + value: preprocessedWords[word] + }) + } + return processedWords + }, + [tweets] + ) + + return (
- - + + Repository Senza Nome + + + + + + {visualizationTab === "wordcloud" ? + + : null} + +
) } diff --git a/nest_frontend/routes/PageRepository.module.css b/nest_frontend/routes/PageRepository.module.css index caf1eb7..b132387 100644 --- a/nest_frontend/routes/PageRepository.module.css +++ b/nest_frontend/routes/PageRepository.module.css @@ -2,24 +2,45 @@ display: grid; grid-template-areas: - "a b" - "c d" - "e f" - "g h" + "h h" + "a b" + "a c" + "d e" + "d f" ; grid-gap: 10px; grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr auto 1fr auto; + grid-template-rows: auto auto 1fr auto auto; width: 100%; height: 100%; } +.Header { + grid-area: h; +} + .Tweets { grid-area: a; } .Wordcloud { + grid-area: c; +} + +.Filters { + grid-area: d; +} + +.AddFilter { + grid-area: f; +} + +.FilterPicker { + grid-area: e; +} + +.VisualizationPicker { grid-area: b; -} \ No newline at end of file +}