Skip to content

Commit

Permalink
fix: resolved structure editor overlap, other minor updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@CS76
CS76 committed Aug 9, 2024
1 parent 96a7552 commit ba43250
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 95 deletions.
15 changes: 5 additions & 10 deletions app/Livewire/Search.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,23 +65,18 @@ public function placeholder()
HTML;
}

protected $listeners = ['updateSmiles' => 'setSmiles'];

public function setSmiles($smiles, $searchType)
{
$this->query = $smiles;
$this->type = $searchType;
$this->page = null;
$this->tagType = null;
}

public function updatedQuery()
{
$this->page = 1;
$this->type = null;
$this->tagType = null;
}

public function search(SearchMolecule $search)
{
$this->render($search);
}

public function render(SearchMolecule $search)
{
try {
Expand Down
2 changes: 2 additions & 0 deletions app/Livewire/StructureEditor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ class StructureEditor extends Component

public $smiles;

public $type = 'substructure';

public function mount($smiles)
{
$this->smiles = $smiles;
Expand Down
7 changes: 0 additions & 7 deletions app/Livewire/Welcome.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,6 @@ class Welcome extends Component

public $citationsMapped;

protected $listeners = ['updateSmiles' => 'setSmiles'];

public function setSmiles($smiles, $searchType)
{
return redirect()->to('/search?q='.urlencode($smiles).'&type='.urlencode($searchType));
}

public function placeholder()
{
return <<<'HTML'
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/header.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<header class="absolute inset-x-0 top-0 z-50" x-data="{ open: false }">
<header class="absolute inset-x-0 top-0" x-data="{ open: false }">
<nav class="flex items-center justify-between p-6 lg:px-8 max-w-4xl lg:max-w-7xl mx-auto" aria-label="Global">
<div class="flex lg:flex-1">
<a href="/" class="-m-1.5 p-1.5">
Expand Down
84 changes: 35 additions & 49 deletions resources/views/livewire/search.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<div>
<div class="mt-24">

@if ($tagType == 'dataSource' && $collection)
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
<p class="mt-4 max-w-7xl text-sm text-gray-700">#COLLECTION</p>
Expand Down Expand Up @@ -31,62 +30,51 @@ class="italic">{{ ucfirst($organism) }}</span></span>
@endif
</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>
<form wire:submit="search">
<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="q" id="q"
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="query"
placeholder="Search compound name, SMILES, InChI, InChI Key" type="search"
autofocus="">
</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.blur="query"
placeholder="Search compound name, SMILES, InChI, InChI Key" type="search"
autofocus="">
</div>
</div>
</div>
<div class="flex items-center md:ml-6">
<div>
<div class="flex items-center md:ml-6">
<livewire:structure-editor :mode="'inline'" :smiles="$query" lazy="on-load" />
</div>
{{-- <div><button type="button"
class="rounded-md bg-white text-gray-900 mr-3 py-3 px-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-secondary-dark focus:ring-offset-2"><svg
<button
type="submit"
class="rounded-md bg-secondary-dark px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-secondary-light focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mr-3"><svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" aria-hidden="true"
class="mr-3 ml-2 h-6 w-6">
stroke-width="1.5" stroke="currentColor" class="size-4 inline">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5">
</path>
</svg></button></div> --}}
<div>
{{-- <div><button id="headlessui-menu-button-2" type="button" aria-haspopup="menu"
aria-expanded="false"
class="rounded-md bg-white text-gray-900 mr-3 py-3 px-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-secondary-dark focus:ring-offset-2"><svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="mr-3 ml-2 h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3">
</path>
</svg></button></div> --}}
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
&nbsp;Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
@if ($molecules && count($molecules) > 0)
<div class="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-8 lg:max-w-7xl lg:px-8">
Expand Down Expand Up @@ -182,6 +170,4 @@ class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-
</div>
</div>
@endif

{{--
</div> --}}
</div>
32 changes: 20 additions & 12 deletions resources/views/livewire/structure-editor.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
<div x-data="{ isOpen: false, searchType: 'exact', smiles: @entangle('smiles'), fetchClipboardText() {
<div x-data="{
isOpen: false,
mode: @entangle('mode'),
searchType: 'exact',
smiles: @entangle('smiles'),
type: @entangle('type'),
fetchClipboardText() {
navigator.clipboard.readText().then(text => {
window.editor.setSmiles(text);
}).catch(err => {
console.error('Failed to read clipboard contents: ', err);
});
}
}
}">
<div x-init="$watch('isOpen', value => {
if (value) {
Expand All @@ -17,23 +23,25 @@
}, 100);
}
});">
<div x-show="isOpen" x-cloak class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
<div x-show="isOpen" x-cloak class="fixed z-20 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div
class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
class="z-20 inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Structure Editor
</h3>
<div class="py-3">
<div id="structureSearchEditor" class="border mb-3" style="height: 400px; width: 100%"></div>
<button @click="fetchClipboardText" class="mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-white-600 text-base font-medium hover:bg-white-700 focus:outline-none sm:w-auto sm:text-sm border">
<div id="structureSearchEditor" class="border mb-3" style="height: 400px; width: 100%">
</div>
<button @click="fetchClipboardText"
class="mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-white-600 text-base font-medium hover:bg-white-700 focus:outline-none sm:w-auto sm:text-sm border">
Paste from Clipboard
</button>
</div>
Expand All @@ -45,7 +53,7 @@ class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left ov
<div class="flex items-center">
<label for="search-type-exact"
class="block cursor-pointer text-sm font-medium text-gray-700">
<input id="search-type-exact" name="search-type" x-model="searchType"
<input id="search-type-exact" name="search-type" x-model="type"
value="exact" type="radio"
class="mr-3 h-4 w-4 border-gray-300 text-secondary-dark focus:ring-secondary-dark" />
Exact match
Expand All @@ -54,7 +62,7 @@ class="mr-3 h-4 w-4 border-gray-300 text-secondary-dark focus:ring-secondary-dar
<div class="flex items-center">
<label for="search-type-sub"
class="block cursor-pointer text-sm font-medium text-gray-700">
<input id="search-type-sub" name="search-type" x-model="searchType"
<input id="search-type-sub" name="search-type" x-model="type"
value="substructure" type="radio"
class="mr-3 h-4 w-4 border-gray-300 text-secondary-dark focus:ring-secondary-dark" />
Substructure Search
Expand All @@ -63,7 +71,7 @@ class="mr-3 h-4 w-4 border-gray-300 text-secondary-dark focus:ring-secondary-dar
<div class="flex items-center">
<label for="search-type-similar"
class="block cursor-pointer text-sm font-medium text-gray-700">
<input id="search-type-similar" name="search-type" x-model="searchType"
<input id="search-type-similar" name="search-type" x-model="type"
value="similarity" type="radio"
class="mr-3 h-4 w-4 border-gray-300 text-secondary-dark focus:ring-secondary-dark" />
Similarity Search (tanimoto_threshold=0.5)
Expand All @@ -79,7 +87,7 @@ class="mt-3 w-full inline-flex justify-center rounded-md border border-transpare
Close
</button>
<button
@click="const smiles = window.getEditorSmiles(); window.location.href = `/search?type=${searchType}&q=${encodeURIComponent(smiles)}`"
@click="const smiles = window.getEditorSmiles(); window.location.href = `/search?type=${type}&q=${encodeURIComponent(smiles)}`"
type="button"
class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Search
Expand All @@ -90,7 +98,7 @@ class="mt-3 w-full inline-flex justify-center rounded-md border border-transpare
</div>
</div>
@if ($mode && $mode == 'inline')
<button x-if="$mode != 'inline'" type="button" @click="isOpen = true"
<button type="button" @click="isOpen = true"
class="rounded-md text-gray-900 bg-white mr-3 py-3 px-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-secondary-dark focus:ring-offset-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="mr-3 ml-2 h-6 w-6">
Expand All @@ -99,7 +107,7 @@ class="rounded-md text-gray-900 bg-white mr-3 py-3 px-2 text-gray-400 hover:bg-g
</svg>
</button>
@else
<button x-if="$mode && $mode == 'inline'" type="button" @click="isOpen = true"
<button type="button" @click="isOpen = true"
class="border bg-gray-50 justify-center items-center text-center rounded-md text-gray-900 mr-1 py-3 px-4 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-secondary-dark focus:ring-offset-2">
<svg class="w-12 h-12 mx-auto" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_2)">
Expand Down
16 changes: 0 additions & 16 deletions resources/views/livewire/welcome.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,4 @@
<div x-data="{ query: '' }">
<div class="relative isolate -z-10">
<svg class="absolute inset-x-0 -top-52 -z-10 h-[64rem] w-full stroke-gray-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)]"
aria-hidden="true">
<defs>
<pattern id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84" width="200" height="200" x="50%" y="-1"
patternUnits="userSpaceOnUse">
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<svg x="50%" y="-1" class="overflow-visible fill-gray-50">
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0" />
</svg>
<rect width="100%" height="100%" stroke-width="0" fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)" />
</svg>
</div>
<div class="relative mx-auto mt-32 grid w-full max-w-4xl lg:max-w-7xl grid-cols-1 px-4 sm:px-6 lg:px-8">
<div class="mx-auto w-full py-1 px-4 sm:px-6 sm:py-20 lg:px-8 mb-12">
<div class="text-center max-w-4xl mx-auto">
Expand Down

0 comments on commit ba43250

Please sign in to comment.