feat: added structure editor

Steinbeck-Lab · Jun 2, 2024 · ca53f30 · ca53f30
1 parent caf2acb
commit ca53f30
Show file tree

Hide file tree

Showing 16 changed files with 345 additions and 97 deletions.
diff --git a/app/Livewire/CollectionList.php b/app/Livewire/CollectionList.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Collection;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Url;
+use Livewire\Component;
+use Livewire\WithPagination;
+
+#[Layout('layouts.guest')]
+class CollectionList extends Component
+{
+    use WithPagination;
+
+    #[Url(except: '', keep: true, history: true, as: 'q')]
+    public $query = '';
+
+    #[Url(as: 'limit')]
+    public $size = 20;
+
+    #[Url()]
+    public $sort = null;
+
+    #[Url()]
+    public $page = null;
+
+    public function updatingQuery()
+    {
+        $this->resetPage();
+    }
+
+    public function render()
+    {
+        $search = $this->query;
+        $collections = Collection::query()
+            ->where(function ($query) use ($search) {
+                $query->whereRaw('LOWER(title) LIKE ?', ['%'.strtolower($search).'%'])
+                    ->orWhereRaw('LOWER(description) LIKE ?', ['%'.strtolower($search).'%']);
+            })
+            ->orderByRaw('title LIKE ? DESC', [$search.'%'])
+            ->orderByRaw('description LIKE ? DESC', [$search.'%'])
+            ->paginate($this->size);
+
+        return view('livewire.collection-list', ['collections' => $collections]);
+    }
+}
diff --git a/app/Livewire/CompoundClasses.php b/app/Livewire/CompoundClasses.php
@@ -6,6 +6,32 @@
 
 class CompoundClasses extends Component
 {
+    public $superClasses = [
+        'Acetylides',
+        'Alkaloids and derivatives',
+        'Allenes',
+        'Benzenoids',
+        'Hydrocarbon derivatives',
+        'Hydrocarbons',
+        'Lignans, neolignans and related compounds',
+        'Lipids and lipid-like molecules',
+        'Nucleosides, nucleotides, and analogues',
+        'Organoheterocyclic compounds',
+        'Organohalogen compounds',
+        'Organometallic compounds',
+        'Organophosphorus compounds',
+        'Organosulfur compounds',
+        'Organic 1,3-dipolar compounds',
+        'Organic Polymers',
+        'Organic acids and derivatives',
+        'Organic anions',
+        'Organic cations',
+        'Organic nitrogen compounds',
+        'Organic oxygen compounds',
+        'Organic salts',
+        'Phenylpropanoids and polyketides',
+    ];
+
     public $parentClasses = [
         'Acenaphthylenes',
         'Acetals',
@@ -985,7 +1011,8 @@ class CompoundClasses extends Component
 
     public function mount()
     {
-        $this->parentClasses = array_slice($this->parentClasses, 0, 50);
+        // $this->parentClasses = array_slice($this->parentClasses, 0, 50);
+        $this->superClasses = $this->superClasses;
     }
 
     public function render()

diff --git a/app/Livewire/MoleculeEditor.php b/app/Livewire/MoleculeEditor.php
diff --git a/app/Livewire/Search.php b/app/Livewire/Search.php
@@ -2,7 +2,6 @@
 
 namespace App\Livewire;
 
-use App\Http\Resources\MoleculeResource;
 use App\Models\Collection;
 use App\Models\Molecule;
 use App\Models\Organism;
@@ -13,6 +12,7 @@
 use Livewire\Component;
 use Livewire\WithPagination;
 
+#[Layout('layouts.guest')]
 class Search extends Component
 {
     use WithPagination;
@@ -44,7 +44,14 @@ public function gotoPage($page)
         $this->page = $page;
     }
 
-    #[Layout('layouts.guest')]
+    protected $listeners = ['updateSmiles' => 'setSmiles'];
+
+    public function setSmiles($smiles, $searchType)
+    {
+        $this->query = $smiles;
+        $this->type = $searchType;
+    }
+
     public function render()
     {
 
@@ -262,11 +269,12 @@ public function render()
                             }
                             $statement =
                                 $statement.
-                                '('.$filterMap[$_filter[0]].'::TEXT ILIKE \'%'.$_filter[1].'%\')';
+                                '(LOWER(REGEXP_REPLACE('.$filterMap[$_filter[0]].' , \'\s+\', \'-\', \'g\'))::TEXT ILIKE \'%'.$_filter[1].'%\')';
                         }
                     }
                     $statement = $statement.')';
                 }
+                // dd($statement);
                 $statement = $statement.' LIMIT '.$this->size;
             } else {
                 if ($this->query) {
@@ -362,10 +370,5 @@ public function render()
                 500
             );
         }
-        // return view('livewire.search', [
-        //     'molecules' => MoleculeResource::collection(
-        //         Molecule::where('active', true)->orderByDesc('updated_at')->paginate($this->size)
-        //     ),
-        // ]);
     }
 }
diff --git a/app/Livewire/StructureEditor.php b/app/Livewire/StructureEditor.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class StructureEditor extends Component
+{
+    public $isOpen = false;
+
+    public $smiles = '';
+
+    protected $listeners = ['openModal'];
+
+    public function openModal($smiles = '')
+    {
+        $this->smiles = $smiles;
+        $this->isOpen = true;
+    }
+
+    public function closeModal()
+    {
+        $this->isOpen = false;
+    }
+
+    public function render()
+    {
+        return view('livewire.structure-editor');
+    }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,6 @@
         "vitepress": "^1.2.2"
     },
     "dependencies": {
-        "openchemlib": "^8.9.0"
+        "openchemlib": "^8.13.0"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,4 +1 @@
-import "./bootstrap";
-
-import OCL from "openchemlib/full";
-window.OCL = OCL;
+import "./bootstrap";
diff --git a/resources/views/livewire/collection-list.blade.php b/resources/views/livewire/collection-list.blade.php
@@ -0,0 +1,64 @@
+<div>
+    <div class="mt-24">
+        <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+            <h1 class="text-3xl font-bold tracking-tight text-gray-900">Browse collections</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.
+            </p>
+        </div>
+    </div>
+    <div class="mx-auto max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+        <div class="bg-white">
+            <div class="px-4 mx-auto max-w-7xl">
+                <div class="flex h-16 flex-shrink-0 rounded-md border border-zinc-900/5 border-b-4">
+                    <div class="flex flex-1 justify-between px-4 md:px-0">
+                        <div class="flex flex-1">
+                            <div class="flex w-full md:ml-0"><label for="search-field" class="sr-only">Search</label>
+                                <div class="relative w-full text-gray-400 focus-within:text-gray-600">
+                                    <div class="px-2 pointer-events-none absolute inset-y-0 left-0 flex items-center">
+                                        <svg class="h-5 w-5 flex-shrink-0"
+                                            x-description="Heroicon name: mini/magnifying-glass"
+                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                                            aria-hidden="true">
+                                            <path fill-rule="evenodd"
+                                                d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+                                                clip-rule="evenodd"></path>
+                                        </svg>
+                                    </div>
+
+                                    <input name="query" id="query"
+                                        class="h-full w-full border-transparent py-2 pl-8 pr-3 text-sm text-gray-900 placeholder-gray-500 focus:border-transparent focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:block"
+                                        wire:model.live="query"
+                                        placeholder="Search collections" type="search"
+                                        autofocus="">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-8 lg:max-w-7xl lg:px-8">
+        <div class="p-4 w-full">
+            {{ $collections->links() }}
+        </div>
+        <div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:grid-cols-4 lg:gap-x-8">
+            @foreach ($collections as $collection)
+                <a href="search?type=tags&amp;q={{ $collection->title }}&amp;tagType=dataSource"
+                    class="relative border mb-5 flex h-80 w-56 flex-col overflow-hidden rounded-lg p-6 hover:opacity-75 xl:w-auto">
+                    <span aria-hidden="true" class="absolute inset-0">
+                    </span>
+                    <span aria-hidden="true"
+                        class="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-gray-800 opacity-50"></span>
+                    <span class="relative mt-auto text-left text-xl font-bold text-dark">{{ $collection->title }}</span>
+                    <span
+                        class="relative mt-1 text-left text-sm text-dark">{{ Str::limit($collection->description, 80, '...') }}</span>
+                </a>
+            @endforeach
+        </div>
+        <div class="p-4">
+            {{ $collections->links() }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/compound-classes.blade.php b/resources/views/livewire/compound-classes.blade.php
@@ -4,10 +4,10 @@
             <h2 class="text-2xl pb-0 font-bold tracking-tight text-white sm:text-2xl"><span
                     class="-mb-1 block text-primary-dark bg-clip-text">Compound Classes</span></h2>
         </div>
-        @foreach ($parentClasses as $class)
+        @foreach ($superClasses as $class)
             <span>
-                <a target="_blank" href="search?q=parent%3A{{ $class }}&amp;page=1&amp;type=filters"><span
-                        class="mr-1 mb-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{ $class }}</span>
+                <a target="_blank" href="search?q=superclass%3A{{ Str::slug($class) }}&amp;page=1&amp;type=filters"><span
+                    class="mr-1 mb-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{ $class }}</span>
                 </a>
             </span>
         @endforeach

diff --git a/resources/views/livewire/data-sources.blade.php b/resources/views/livewire/data-sources.blade.php
@@ -13,12 +13,10 @@ class="-mb-1 block text-primary-dark bg-clip-text">Data Sources</span></h2>
             <div class="py-16 sm:py-24 xl:mx-auto xl:max-w-7xl">
                 <div class="px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 xl:px-0">
                     <h2 class="text-2xl font-bold tracking-tight text-gray-900">Collections</h2>
-                    {{-- 
-                    <a href="#" class="hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block">
+                    <a href="/collections" class="hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block">
                         Browse all collections
                         <span aria-hidden="true"> &rarr;</span>
                     </a>
-                    --}}
                 </div>
                 <div class="mt-4 flow-root">
                     <div class="-my-2">

diff --git a/resources/views/livewire/molecule-details.blade.php b/resources/views/livewire/molecule-details.blade.php
@@ -91,10 +91,15 @@ 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 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>
+                                                <span class="isolate inline-flex rounded-md shadow-sm mb-2">
+  <a href="/search?type=tags&amp;q=Citrullus lanatus&amp;tagType=organisms" target="_blank" class="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 organism">{{ $organism->name }}&nbsp;<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m9 9 6-6m0 0 6 6m-6-6v12a6 6 0 0 1-12 0v-3" />
+</svg></a>
+  <a href="{{ $organism->iri }}" target="_blank" class="relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 capitalize">
+{{ $organism->rank }}&nbsp;<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+</svg></a>
+</span>
                                                 </li>
                                             @endif
                                         @endforeach

diff --git a/resources/views/livewire/molecule-editor.blade.php b/resources/views/livewire/molecule-editor.blade.php