feat: enabled SEO meta tags, organisms search page and other small up…

…dates
Steinbeck-Lab · Jun 1, 2024 · caf2acb · caf2acb
1 parent 036eb3d
commit caf2acb
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 7 deletions.
diff --git a/app/Livewire/MoleculeDetails.php b/app/Livewire/MoleculeDetails.php
@@ -4,7 +4,6 @@
 
 use App\Models\Molecule;
 use Cache;
-use Livewire\Attributes\Layout;
 use Livewire\Component;
 
 class MoleculeDetails extends Component
@@ -18,11 +17,20 @@ public function mount($id)
         });
     }
 
-    #[Layout('layouts.guest')]
     public function render()
     {
         return view('livewire.molecule-details', [
             'molecule' => $this->molecule,
-        ]);
+        ])->layout('layouts.guest')
+            ->layoutData([
+                'title' => $this->molecule->name ? $this->molecule->name : $this->molecule->iupac_name,
+                'description' => $this->molecule->description ?? 'Molecule details for '.($this->molecule->name ? $this->molecule->name : $this->molecule->iupac_name),
+                'keywords' => 'natural products, '.$this->molecule->name.', '.$this->molecule->iupac_name.', '.implode(',', $this->molecule->synonyms ?? []),
+                'author' => $this->molecule->author ?? 'COCONUT Team',
+                'ogTitle' => $this->molecule->name ? $this->molecule->name : $this->molecule->iupac_name,
+                'ogDescription' => $this->molecule->description ?? 'Molecule details for '.($this->molecule->name ? $this->molecule->name : $this->molecule->iupac_name),
+                'ogImage' => env('CM_API').'depict/2D?smiles='.urlencode($this->molecule->canonical_smiles).'&height=200&width=200&toolkit=cdk' ?? asset('img/coconut-og-image.png'),
+                'ogSiteName' => 'Coconut 2.0',
+            ]);
     }
 }
diff --git a/app/Livewire/Search.php b/app/Livewire/Search.php
@@ -5,6 +5,7 @@
 use App\Http\Resources\MoleculeResource;
 use App\Models\Collection;
 use App\Models\Molecule;
+use App\Models\Organism;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\DB;
 use Livewire\Attributes\Layout;
@@ -36,6 +37,8 @@ class Search extends Component
 
     public $collection = null;
 
+    public $organisms = null;
+
     public function gotoPage($page)
     {
         $this->page = $page;
@@ -173,7 +176,31 @@ public function render()
             } elseif ($queryType == 'tags') {
                 if ($this->tagType == 'dataSource') {
                     $this->collection = Collection::where('title', $this->query)->first();
-                    $results = $this->collection->molecules()->orderBy('annotation_level', 'desc')->paginate($this->size);
+                    if ($this->collection) {
+                        $results = $this->collection->molecules()->orderBy('annotation_level', 'desc')->paginate($this->size);
+                    } else {
+                        $results = new LengthAwarePaginator(
+                            [],
+                            0,
+                            $this->size,
+                            $this->page
+                        );
+                    }
+                } elseif ($this->tagType == 'organisms') {
+                    $this->organisms = array_map(function ($name) {
+                        return strtolower(trim($name));
+                    }, explode(',', $this->query));
+
+                    $organismIds = Organism::where(function ($query) {
+                        foreach ($this->organisms as $name) {
+                            $query->orWhereRaw('LOWER(name) = ?', [$name]);
+                        }
+                    })->pluck('id');
+
+                    $results = Molecule::whereHas('organisms', function ($query) use ($organismIds) {
+                        $query->whereIn('organism_id', $organismIds);
+                    })->orderBy('annotation_level', 'DESC')->paginate($this->size);
+
                 } else {
                     $results = Molecule::withAnyTags([$this->query], $this->tagType)->paginate($this->size);
                 }

diff --git a/public/img/coconut-og-image.png b/public/img/coconut-og-image.png
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -293,4 +293,12 @@
 .tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
+}
+
+.organism::first-letter {
+  text-transform: capitalize !important;
+}
+
+.organism {
+  font-style: italic;
 }
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -7,6 +7,19 @@
 
         <title>{{ config('app.name', 'Coconut') }}</title>
 
+        <!-- Meta Tags -->
+        <meta name="description" content="{{ $description ?? 'An aggregated dataset of elucidated and predicted natural products collected from open sources and a web interface to browse, search, and easily download NPs.' }}">
+        <meta name="keywords" content="{{ $keywords ?? 'natural products, COCONUT, open data, molecule database' }}">
+        <meta name="author" content="{{ $author ?? 'COCONUT Team' }}">
+        <meta property="og:title" content="{{ $ogTitle ?? 'COCONUT: Collection of Open Natural Products' }}">
+        <meta property="og:description" content="{{ $ogDescription ?? 'An aggregated dataset of elucidated and predicted natural products collected from open sources and a web interface to browse, search, and easily download NPs.' }}">
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="{{ $ogUrl ?? url()->current() }}">
+        <meta property="og:image" content="{{ $ogImage ?? asset('img/coconut-og-image.png') }}">
+        <meta property="og:image:width" content="1200">
+        <meta property="og:image:height" content="630">
+        <meta property="og:site_name" content="{{ $ogSiteName ?? config('app.name', 'Coconut') }}">
+
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

diff --git a/resources/views/livewire/molecule-details.blade.php b/resources/views/livewire/molecule-details.blade.php
@@ -91,8 +91,7 @@ class="mx-auto mt-8 grid max-w-3xl grid-cols-1 gap-6 sm:px-6 lg:max-w-7xl lg:gri
                                         @foreach ($molecule->organisms as $organism)
                                             @if ($organism != '')
                                                 <li class="inline">
-                                                    <a class="text-sm relative mr-2 inline-flex items-center rounded-md border border-gray-300 px-3 py-0.5"
-                                                        href="{{ urldecode($organism->iri) }}"
+                                                    <a href="/search?type=tags&q={{$organism->name}}&tagType=organisms" class="text-sm relative mr-2 inline-flex items-center rounded-md border border-gray-300 px-3 py-0.5"
                                                         target="_blank">
                                                         {{ $organism->name }} | {{ $organism->rank }}
                                                     </a>

diff --git a/resources/views/livewire/search.blade.php b/resources/views/livewire/search.blade.php
@@ -11,7 +11,14 @@
                     @endif
                 </div>
             @endif
-        @else
+        @elseif ($tagType == 'organisms')
+            <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+                <p class="mt-4 max-w-xl text-sm text-gray-700">#ORGANISMS</p>
+                @foreach ($organisms as $index => $organism)
+                    <span class="text-3xl font-bold text-gray-900"><span class="italic">{{ ucfirst($organism) }}</span></span>@if (!$loop->last), @endif
+                @endforeach
+            </div>
+        @else        
             <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
                 <h1 class="text-3xl font-bold tracking-tight text-gray-900">Browse compounds</h1>
                 <p class="mt-4 max-w-xl text-sm text-gray-700">Explore our database of natural products to uncover their unique properties. Search, filter, and discover the diverse realm of chemistry.