Skip to content

Commit

Permalink
Enhance testing view http://igib.example.com/controlpanel/test-search…
Browse files Browse the repository at this point in the history 
…kit-querystrings
  • Loading branch information
@ksuess
ksuess committed Jul 17, 2022
1 parent a497155 commit e19685a
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 70 deletions.
73 changes: 45 additions & 28 deletions src/components/Views/ElasticSearchHighlights.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/**
* Show matches per document
* fragment_size is set in CustomESRequestSerializer
*/
import React from 'react';

export const ElasticSearchHighlights = ({ highlight, indexResult }) => {
Expand All @@ -17,15 +21,7 @@ export const ElasticSearchHighlights = ({ highlight, indexResult }) => {
setToggleDetails(!toggleDetails);
};

let hlts = [];
highlight &&
Object.keys(highlight)
.reverse()
.forEach((fld) => {
highlight[fld].forEach((mtch) => {
hlts.push(mtch);
});
});
const fragments = getFragments(highlight);
if (highlight) {
return !toggleDetails ? (
<div
Expand All @@ -35,7 +31,7 @@ export const ElasticSearchHighlights = ({ highlight, indexResult }) => {
onKeyPress={showDetails}
tabIndex={indexResult}
>
{hlts.slice(0, 3).map((el, index) => {
{fragments.slice(0, 3).map((el, index) => {
return <div dangerouslySetInnerHTML={{ __html: el }} key={index} />;
})}
</div>
Expand Down Expand Up @@ -75,29 +71,50 @@ export const ElasticSearchHighlights = ({ highlight, indexResult }) => {
}
};

export const ElasticSearchMatches = ({ highlight, indexResult }) => {
const regex = /<em>(.*?)<\/em>/gm;
let hlts = [];
/**
* Get fragments of matches in a document
* @param {Object} highlight. part of response of Elasticsearch query
* @returns {Array} Array of strings
*/
export const getFragments = (highlight) => {
let fragments = [];
highlight &&
Object.keys(highlight)
.reverse()
.forEach((fld) => {
highlight[fld].forEach((mtch) => {
hlts.push(mtch);
fragments.push(mtch);
});
});
if (highlight) {
return (
<div className="highlight metadata" role="button" tabIndex={indexResult}>
{hlts.map((txt) => {
let result = [...txt.matchAll(regex)];
console.debug('result', result);
return result.map((el) => el[1]).join('|') + '|';
})}
<hr />
</div>
);
} else {
return null;
}
return fragments;
};

/**
* Get matches in a document
* @param {Object} highlight. part of response of Elasticsearch query
* @returns {Array} Array of strings
*/
export const getMatches = (highlight) => {
console.debug('highlight', highlight);
const regex = /<em>(.*?)<\/em>/gm;
let fragments = getFragments(highlight);
console.debug('fragments', fragments);
let matches = [];
fragments.forEach((fragment) => {
const fragmentmatches = [...fragment.matchAll(regex)];
matches = matches.concat(fragmentmatches.map((match) => match[1]));
});
matches = [...new Set(matches)];
console.debug('getMatches', matches);
return matches;
};

export const ElasticSearchMatches = ({ highlight, indexResult }) => {
const matches = getMatches(highlight);
return (
<div className="highlight metadata" role="button" tabIndex={indexResult}>
{matches.join(' | ')}
<hr />
</div>
);
};
91 changes: 49 additions & 42 deletions src/components/Views/TestSearchkitQuerystrings.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Container, Segment } from 'semantic-ui-react';
import { Container, Header, Segment } from 'semantic-ui-react';
import { Link, useLocation } from 'react-router-dom';
import { OverridableContext } from 'react-overridable';

Expand All @@ -19,8 +19,9 @@ import {
ResultsMultiLayout,
Count,
} from 'react-searchkit';
import { flattenESUrlToPath } from '../helpers';
import { ploneSearchApi } from './FacetedSearch';
import { ElasticSearchMatches } from './ElasticSearchHighlights';
import { ElasticSearchMatches, getMatches } from './ElasticSearchHighlights';

const sort_caseinsensitive = (a, b) => {
var nameA = a.toUpperCase(); // Groß-/Kleinschreibung ignorieren
Expand All @@ -35,7 +36,6 @@ const sort_caseinsensitive = (a, b) => {
};

const _OnHighlights = (props) => {
console.debug('_OnHighlights props', props);
let location = useLocation();
let highlights = props.currentResultsState;
let hits = highlights.data.hits;
Expand All @@ -46,7 +46,6 @@ const _OnHighlights = (props) => {
hit.highlight = hit.highlight || [];
Object.keys(hit.highlight).forEach((fld) => {
hit.highlight[fld].forEach((highlightfragment) => {
// console.debug('highlightfragment', highlightfragment);
fragments.push(highlightfragment);
});
});
Expand All @@ -57,14 +56,13 @@ const _OnHighlights = (props) => {
let result = [...txt.matchAll(regex)];
result.map((match) => {
matches.add(match[1]);
console.debug('match[1]', match[1], txt);
});
});
let matches_sorted = Array.from(matches);
matches_sorted.sort(sort_caseinsensitive);
return (
<div>
<h3>Found {matches_sorted.length} matches.</h3>
<Header as="h2">Found {matches_sorted.length} matches.</Header>
{matches_sorted.map((match) => (
<div key={match}>
<a
Expand All @@ -84,18 +82,21 @@ const OnHighlights = withState(_OnHighlights);
const OnResults = withState(ResultsMultiLayout);

const CustomResultsListItem = ({ result, index }) => {
console.debug('** result.title', result.title);
return (
<div>
<h2>
<a href={result['@id']}>{result.title}</a>
</h2>
<Header as="h3">
<Link to={flattenESUrlToPath(result['@id'])} target="_blank">
{result.title}
</Link>
</Header>
<ElasticSearchMatches highlight={result.highlight} indexResult={index} />
</div>
);
};

const DocumentsCount = ({ totalResults }) => {
return <h3>Found {totalResults} manuals.</h3>;
return <Header as="h2">Found {totalResults} documents.</Header>;
};

const overriddenComponents = {
Expand All @@ -104,9 +105,6 @@ const overriddenComponents = {
};

const TestSearchkitQuerystrings = (props) => {
// console.debug('TestSearchkitQuerystrings. props', props);

const [matchhighlights, setMatchhighlights] = React.useState([]);
const searchconfig = {
elastic_search_api_url: 'http://localhost:9200',
elastic_search_api_index: 'plone2020',
Expand All @@ -126,10 +124,10 @@ const TestSearchkitQuerystrings = (props) => {
};

const initialState = {
// sortBy: 'bestmatch',
// sortOrder: 'asc',
sortBy: 'modified',
sortOrder: 'desc',
sortBy: 'bestmatch',
sortOrder: 'asc',
// sortBy: 'modified',
// sortOrder: 'desc',
queryString: '',
layout: 'list',
page: 1,
Expand All @@ -150,7 +148,11 @@ const TestSearchkitQuerystrings = (props) => {

return (
<Container>
<h1>Matches</h1>
<Segment>
<Header as="h1" className="documentFirstHeading">
Matches
</Header>
</Segment>
{isClient && (
<OverridableContext.Provider value={overriddenComponents}>
<ReactSearchKit
Expand All @@ -159,30 +161,35 @@ const TestSearchkitQuerystrings = (props) => {
initialQueryState={initialState}
searchOnInit={true}
>
<Segment>
{/* <Input
id="my-field"
title="some strings to search for"
onChange={(event, data) => {
onchangehandler(event, data);
}}
/> */}
<SearchBar
placeholder="Suche"
autofocus="false"
uiProps={{
icon: 'search',
iconPosition: 'left',
className: 'searchbarinput',
}}
onChange={(event, data) => {
onchangehandler(event, data);
}}
/>
<Count />
<OnHighlights />
{/* <OnResults /> */}
</Segment>
<>
<Segment>
{/* <Input
id="my-field"
title="some strings to search for"
onChange={(event, data) => {
onchangehandler(event, data);
}}
/> */}
<SearchBar
placeholder="Suche"
autofocus="false"
uiProps={{
icon: 'search',
iconPosition: 'left',
className: 'searchbarinput',
}}
onChange={(event, data) => {
onchangehandler(event, data);
}}
/>
</Segment>
<Segment>
<Count />
<OnHighlights />
<Header as="h2">Documents with title and matches</Header>
<OnResults />
</Segment>
</>
</ReactSearchKit>
</OverridableContext.Provider>
)}
Expand Down

0 comments on commit e19685a

Please sign in to comment.