Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #11229: Built topic-tree UI at /topic-tree #11230

Merged
merged 9 commits into from
Jun 28, 2022
Merged

Fixes #11229: Built topic-tree UI at /topic-tree #11230

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
094a5df
Fixes #11229: Built topic-tree UI at /topic-tree
KarishmaVanwari Jun 28, 2022
5d60b9b
Resolved codeclimate issues
KarishmaVanwari Jun 28, 2022
2eeed6f
Added respective tag links
KarishmaVanwari Jun 28, 2022
fc652a1
Revert "Added respective tag links"
KarishmaVanwari Jun 28, 2022
6481c26
Added respective tag links
KarishmaVanwari Jun 28, 2022
e84ee63
Revert "Added respective tag links"
KarishmaVanwari Jun 28, 2022
eeb75cd
Added respective tag links
KarishmaVanwari Jun 28, 2022
42ba05b
Revert "Added respective tag links"
KarishmaVanwari Jun 28, 2022
04e38fc
Added respective tag links
KarishmaVanwari Jun 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/controllers/tag_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,4 +566,8 @@ def fetch_counts
@nodes.size
end
end

def topic_tree
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put empty method definitions on a single line.

end

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing whitespace detected.

end
107 changes: 107 additions & 0 deletions app/views/tag/topic_tree.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<h1 style="width: 100vw">Topic Tree</h1>
<br>


<div id="accordion">
<div class="list-group">
<details>
<summary class="list-group-item list-group-item-action topic"><i class="fa fa-chevron-right" style="font-size: small;"></i>&nbsp;Water</summary>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great. OK, so let's merge this, get some feedback, and while we're talking through the visual side with folks, we can work on generating these lists programmatically with Ruby. My guess is we'll start with the top-level topics hard-coded, like:

[
  'agriculture',
  'air-quality'
]

Then we'll make up a new method in the tag controller that returns @child_tags. Calculating that will be a little harder - we'll look for all the wiki pages with the parent:______ tag, and then return all of their slug values (i.e. the short string corresponding with a tagname). So for water-quality we'd return @child_tags of a list of any wiki page slugs where the wiki page has the tag parent:water-quality. Does that make sense?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup @jywarren, this makes a little sense to me.

My guess is we'll start with the top-level topics hard-coded, like:

Where would this be hard-coded?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry! OK, so we moved part of this to here: #11380, where we are setting up a way to request the sub-topics.

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;drinking-water</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;fracking</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;microplastics</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;lead</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;mining</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;agriculture</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;oil-and-gas</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;filters</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;wastewater</a>
</div>
</details>


<details>
<summary class="list-group-item list-group-item-action topic"><i class="fa fa-chevron-right" style="font-size: small;"></i>&nbsp;Soil</summary>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;lead</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;mining</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;agriculture</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;oil-and-gas</a>
</div>
</details>


<details>
<summary class="list-group-item list-group-item-action topic"><i class="fa fa-chevron-right" style="font-size: small;"></i>&nbsp;Air</summary>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;indoor-air</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;formaldehyde</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;dust</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;particulate-matter</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;oil-and-gas</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;transportation</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;filters</a>
</div>
</details>

<details>
<summary class="list-group-item list-group-item-action topic"><i class="fa fa-chevron-right" style="font-size: small;"></i>&nbsp;Industry</summary>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;land-use</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;land-change</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;particulate-matter</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;oil-and-gas</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;transportation</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;mining</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;agriculture</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;waste</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;noise</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;chemicals</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;pipeline-monitoring</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;cafo</a>
</div>
</details>

<details>
<summary class="list-group-item list-group-item-action topic"><i class="fa fa-chevron-right" style="font-size: small;"></i>&nbsp;Climate</summary>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;stormwater</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;land-change</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;particulate-matter</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;oil-and-gas</a>
</div>
</details>

<details>
<summary class="list-group-item list-group-item-action topic"><i class="fa fa-chevron-right" style="font-size: small;"></i>&nbsp;Organizing</summary>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;advocacy</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;community-organizing</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;legal</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;public-comment</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;host-an-event</a>
</div>
</details>

<details>
<summary class="list-group-item list-group-item-action topic"><i class="fa fa-chevron-right" style="font-size: small;"></i>&nbsp;Monitoring</summary>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;air-sensors</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;water-sensors</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;balloon-mapping</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;study-design</a>
<a href="#" class="list-group-item list-group-item-action">&emsp;<i class="fa fa-chevron-right icon"></i>&nbsp;other methods</a>
</div>
</details>

</div>
</div>

<style>
.topic{
background-color: #F5F5F5
}
.icon{
font-size: small;
}
</style>
2 changes: 2 additions & 0 deletions config/routes.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,8 @@
post 'comment/react/delete/:id' => 'comment#react_delete'
post 'comment/react/update/:id' => 'comment#react_update'

get 'topic-tree' => 'tag#topic_tree'

# Sample resource route (maps HTTP verbs to controller actions automatically):
# resources :products

Expand Down