diff --git a/assets/8KnotArch.png b/assets/8KnotArch.png new file mode 100644 index 00000000..b3e2aaf3 Binary files /dev/null and b/assets/8KnotArch.png differ diff --git a/assets/color.css b/assets/color.css index 605c5941..de9d6149 100644 --- a/assets/color.css +++ b/assets/color.css @@ -11,25 +11,25 @@ h3 { } blockquote h5 { - color: #AAA !important; + color: #aaa !important; } blockquote { - color: #8D9D92 !important; - font-style: normal; - font-size: 18px; - margin-left: 32px; - font-family: Consolas, "Times New Roman", Verdana; - border-left: 4px solid #787878; - padding-left: 8px; + color: #8d9d92 !important; + font-style: normal; + font-size: 18px; + margin-left: 32px; + font-family: Consolas, "Times New Roman", Verdana; + border-left: 4px solid #787878; + padding-left: 8px; } blockquote p { - margin-top: 1px; - margin-bottom: 1px; - width: auto; - min-width: 50px; - max-width: 950px; + margin-top: 1px; + margin-bottom: 1px; + width: auto; + min-width: 50px; + max-width: 950px; } /* this is to change the color for the spinner, cant be changed directly */ @@ -67,183 +67,3 @@ blockquote p { text-shadow: none !important; font-weight: "normal" !important; } - -.shadow { - box-shadow: 5px 3px 3px rgb(53, 53, 53) !important; -} - -.welcome_container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding: 0; - - /*overrides bootstrap max width for elements at 1140px*/ - max-width: 100%; -} - -.welcome_message { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - width: 60%; - text-align: center; -} - -.welcome_message h1 { - font-size: 70px; - color: #6c8975; - margin-bottom: 20px; -} - -.welcome_message p { - font-size: 30px; -} - -.welcome_message img { - height: 250px; - border-radius: 20px; - margin-bottom: 15px; -} - -.welcome_section { - margin-bottom: 20px; -} - -.welcome_section_header { - font-size: 36px; - color: black; - text-align: center; - background-color: #57573e; - border-top-left-radius: 15px; - border-top-right-radius: 15px; - margin: 20px; - margin-top: 0; - width: 100%; -} - -.welcome_content_section { - background-color: #868662; - border-radius: 15px; - width: 95%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-bottom: 20px; - margin-top: 20px; -} - -.welcome_section_content { - display: flex; - justify-content: space-evenly; - padding-bottom: 20px; - width: 100%; -} - -.pages_overview_container { - width: 20%; - background-color: #6d6d4e; - border-radius: 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - border: 1px solid rgb(39, 39, 39); -} - -/*Using important because headers are styled elsewhere.*/ -.pages_overview_container h2 { - color: rgb(29, 29, 29) !important; - font-size: 24px !important; - text-align: center !important; - padding-top: 10px; -} - -.pages_overview_container p { - color: rgb(29, 29, 29); - font-size: 20px; - text-align: left; - padding-left: 10px; - padding-right: 10px; -} - -.instruction_header { - width: 15%; - border-radius: 15px; -} - -.instruction_header p { - font-size: 36px; - text-align: left; - color: black; - background-color: #57573e; - border-radius: 15px; - padding: 25px; -} - -/*if the content is instructions we want the y-axis*/ -.welcome_section_instructions { - align-items: center; -} - -.instruction_container { - width: 75%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; -} - -.instruction_item { - width: 95%; - background-color: #6d6d4e; - border-radius: 15px; - margin-bottom: 10px; - margin-top: 10px; - display: flex; - align-items: center; -} - -.instruction_item h3 { - font-size: 104px; - text-align: left; - color: black !important; - width: 10%; - font-weight: bold; - margin: 15px; - margin-right: 25px; -} - -.instruction_item p { - font-size: 24px; - text-align: left; - color: black; - width: 50%; - margin: 10px; -} - -.instruction_item_images { - display: flex; - justify-content: center; - max-height: 95%; - max-width: 100%; - align-items: center; -} - -.instruction_item_images img { - max-width: 30%; - max-height: 90%; - margin: 10px; -} - -/* - Transitional icon that should always be pretty small. -*/ -.arrow_icon { - width: 100px; - height: 100px; - background-color: transparent; -} diff --git a/assets/welcome.css b/assets/welcome.css new file mode 100644 index 00000000..5729c3bc --- /dev/null +++ b/assets/welcome.css @@ -0,0 +1,222 @@ +/* + CSS classes for Welcome page. + */ + +.welcome_container { + padding: 0; + border: 0; + display: flex; + flex-direction: column; + align-items: center; +} + +/* + container at the top level of welcome page +*/ +.toplevel_welcome_div { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +/* + 8Knot logo and mission statement text. +*/ +.welcome_callout_section { + display: flex; + flex-direction: column; + align-items: center; +} + +.welcome_callout_section img { + border-radius: 20px; + height: 250px; + width: 250px; + margin-bottom: 10px; +} + +.welcome_callout_section p { + font-size: 36px; + text-align: center; + max-width: 1000px; + min-width: 500px; +} + +/* + Tabs section +*/ +.welcome_instructions_section { + width: 100%; +} + +.tab_section_container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.card_section_container { + margin-top: 10px; + width: 95%; + background-color: #32383e; + padding: 15px 0px; + margin-bottom: 20px; + border-radius: 10px; +} + +/* Wrapper to make a div centered */ +.card_section_container_centered { + display: flex; + flex-direction: column; + align-items: center; +} + +/* + Top header and paragraph on + card section +*/ +.card_section_description { + width: 75%; + margin: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.card_section_description p { + font-size: 20px; + margin-bottom: 30px; + text-align: center; +} + +/* + Container of row of card items + */ +.card_section_body { + display: flex; + justify-content: space-evenly; +} + +.card_section_body_vertical { + flex-direction: column; +} + +/* + Cards describing application + */ +.info_card { + margin: 5px; + padding: 0px 5px; +} + +.info_card h2 { + text-align: center; +} + +.info_card p { + font-size: 16px; + padding-left: 10px; + padding-right: 10px; + text-align: center; +} + +/* + Styling for architecture components +*/ + +.architecture_section { + flex-wrap: wrap; +} + +.architecture_section_part { + width: 45%; +} + +.architecture_image { + display: block; + height: auto; + border-radius: 15px; + /* set so that items will wrap */ + min-width: 487px; + min-height: 437px; +} + +.architecture_description p { + padding-left: 10px; +} + +/* + Styling for plotly instruction section +*/ +.instruction_card { + margin: 5px; + padding: 0px 5px; +} + +.instruction_card p { + font-size: 16px; + padding-left: 10px; + padding-right: 10px; +} + +.instruction_card_body { + width: 45%; + min-width: 300px; +} + +.centered_img { + display: flex; + justify-content: center; +} + +.plotly_instructions_section { + display: flex; + justify-content: center; + flex-wrap: wrap; + align-items: center; +} + +/* + For arrow-separated instruction images + */ +.plotly_instructions_section_img { + width: 30%; + min-width: 300px; +} + +.arrow_icon { + width: 100px !important; + height: 100px; + background-color: transparent; +} + +/* + For instruction cards that are + 50/50 text and image + */ +.instruction_card_split { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; +} + +/* + to prevent image from + overflowing its parent div. +*/ +.instruction_image { + height: auto; + width: 100%; + max-width: 100%; +} + +/* + If an image is too big, + scale it down slightly. */ +.scale_smaller { + height: 75%; + width: 75%; +} diff --git a/assets/welcome_login_section/8KnotLoggedIn.png b/assets/welcome_login_section/8KnotLoggedIn.png new file mode 100644 index 00000000..504b1e62 Binary files /dev/null and b/assets/welcome_login_section/8KnotLoggedIn.png differ diff --git a/assets/welcome_login_section/8KnotLogin.png b/assets/welcome_login_section/8KnotLogin.png new file mode 100644 index 00000000..98af41e2 Binary files /dev/null and b/assets/welcome_login_section/8KnotLogin.png differ diff --git a/assets/welcome_login_section/AugurAuthorize.png b/assets/welcome_login_section/AugurAuthorize.png new file mode 100644 index 00000000..1a0f3ff1 Binary files /dev/null and b/assets/welcome_login_section/AugurAuthorize.png differ diff --git a/assets/welcome_login_section/AugurRegister.png b/assets/welcome_login_section/AugurRegister.png new file mode 100644 index 00000000..0f2b97dc Binary files /dev/null and b/assets/welcome_login_section/AugurRegister.png differ diff --git a/assets/all-categories-graph.png b/assets/welcome_plotly_section/all-categories-graph.png similarity index 100% rename from assets/all-categories-graph.png rename to assets/welcome_plotly_section/all-categories-graph.png diff --git a/assets/click-zoom-graph.png b/assets/welcome_plotly_section/click-zoom-graph.png similarity index 100% rename from assets/click-zoom-graph.png rename to assets/welcome_plotly_section/click-zoom-graph.png diff --git a/assets/no-stale-graph.png b/assets/welcome_plotly_section/no-stale-graph.png similarity index 100% rename from assets/no-stale-graph.png rename to assets/welcome_plotly_section/no-stale-graph.png diff --git a/assets/normal-graph.png b/assets/welcome_plotly_section/normal-graph.png similarity index 100% rename from assets/normal-graph.png rename to assets/welcome_plotly_section/normal-graph.png diff --git a/assets/rightarrow.png b/assets/welcome_plotly_section/rightarrow.png similarity index 100% rename from assets/rightarrow.png rename to assets/welcome_plotly_section/rightarrow.png diff --git a/assets/zoomed-graph.png b/assets/welcome_plotly_section/zoomed-graph.png similarity index 100% rename from assets/zoomed-graph.png rename to assets/welcome_plotly_section/zoomed-graph.png diff --git a/pages/welcome/sections/__init__.py b/pages/welcome/sections/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/pages/welcome/sections/augur_login_section.py b/pages/welcome/sections/augur_login_section.py new file mode 100644 index 00000000..41f58149 --- /dev/null +++ b/pages/welcome/sections/augur_login_section.py @@ -0,0 +1,119 @@ +from dash import dcc, html +import dash +import dash_bootstrap_components as dbc +import plotly.express as px + +layout = html.Div( + className="tab_section_container", + children=[ + html.Div( + className="card_section_container", + children=[ + html.Div( + className="card_section_container_centered", + children=[ + html.Div( + className="card_section_description", + children=[ + html.H1("Logging in to Augur"), + html.P( + """ + There are no 8Knot accounts, exactly. + Accounts are created and managed by Augur, and account information is used to enrich the experience + of using 8Knot. + """ + ), + ], + ), + ], + ), + html.Div( + className="card_section_body card_section_body_vertical", + children=[ + html.Div( + className="instruction_card instruction_card_split", + children=[ + html.Div( + className="instruction_card instruction_card_body", + children=[ + html.H2("1. Register for an Augur account"), + html.P( + """ + After clicking on "Augur log in/sign up" in the top right corner of the page, + you'll be redirected to the Augur frontend where you can create an account. + """ + ), + ], + ), + html.Div( + className="instruction_card instruction_card_body centered_img", + children=[ + html.Img( + className="instruction_image scale_smaller", + src="assets/welcome_login_section/AugurRegister.png", + ) + ], + ), + ], + ), + html.Div( + className="instruction_card instruction_card_split", + children=[ + html.Div( + className="instruction_card instruction_card_body", + children=[ + html.H2("2. Authorize 8Knot to access your user preferences"), + html.P( + """ + Once you've created your account, you'll be redirected to an + authorization page. This page requests that you allow 8Knot + and Augur to share your account data to enrich your experience. + """ + ), + ], + ), + html.Div( + className="instruction_card instruction_card_body centered_img", + children=[ + html.Img( + className="instruction_image", + src="assets/welcome_login_section/AugurAuthorize.png", + ) + ], + ), + ], + ), + html.Div( + className="instruction_card instruction_card_split", + children=[ + html.Div( + className="instruction_card instruction_card_body", + children=[ + html.H2("3. Successful Login"), + html.P( + """ + After authorizing with Augur, new icons should be available, + including a panel with your username. + "Refresh Groups" will update any group changes made in Augur. + "Manage Groups" opens a new Augur tab where you can make changes to your groups. + """ + ), + ], + ), + html.Div( + className="instruction_card instruction_card_body centered_img", + children=[ + html.Img( + className="instruction_image", + src="assets/welcome_login_section/8KnotLoggedIn.png", + ) + ], + ), + ], + ), + ], + ), + ], + ), + ], +) diff --git a/pages/welcome/sections/general_section.py b/pages/welcome/sections/general_section.py new file mode 100644 index 00000000..d825c4e4 --- /dev/null +++ b/pages/welcome/sections/general_section.py @@ -0,0 +1,108 @@ +from dash import dcc, html +import dash +import dash_bootstrap_components as dbc +import plotly.express as px + +layout = html.Div( + className="tab_section_container", + children=[ + html.Div( + className="card_section_container", + children=[ + html.Div( + className="card_section_container_centered", + children=[ + html.Div( + className="card_section_description", + children=[ + html.H1("8Knot Pages"), + html.P( + """ + Each page approaches the study of open source communities from a different perspective. + """ + ), + ], + ), + ], + ), + html.Div( + className="card_section_body", + children=[ + html.Div( + className="info_card", + children=[ + html.H2("Overview"), + html.P( + """ + Track large community trends over time based on common contributions. + """ + ), + ], + ), + html.Div( + className="info_card", + children=[ + html.H2("Chaoss"), + html.P("Advanced metrics defined and refined by the CHAOSS foundation."), + ], + ), + html.Div( + className="info_card", + children=[ + html.H2("Company"), + html.P( + "Summarizing likely company and institution affiliation with contributor behavior." + ), + ], + ), + html.Div( + className="info_card", + children=[ + html.H2("Info"), + html.P("Information about visualizations and definitions of any terms used."), + ], + ), + ], + ), + ], + ), + html.Div( + # has no distinct header, so set container to be flex conatiner + className="card_section_container card_section_body architecture_section", + children=[ + html.Div( + className="architecture_description architecture_section_part", + children=[ + html.H1("How 8Knot Works"), + html.P( + """ + 8Knot is a data analytics application that uses data from Augur + to render visualizations and generate metrics. + """ + ), + html.H2("Cloud-Native Architecture"), + html.P( + """ + We designed 8Knot to be easily deployable locally, but to also scale + well in the cloud. On a laptop it's a multi-container application. On + a container orchestration platform (Openshift, Kubernetes) it's multi-service. + """ + ), + html.H2("Data Science First"), + html.P( + """ + All analytical processing is done with Python data science packages. If a + workload is sufficiently complex, we can use distributed computing to handle + it. Machine learning and modeling are first-priority workloads. + """ + ), + ], + ), + html.Img( + className="architecture_image architecture_section_part", + src="assets/8KnotArch.png", + ), + ], + ), + ], +) diff --git a/pages/welcome/sections/plotly_section.py b/pages/welcome/sections/plotly_section.py new file mode 100644 index 00000000..90113c50 --- /dev/null +++ b/pages/welcome/sections/plotly_section.py @@ -0,0 +1,116 @@ +from dash import dcc, html +import dash +import dash_bootstrap_components as dbc +import plotly.express as px + +layout = html.Div( + className="tab_section_container", + children=[ + html.Div( + className="card_section_container", + children=[ + html.Div( + className="card_section_container_centered", + children=[ + html.Div( + className="card_section_description", + children=[ + html.H1("Using Plotly Figures"), + html.P( + """ + Visualizations in 8Knot are created with Plotly figures. These figures come with + some convenient tools that might not be immediately obvious- please take a look at a few of + the options below and use them to enhance your analysis. + """ + ), + ], + ), + ], + ), + html.Div( + className="card_section_body card_section_body_vertical", + children=[ + html.Div( + className="instruction_card", + children=[ + html.H2("1. Focus Area"), + html.P( + """ + Click and drag inside of the graph to focus/zoom on a subset of the data. + """ + ), + html.Div( + className="plotly_instructions_section", + children=[ + html.Img( + className="plotly_instructions_section_img", + src="assets/welcome_plotly_section/click-zoom-graph.png", + ), + html.Img( + className="arrow_icon", + src="assets/welcome_plotly_section/rightarrow.png", + ), + html.Img( + className="plotly_instructions_section_img", + src="assets/welcome_plotly_section/zoomed-graph.png", + ), + ], + ), + ], + ), + html.Div( + className="instruction_card", + children=[ + html.H2("2. Exit Focus"), + html.P("Double-click on the graph to exit focus."), + html.Div( + className="plotly_instructions_section", + children=[ + html.Img( + className="plotly_instructions_section_img", + src="assets/welcome_plotly_section/zoomed-graph.png", + ), + html.Img( + className="arrow_icon", + src="assets/welcome_plotly_section/rightarrow.png", + ), + html.Img( + className="plotly_instructions_section_img", + src="assets/welcome_plotly_section/normal-graph.png", + ), + ], + ), + ], + ), + html.Div( + className="instruction_card", + children=[ + html.H2("3. Legend Filter"), + html.P( + "Click on legend items to remove them from the graph; resets axes if necessary." + ), + html.Div( + className="plotly_instructions_section", + children=[ + html.Img( + className="plotly_instructions_section_img", + src="assets/welcome_plotly_section/all-categories-graph.png", + ), + html.Img( + className="arrow_icon", + src="assets/welcome_plotly_section/rightarrow.png", + ), + html.Img( + className="plotly_instructions_section_img", + src="assets/welcome_plotly_section/no-stale-graph.png", + ), + ], + ), + ], + ), + ], + ), + ], + ), + ], +) diff --git a/pages/welcome/welcome.py b/pages/welcome/welcome.py index d0726c22..546e510c 100644 --- a/pages/welcome/welcome.py +++ b/pages/welcome/welcome.py @@ -3,160 +3,60 @@ import dash_bootstrap_components as dbc import plotly.express as px +# import other sections +from .sections.general_section import layout as general_tab_contents +from .sections.plotly_section import layout as plotly_tab_contents +from .sections.augur_login_section import layout as augur_tab_contents + # register the page dash.register_page(__name__, path="/", order=1) -# This is just a stand-in until we wire up a more interesting visualization. -example_fig = px.scatter( - x=[1, 2, 3, 4, 5, 6], - y=[1, 2, 3, 4, 5, 6], - color=["blue", "red", "green", "yellow", "purple", "brown"], - labels={"x": "X Values", "y": "Y Values"}, - size_max=19, - size=[1, 1, 1, 1, 1, 1], -) - -example_fig.update_layout( - title={ - "text": "Example Figure", - "y": 0.9, - "x": 0.5, - "xanchor": "center", - "yanchor": "top", - } -) layout = dbc.Container( className="welcome_container", children=[ html.Div( - className="welcome_message welcome_section", - children=[ - # html.H1("Welcome to 8Knot"), - html.Img(src="assets/logo-color.png"), - html.P( - """ - Open source communities are difficult to understand. 8Knot serves community stakeholders by - providing a platform to host advanced analysis of community behavior through higher-order metrics and visualizations. - """ - ), - ], - ), - html.Div( - className="welcome_content_section shadow", + className="toplevel_welcome_div", children=[ html.Div( - className="welcome_section_header", - children=[html.P("Pages Available")], - ), - html.Div( - className="welcome_section_content", + className="welcome_callout_section", children=[ - html.Div( - className="pages_overview_container shadow", - children=[ - html.H2("Overview"), - html.P( - """ - Track large community trends over time based on common contributions. - """ - ), - ], - ), - html.Div( - className="pages_overview_container shadow", - children=[ - html.H2("Chaoss"), - html.P("Advanced metrics defined and refined by the CHAOSS foundation."), - ], - ), - html.Div( - className="pages_overview_container shadow", - children=[ - html.H2("Company"), - html.P( - "Summarizing likely company and institution affiliation with contributor behavior." - ), - ], - ), - html.Div( - className="pages_overview_container shadow", - children=[ - html.H2("Info"), - html.P("Information about visualizations and definitions of any terms used."), - ], + html.Img(src="assets/logo-color.png"), + html.P( + """ + 8Knot hosts advanced analysis of open source projects, enriching + the study of communities for community architects, developers, + and BI folks alike. + """ ), ], ), - ], - ), - html.Div( - className="welcome_content_section shadow", - children=[ html.Div( - className="welcome_section_content welcome_section_instructions", + className="welcome_instructions_section", children=[ - html.Div( - className="instruction_header", - children=[html.P("Highlighted Plotly.js features for enriched analysis")], - ), - html.Div( - className="instruction_container", + dcc.Tabs( + value="general", children=[ - html.Div( - className="instruction_item shadow", - children=[ - html.H3("1"), - html.P( - "Click and drag inside of the graph to focus/zoom on a subset of the data." - ), - html.Div( - className="instruction_item_images", - children=[ - html.Img(src="assets/click-zoom-graph.png"), - html.Img(className="arrow_icon", src="assets/rightarrow.png"), - html.Img(src="assets/zoomed-graph.png"), - ], - ), - ], + dcc.Tab( + label="General", + value="general", + children=[general_tab_contents], ), - html.Div( - className="instruction_item shadow", - children=[ - html.H3("2"), - html.P("Double-click on the graph to exit focus."), - html.Div( - className="instruction_item_images", - children=[ - html.Img(src="assets/zoomed-graph.png"), - html.Img(className="arrow_icon", src="assets/rightarrow.png"), - html.Img(src="assets/normal-graph.png"), - ], - ), - ], + dcc.Tab( + label="Plotly Figure Tools", + value="plotlyfiguretools", + children=[plotly_tab_contents], ), - html.Div( - className="instruction_item shadow", - children=[ - html.H3("3"), - html.P( - "Click on legend items to remove them from the graph; resets axes if necessary." - ), - html.Div( - className="instruction_item_images", - children=[ - html.Img(src="assets/all-categories-graph.png"), - html.Img(className="arrow_icon", src="assets/rightarrow.png"), - html.Img(src="assets/no-stale-graph.png"), - ], - ), - ], + dcc.Tab( + label="Your Augur Account", + value="auguraccount", + children=[augur_tab_contents], ), ], ), ], - ) + ), ], - ), + ) ], )