Skip to content

Commit

Permalink
feat: Injecting Facet-knoweledge-panel (#8055)
Browse files Browse the repository at this point in the history
Adding https://github.com/openfoodfacts/facets-knowledge-panels to the facets pages.

---------

Co-authored-by: Alex Garel <[email protected]>
  • Loading branch information
sumit-158 and alexgarel authored Feb 27, 2023
1 parent 70a4926 commit 4b5bcfa
Show file tree
Hide file tree
Showing 9 changed files with 133 additions and 62 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ MONGO_INITDB_ROOT_USERNAME=root
MONGO_INITDB_ROOT_PASSWORD=test
ROBOTOFF_URL=http://robotoff.openfoodfacts.localhost:5500 # connect to Robotoff running in separate docker-compose deployment
EVENTS_URL=
FACETS_KP_URL = https://facets-kp.openfoodfacts.org/render-to-html
# use this to push products to openfoodfacts-search
# in dev: searchredis:6379 (with openfoodfacts-search running in docker in same network)
REDIS_URL=
Expand Down
1 change: 1 addition & 0 deletions conf/apache.conf
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ PerlPassEnv PRODUCT_OPENER_PORT
PerlPassEnv PRODUCERS_PLATFORM
PerlPassEnv ROBOTOFF_URL
PerlPassEnv EVENTS_URL
PerlPassEnv FACETS_KP_URL
PerlPassEnv EVENTS_USERNAME
PerlPassEnv EVENTS_PASSWORD
PerlPassEnv REDIS_URL
Expand Down
1 change: 1 addition & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ x-backend-conf: &backend-conf
- POSTGRES_PASSWORD
- ROBOTOFF_URL
- EVENTS_URL
- FACETS_KP_URL
- EVENTS_USERNAME
- EVENTS_PASSWORD
- REDIS_URL
Expand Down
5 changes: 5 additions & 0 deletions lib/ProductOpener/Config2_docker.pm
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ BEGIN {
$crowdin_project_key
$robotoff_url
$events_url
$facets_kp_url
$events_username
$events_password
$redis_url
Expand Down Expand Up @@ -106,6 +107,10 @@ $events_url = $ENV{EVENTS_URL};
$events_username = $ENV{EVENTS_USERNAME};
$events_password = $ENV{EVENTS_PASSWORD};

# Set this to your instance of https://github.com/openfoodfacts/facets-knowledge-panels
# Inject facet knowledge panels
$facets_kp_url = $ENV{FACETS_KP_URL};

# Set this to your instance of the search service to enable writes to it
$redis_url = $ENV{REDIS_URL};

Expand Down
9 changes: 9 additions & 0 deletions lib/ProductOpener/Config_off.pm
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ BEGIN {
$events_username
$events_password
$facets_kp_url
$redis_url
$mongodb
$mongodb_host
$mongodb_timeout_ms
Expand Down Expand Up @@ -351,6 +354,12 @@ $events_url = $ProductOpener::Config2::events_url;
$events_username = $ProductOpener::Config2::events_username;
$events_password = $ProductOpener::Config2::events_password;

# Redis is used to push updates to the search server
$redis_url = $ProductOpener::Config2::redis_url;

# Facets knowledge panels url
$facets_kp_url = $ProductOpener::Config2::facets_kp_url;

# server options

%server_options = %ProductOpener::Config2::server_options;
Expand Down
17 changes: 16 additions & 1 deletion lib/ProductOpener/Display.pm
Original file line number Diff line number Diff line change
Expand Up @@ -3986,12 +3986,24 @@ HTML
if (not defined $request_ref->{groupby_tagtype}) {

# Pass template data to generate navigation links
# These are variables that ae used to inject data
# Used in tag.tt.html
#-------------------------------------------------------
# Results of these variables based for category/en:snacks
#---- tagtype would return-> categories -----
#---- tagtype_path would return-> /categories -----
#---- tagtype_name would return-> category -----
#---- tagid would return-> en:snacks -----
#---- tagid_path would return-> /category/snacks -----
#---- tag_name would return-> Snacks -----

$tag_template_data_ref->{tagtype} = $tagtype;
$tag_template_data_ref->{tagtype_path} = '/' . $tag_type_plural{$tagtype}{$lc};
$tag_template_data_ref->{tagtype_name} = lang($tagtype . '_s');
$tag_template_data_ref->{tagid} = $tagid;
$tag_template_data_ref->{tagid_path} = $newtagidpath;
$tag_template_data_ref->{tag_name} = $display_tag;
$tag_template_data_ref->{canon_tagid} = $canon_tagid // $tagid;

if (defined $tagid2) {
$tag_template_data_ref->{tagtype2} = $tagtype2;
Expand All @@ -4000,6 +4012,7 @@ HTML
$tag_template_data_ref->{tagid2} = $tagid2;
$tag_template_data_ref->{tagid2_path} = $newtagid2path;
$tag_template_data_ref->{tag2_name} = $display_tag2;
$tag_template_data_ref->{canon_tagid2} = $canon_tagid2 // $tagid2;
}
else {

Expand Down Expand Up @@ -4033,6 +4046,8 @@ HTML
} # end of if (defined $tagtype)

$tag_template_data_ref->{country} = $country;
$tag_template_data_ref->{country_code} = $cc;
$tag_template_data_ref->{facets_kp_url} = $facets_kp_url;

if ($country ne 'en:world') {

Expand Down Expand Up @@ -4138,7 +4153,7 @@ HTML
$query_ref->{$field} = $tag2_is_negative ? {"\$ne" => $value} : $value;
}
}

# Rendering Page tags
my $tag_html;
process_template('web/pages/tag/tag.tt.html', $tag_template_data_ref, \$tag_html)
or $tag_html = "<p>tag.tt.html template error: " . $tt->error() . "</p>";
Expand Down
2 changes: 1 addition & 1 deletion lib/ProductOpener/Redis.pm
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ BEGIN {
use vars @EXPORT_OK;

use Log::Any qw/$log/;
use ProductOpener::Config2 qw/$redis_url/;
use ProductOpener::Config qw/$redis_url/;
use Redis;

=head2 $redis_client
Expand Down
12 changes: 1 addition & 11 deletions templates/web/common/site_layout.tt.html
Original file line number Diff line number Diff line change
Expand Up @@ -286,17 +286,7 @@
<div itemscope itemtype="[% schema_org_itemtype %]">
<div class="row">
<div class="small-12 column v-space-short">
<h1 itemprop="name">[% title %]
<sup>
[% IF request.tagtype == "categories" %]
<a class="button tiny round secondary label" href="https://hunger.openfoodfacts.org/questions?type=category&amp;value_tag=[% request.canon_tagid %]">[% f_lang('f_help_categorize_on_hunger_games', { title => lang('categories').lcfirst } ) %]</a>
[% ELSIF request.tagtype == "labels" %]
<a class="button tiny round secondary label" href="https://hunger.openfoodfacts.org/questions?type=labels&amp;value_tag=[% canonicalize_taxonomy_tag_link("labels", title) %]">[% f_lang('f_help_categorize_on_hunger_games', { title => lang('labels').lcfirst } ) %]</a>
[% ELSIF request.tagtype == "brands" %]
<a class="button tiny round secondary label" href="https://hunger.openfoodfacts.org/questions?type=brands&amp;value_tag=[% canonicalize_taxonomy_tag_link("brands", title) %]">[% f_lang('f_help_categorize_on_hunger_games', { title => lang('brands').lcfirst } ) %]</a>
[% END %]
</sup>
</h1>
<h1 itemprop="name">[% title %]</h1>
</div>
</div>
[% content %]
Expand Down
147 changes: 98 additions & 49 deletions templates/web/pages/tag/tag.tt.html
Original file line number Diff line number Diff line change
@@ -1,65 +1,114 @@
<!-- start templates/[% template.name %] -->
<div class="tag">
<div class="row">
<div class="large-12 column">
[% IF not groupby_tagtype.defined %]
<div class="tag_navigation">
<a href="[% tagtype_path %]">[% tagtype_name.ucfirst %]</a>
[% sep %]:
<a href="[% tagid_path %]">[% tag_name %]</a>
<div class="large-6 column">
[% IF not groupby_tagtype.defined %]
<div class="tag_navigation">
<a href="[% tagtype_path %]">[% tagtype_name.ucfirst %]</a>
[% sep %]:
<a href="[% tagid_path %]">[% tag_name %]</a>

[% IF tagid2.defined %]
<br>
<a href="[% tagtype2_path %]">[% tagtype2_name.ucfirst %]</a>
[% sep %]:
<a href="[% tagid2_path %]">[% tag2_name %]</a>
[% END %]
</div>
[% IF tagid2.defined %]
<br>
<a href="[% tagtype2_path %]">[% tagtype2_name.ucfirst %]</a>
[% sep %]:
<a href="[% tagid2_path %]">[% tag2_name %]</a>
[% END %]
</div>

[% IF tag_logo %]
<div class="tag_logo">
[% tag_logo %]
</div>
[% END %]
[% IF tag_logo %]
<div class="tag_logo">
[% tag_logo %]
</div>
[% END %]

[% IF canon_url %]
<div class="share_button right" style="float:right;margin-top:-10px;margin-left:10px;display:none;">
<a href="[% canon_url %]" class="button small" title="[% title %]">
[% display_icon('share') %]
<span class="show-for-large-up"> [% lang('share') %]</span>
</a>
</div>
[% END %]
[% IF canon_url %]
<div class="share_button right" style="float:right;margin-top:-10px;margin-left:10px;display:none;">
<a href="[% canon_url %]" class="button small" title="[% title %]">
[% display_icon('share') %]
<span class="show-for-large-up"> [% lang('share') %]</span>
</a>
</div>
[% END %]

[% IF weblinks %]
<div class="weblinks">
[% weblinks %]
</div>
[% END %]

[% IF parents_and_children %]
<div class="parents_and_children">
[% parents_and_children %]
</div>
[% END %]
[% IF weblinks and not facets_kp_url.defined %]
<div class="weblinks">
[% weblinks %]
</div>
[% END %]

[% IF parents_and_children %]
<div class="parents_and_children">
[% parents_and_children %]
</div>
[% END %]

[% IF description %]
<div class="description">
[% description %]
[% IF description %]
<div class="description">
[% description %]
</div>
[% END %]

[% END %]

[% IF country != 'en:world' %]
<p>[% lang('countries_s').ucfirst %][% sep %]: [% display_taxonomy_tag("countries", country) %]
- <a href="[% world_link_url %]">[% world_link %]</a>
</p>
[% END %]

[% IF products_title %]
<h2 class="products_title">[% products_title %]</h2>
[% END %]
</div>
[% END %]
[% END %]

<div class="large-6 column">
[% IF tagid.defined %]
<!-- injecting facet-knowledge-panel -->
<div id="facet-knowledge-panel" style="margin-left: 70px;">
<h2 id="facet_panels_title"></h2>
<div id="facet_panels_content"></div>
</div>
<!-- Fetching facet knowledge panel -->
[% IF facets_kp_url.defined %]
<script>
let facet_kp = "[% facets_kp_url %]";
let params = "?facet_tag=[% tagtype %]&value_tag=[% canon_tagid %]";
if ("[% tagid2.defined %]") {
params += "&sec_facet_tag=[% tagtype2 %]&sec_value_tag=[% canon_tagid2 %]"
}
// Filtering data for country
if ("[% country_code %]" !== "world") {
// Adding language code to get transalted data
params += "&lang_code=[% lc %]&country=[% cc %]";
}

[% IF country != 'en:world' %]
<p>[% lang('countries_s').ucfirst %][% sep %]: [% display_taxonomy_tag("countries", country) %]
- <a href="[% world_link_url %]">[% world_link %]</a>
</p>
[% END %]
fetch(facet_kp + params)
.then((response) => {
if (response.ok) {
return response.text();
}
else {
throw new Error("Network Response Error while fetching facet kp");

[% IF products_title %]
<h2 class="products_title">[% products_title %]</h2>
[% END %]
}
})
.then(data => {
let title = document.getElementById("facet_panels_title");
title.innerHTML = "Facet knowledge panel";
let knowledgepanel = document.getElementById("facet_panels_content");
knowledgepanel.innerHTML = data;
// Keeping Hungergames and Lastedits panel open by default
jQuery("#HungerGames").attr("open", true);
jQuery("#LastEdits").attr("open", true);

})
</script>
[% END %]
[% END %]
</div>
</div>
</div>

<!-- end templates/[% template.name %] -->

0 comments on commit 4b5bcfa

Please sign in to comment.