unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-22 04:54:18 +00:00
Code Activity

🚧 Begin building the PageRepository

Browse source
This commit is contained in:
Steffo 2021-05-19 02:05:20 +02:00
parent 379bc02285
commit 52d08cd798
Signed by: steffo
GPG key ID: 6965406171929D01
5 changed files with 122 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
nest_frontend/components/interactive/BoxRepositoryTweets.js
View file

@ -8,7 +8,7 @@ export default function BoxRepositoryTweets({ tweets, ...props }) {
return (
<BoxFullScrollable header={"Tweets"} {...props}>
{tweets.map(tweet => <SummaryTweet tweet={tweet}/>)}
{tweets.map(tweet => <SummaryTweet key={tweet.snowflake} tweet={tweet}/>)}
</BoxFullScrollable>
)
}

15
nest_frontend/components/interactive/PickerFilter.js Normal file
View file

@ -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 (
<div {...props}>
<ButtonIconOnly onClick={() => setTab("hashtag")} disabled={currentTab === "hashtag"} color={"Grey"} icon={faHashtag}/>
<ButtonIconOnly onClick={() => setTab("user")} disabled={currentTab === "user"} color={"Grey"} icon={faAt}/>
<ButtonIconOnly onClick={() => setTab("location")} disabled={currentTab === "location"} color={"Grey"} icon={faMapPin}/>
<ButtonIconOnly onClick={() => setTab("time")} disabled={currentTab === "time"} color={"Grey"} icon={faClock}/>
</div>
)
}

14
nest_frontend/components/interactive/PickerVisualization.js Normal file
View file

@ -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 (
<div {...props}>
<ButtonIconOnly onClick={() => setTab("wordcloud")} disabled={currentTab === "wordcloud"} color={"Grey"} icon={faCloud}/>
<ButtonIconOnly onClick={() => setTab("histogram")} disabled={currentTab === "histogram"} color={"Grey"} icon={faChartBar}/>
<ButtonIconOnly onClick={() => setTab("map")} disabled={currentTab === "map"} color={"Grey"} icon={faMap}/>
</div>
)
}

89
nest_frontend/routes/PageRepository.js
View file

@ -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 (
<div className={classNames(Style.PageRepository, className)} {...props}>
<BoxRepositoryTweets className={Style.Tweets} tweets={tweets}/>
<BoxWordcloud className={Style.Wordcloud} words={processedWords}/>
<BoxHeader className={Style.Header}>
Repository Senza Nome
</BoxHeader>
<BoxRepositoryTweets
className={Style.Tweets}
tweets={tweets}
/>
<PickerVisualization
className={Style.VisualizationPicker}
currentTab={visualizationTab}
setTab={setVisualizationTab}
/>
{visualizationTab === "wordcloud" ?
<BoxWordcloud
className={Style.Wordcloud}
words={words}
/>
: null}
<PickerFilter
className={Style.FilterPicker}
currentTab={addFilterTab}
setTab={setAddFilterTab}
/>
</div>
)
}

33
nest_frontend/routes/PageRepository.module.css
View file

@ -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;
}
}