🚧 Begin building the PageRepository

nest_frontend/components/interactive/BoxRepositoryTweets.js

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

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 (
+        <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>
+    )
+}

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 (
+        <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>
+    )
+}

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,6 +27,8 @@ export default function PageRepository({ className, ...props }) {
         },
     ]
 
+    const words = useMemo(
+        () => {
             let preprocessedWords = {}
             for(const tweet of tweets) {
                 if(!tweet.content) {
@@ -41,11 +52,41 @@ export default function PageRepository({ className, ...props }) {
                     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>
     )
 }

nest_frontend/routes/PageRepository.module.css

@@ -2,24 +2,45 @@
     display: grid;
 
     grid-template-areas:
+        "h h"
         "a b"
-            "c d"
-            "e f"
-            "g h"
+        "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;
 }