feat: Injecting Facet-knoweledge-panel

.env

@@ -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=

conf/apache.conf

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

docker-compose.yml

@@ -15,6 +15,7 @@ x-backend-conf: &backend-conf
     - POSTGRES_PASSWORD
     - ROBOTOFF_URL
     - EVENTS_URL
+    - FACETS_KP_URL
     - EVENTS_USERNAME
     - EVENTS_PASSWORD
     - REDIS_URL

lib/ProductOpener/Config2_docker.pm

@@ -47,6 +47,7 @@ BEGIN {
 		$crowdin_project_key
 		$robotoff_url
 		$events_url
+		$facets_kp_url
 		$events_username
 		$events_password
 		$redis_url
@@ -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};
 

lib/ProductOpener/Config_off.pm

@@ -52,6 +52,9 @@ BEGIN {
 		$events_username
 		$events_password
 
+		$facets_kp_url
+		$redis_url
+
 		$mongodb
 		$mongodb_host
 		$mongodb_timeout_ms
@@ -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;

lib/ProductOpener/Display.pm

@@ -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;
@@ -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 {
 
@@ -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') {
 
@@ -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>";

lib/ProductOpener/Redis.pm

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

templates/web/common/site_layout.tt.html

@@ -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 %]

templates/web/pages/tag/tag.tt.html

@@ -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 %] -->