Skip to content

Commit

Permalink
fix(graph): add fuzzy search to ontology modal
Browse files Browse the repository at this point in the history
  • Loading branch information
Shoaibdev7 committed Dec 15, 2024
1 parent c83a8fe commit 8596096
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 20 deletions.
148 changes: 129 additions & 19 deletions src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,71 @@
import { useState } from 'react'
import styled from 'styled-components'
import { AutoComplete, TAutocompleteOption } from '~/components/common/AutoComplete'
import { Flex } from '~/components/common/Flex'
import ClearIcon from '~/components/Icons/ClearIcon'
import FamilyHistoryIcon from '~/components/Icons/FamilyHistoryIcon'
import SearchIcon from '~/components/Icons/SearchIcon'
import { Schema } from '~/network/fetchSourcesData'
import { colors } from '~/utils/colors'

interface HeaderProps {
onClose: () => void
activeTab: 'all' | 'parent'
setActiveTab: (tab: 'all' | 'parent') => void
onSchemaSelect: (schemaId: string) => void
schemas: Schema[]
}

interface TabProps {
active: boolean
}

export const Header = ({ onClose, activeTab, setActiveTab }: HeaderProps) => (
<HeaderWrapper>
<IconWrapper>
<FamilyHistoryIcon />
<Title>Blueprint</Title>
</IconWrapper>
<TabsWrapper>
<Tab active={activeTab === 'all'} onClick={() => setActiveTab('all')}>
Show All
</Tab>
<Tab active={activeTab === 'parent'} onClick={() => setActiveTab('parent')}>
Parent Only
</Tab>
</TabsWrapper>
<CloseButton onClick={onClose}>
<ClearIcon />
</CloseButton>
</HeaderWrapper>
)
export const Header = ({ onClose, activeTab, setActiveTab, onSchemaSelect, schemas }: HeaderProps) => {
const [searchTerm, setSearchTerm] = useState('')

const searchOptions = schemas
.filter((schema): schema is Schema & { ref_id: string } => schema.ref_id !== undefined && schema.type !== undefined)
.map((schema) => ({
label: schema.type,
value: schema.ref_id,
}))

return (
<HeaderWrapper>
<IconWrapper>
<FamilyHistoryIcon />
<Title>Blueprint</Title>
</IconWrapper>

<SearchSection>
<StyledAutoComplete
handleInputChange={(value) => setSearchTerm(value)}
onSelect={(option: TAutocompleteOption | null) => {
if (option?.value) {
onSchemaSelect(option.value)
}
}}
options={searchOptions}
placeholder="Search"
/>
<InputButton data-testid="search_action_icon">{searchTerm?.trim() ? null : <SearchIcon />}</InputButton>
</SearchSection>

<TabsWrapper>
<Tab active={activeTab === 'all'} onClick={() => setActiveTab('all')}>
Show All
</Tab>
<Tab active={activeTab === 'parent'} onClick={() => setActiveTab('parent')}>
Parent Only
</Tab>
</TabsWrapper>

<CloseButton onClick={onClose}>
<ClearIcon />
</CloseButton>
</HeaderWrapper>
)
}

const HeaderWrapper = styled(Flex)`
background-color: ${colors.BG1};
Expand All @@ -43,6 +76,7 @@ const HeaderWrapper = styled(Flex)`
justify-content: space-between;
padding: 17px;
border-bottom: 1px solid ${colors.black};
z-index: 2000;
`

const IconWrapper = styled.div`
Expand All @@ -66,6 +100,20 @@ const Title = styled.span`
font-size: 22px;
`

const InputButton = styled(Flex).attrs({
align: 'center',
justify: 'center',
p: 5,
})`
font-size: 32px;
color: ${colors.mainBottomIcons};
cursor: pointer;
transition-duration: 0.2s;
margin-left: -42px;
z-index: 2;
width: 30px;
`

const TabsWrapper = styled.div`
display: flex;
position: absolute;
Expand Down Expand Up @@ -106,3 +154,65 @@ const CloseButton = styled.div`
height: 32px;
}
`

const SearchSection = styled.div`
display: flex;
align-items: center;
width: 300px;
position: fixed;
transform: translateY(-6px);
margin-left: 11%;
&:has(.MuiTextField-root:focus-within) {
${InputButton} {
color: ${colors.primaryBlue};
}
}
`

const StyledAutoComplete = styled(AutoComplete)`
.MuiTextField-root {
pointer-events: auto;
height: 40px !important;
z-index: 2;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
width: 100%;
color: #fff;
box-shadow: none;
border: none;
border-radius: 200px !important;
background: ${colors.BG2};
.MuiInput-input.MuiInputBase-input {
padding: 1px 40px 1px 18px;
height: 40px !important;
-webkit-autofill,
-webkit-autocomplete,
-webkit-contacts-auto-fill,
-webkit-credentials-auto-fill {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
position: absolute !important;
right: 0 !important;
}
}
&:focus-within {
outline: 1px solid ${colors.primaryBlue};
}
&:hover {
background: ${colors.black};
}
input::placeholder {
color: ${colors.GRAY7};
}
.MuiAutocomplete-endAdornment {
display: none;
}
}
`
10 changes: 9 additions & 1 deletion src/components/ModalsContainer/BlueprintModal/Body/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,15 @@ export const Body = ({ Close }: BodyProps) => {
return (
<>
<Flex ml={-20} mr={-20} mt={-20}>
<Header activeTab={activeTab} onClose={Close} setActiveTab={setActiveTab} />
<Header
activeTab={activeTab}
onClose={Close}
onSchemaSelect={(schemaId) => {
setSelectedSchemaId(schemaId)
}}
schemas={schemas}
setActiveTab={setActiveTab}
/>
</Flex>
<Flex align="stretch" direction="row" grow={1}>
<Flex mb={-20} ml={-20}>
Expand Down

0 comments on commit 8596096

Please sign in to comment.