proj2_ui_part

header <- dashboardHeader(
  title = "DS Salary Explorer"
)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Salary Scatter Plot", tabName = "myTabForScatterPlot", icon = icon("bar-chart-o")),
    menuItem("Salary Data Explorer", tabName = "myTabForDataTable", icon = icon("fa fa-table")),    
    menuItem("Salary Comparison Map", tabName = "myTabForGvisMap", icon = icon("fa fa-map-marker")),
    menuItem("Top Recruiters", tabName = "myTabForRecruitRanking", icon = icon("fa fa-list-ol")),
    menuItem("External Info", tabName = "myTabForExternalInfo", icon = icon("fa fa-external-link"))
  )
) 

body <- dashboardBody(
  
  tabItems(
    tabItem("myTabForScatterPlot", h2("Salary Data Scatter Plot"),
            # ... more sub components in this tabItem
    ), 
    tabItem("myTabForDataTable", h2("DS Sarary Data Explorer"),
            # ... more sub components in this tabItem
    ),
    tabItem("myTabForGvisMap", h2("Salary Comparison Map"),
            
            fluidRow(
              box(
                title = "Map 1", solidHeader = TRUE, collapsible = TRUE,
                htmlOutput("myGvisMap1") 
              ),
              box(
                title = "Map 2", solidHeader = TRUE, collapsible = TRUE,
                htmlOutput("myGvisMap2") 
              )
            ),
            fluidRow(
              box(
                title = "DataTable for Map 1", solidHeader = TRUE, collapsible = TRUE,
                DT::dataTableOutput("myComparisonTableByJobTitle1")
              ),
              box(
                title = "DataTable for Map 2", solidHeader = TRUE, collapsible = TRUE,
                DT::dataTableOutput("myComparisonTableByJobTitle2")
              )
            )
    ),
    tabItem("myTabForRecruitRanking", h2("Top Recruiters"),
            # ... more sub components in this tabItem
    ),
    tabItem("myTabForExternalInfo", h2("External sources"),
            # ... more sub components in this tabItem
    )
  ) # end of tabItems
) # end of body