inex
/
index.community
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

filter by instance type

This commit is contained in:
Tao Bojlén 2019-08-04 11:39:29 +00:00
parent 3a50e5cb4d
commit 5a10c6c9e3
14 changed files with 314 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- You can now click a button in the search bar to search (you can also still just prss enter, of course).
- You can now filter searches by instance type.
### Changed
### Deprecated

96
backend/lib/backend/api.ex
View File

@ -107,52 +107,15 @@ defmodule Backend.Api do
end
end
def search_instances(query, from \\ 0) do
def search_instances(query, filters, from \\ 0) do
page_size = 50
search_response =
Elasticsearch.post(Backend.Elasticsearch.Cluster, "/instances/_search", %{
"sort" => "_score",
"from" => from,
"size" => page_size,
"min_score" => 1,
"query" => %{
"bool" => %{
"filter" => %{
"term" => %{
"opt_out" => "false"
}
},
"should" => [
%{
"multi_match" => %{
"query" => query,
"fields" => [
"description.english",
"domain.english"
]
}
},
%{
"wildcard" => %{
"domain.keyword" => %{
"value" => query,
"boost" => 100
}
}
},
%{
"wildcard" => %{
"domain.keyword" => %{
"value" => "*#{query}*",
"boost" => 50
}
}
}
]
}
}
})
Elasticsearch.post(
Backend.Elasticsearch.Cluster,
"/instances/_search",
build_es_query(query, filters, page_size, from)
)
with {:ok, result} <- search_response do
hits =
@ -172,4 +135,51 @@ defmodule Backend.Api do
}
end
end
defp build_es_query(query, filters, page_size, from) do
opt_out_filter = %{"term" => %{"opt_out" => "false"}}
filters = [opt_out_filter | filters]
%{
"sort" => "_score",
"from" => from,
"size" => page_size,
# This must be >0, otherwise all documents will be returned
"min_score" => 1,
"query" => %{
"bool" => %{
"filter" => filters,
"should" => [
%{
"multi_match" => %{
"query" => query,
"fields" => [
"description.english",
"domain.english"
]
}
},
%{
# If the query exactly matches a domain, that instance should always be the first result.
"wildcard" => %{
"domain.keyword" => %{
"value" => query,
"boost" => 100
}
}
},
%{
# Give substring matches in domains a large boost, too.
"wildcard" => %{
"domain.keyword" => %{
"value" => "*#{query}*",
"boost" => 10
}
}
}
]
}
}
}
end
end

41
backend/lib/backend_web/controllers/search_controller.ex
View File

@ -7,7 +7,46 @@ defmodule BackendWeb.SearchController do
def index(conn, params) do
query = Map.get(params, "query")
from = Map.get(params, "after", "0") |> String.to_integer()
%{hits: hits, next: next} = Api.search_instances(query, from)
# Filters
filter_keys =
params
|> Map.keys()
|> Enum.filter(fn key -> key !== "query" and key !== "after" end)
filters =
params
|> Map.take(filter_keys)
|> Map.to_list()
|> Enum.map(&convert_to_es_filter(&1))
%{hits: hits, next: next} = Api.search_instances(query, filters, from)
render(conn, "index.json", hits: hits, next: next)
end
defp convert_to_es_filter(url_param) do
{key, value} = url_param
# Key has the form e.g. "type_eq" or "user_count_gte"
key_components = String.split(key, "_")
# The field to filter on
field = Enum.take(key_components, length(key_components) - 1) |> Enum.join("_")
# The filter relation -- one of eq, gt, gte, lt, lte
relation = Enum.take(key_components, -1)
case field do
"type" ->
%{
"term" => %{"type" => value}
}
"user_count" ->
%{
"range" => %{
"user_count" => %{
relation => value
}
}
}
end
end
end

2
frontend/src/components/molecules/SearchResult.tsx
View File

@ -9,7 +9,7 @@ import { InstanceType } from "../atoms";
const StyledCard = styled(Card)`
width: 80%;
margin: 1em auto;
margin: 0.5em auto;
background-color: #394b59 !important;
text-align: left;
`;

68
frontend/src/components/organisms/SearchFilters.tsx Normal file
View File

@ -0,0 +1,68 @@
import { Button, ITagProps, Menu, MenuItem, Popover, Position, Tag } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import React, { MouseEvent } from "react";
import styled from "styled-components";
import { INSTANCE_TYPES } from "../../constants";
import { getSearchFilterDisplayValue, ISearchFilter } from "../../searchFilters";
import { capitalize } from "../../util";
const SearchFilterContainer = styled.div`
margin: 10px 0 0 0;
`;
const TagContainer = styled.div`
display: flex;
flex-direction: row;
justify-items: flex-start;
margin-bottom: 5px;
`;
const StyledTag = styled(Tag)`
margin-left: 5px;
`;
interface ISearchFiltersProps {
selectedFilters: ISearchFilter[];
selectFilter: (filter: ISearchFilter) => void;
deselectFilter: (e: MouseEvent<HTMLButtonElement>, props: ITagProps) => void;
}
const SearchFilters: React.FC<ISearchFiltersProps> = ({ selectedFilters, selectFilter, deselectFilter }) => {
const hasInstanceTypeFilter = selectedFilters.some(sf => sf.field === "type");
const handleSelectInstanceType = (e: MouseEvent<HTMLElement>) => {
const field = "type";
const relation = "eq";
const value = e.currentTarget.innerText.toLowerCase();
const filter: ISearchFilter = {
displayValue: getSearchFilterDisplayValue(field, relation, value),
field,
relation,
value
};
selectFilter(filter);
};
const renderMenu = () => (
<Menu>
<MenuItem icon={IconNames.SYMBOL_CIRCLE} text="Instance type" disabled={hasInstanceTypeFilter}>
{INSTANCE_TYPES.map(t => (
<MenuItem key={t} text={capitalize(t)} onClick={handleSelectInstanceType} />
))}
</MenuItem>
</Menu>
);
return (
<SearchFilterContainer>
<TagContainer>
{selectedFilters.map(filter => (
<StyledTag key={filter.displayValue} minimal={true} onRemove={deselectFilter}>
{filter.displayValue}
</StyledTag>
))}
</TagContainer>
<Popover autoFocus={false} content={renderMenu()} position={Position.BOTTOM}>
<Button minimal={true} icon={IconNames.FILTER}>
{"Add filter"}
</Button>
</Popover>
</SearchFilterContainer>
);
};
export default SearchFilters;

2
frontend/src/components/organisms/SidebarContainer.tsx
View File

@ -16,8 +16,6 @@ const StyledCard = styled(Card)`
padding: 20px 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
`;
const SidebarContainer: React.FC = ({ children }) => {
return (

1
frontend/src/components/organisms/index.ts
View File

@ -1,3 +1,4 @@
export { default as Graph } from "./Graph";
export { default as Nav } from "./Nav";
export { default as SidebarContainer } from "./SidebarContainer";
export { default as SearchFilters } from "./SearchFilters";

131
frontend/src/components/screens/SearchScreen.tsx
View File

@ -1,27 +1,33 @@
import { Button, Callout, Classes, H2, Intent, NonIdealState, Spinner } from "@blueprintjs/core";
import { Button, Callout, H2, InputGroup, Intent, NonIdealState, Spinner } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { push } from "connected-react-router";
import React from "react";
import { get, isEqual } from "lodash";
import React, { MouseEvent } from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import styled from "styled-components";
import { setResultHover, updateSearch } from "../../redux/actions";
import { IAppState, ISearchResultInstance } from "../../redux/types";
import { ISearchFilter } from "../../searchFilters";
import { isSmallScreen } from "../../util";
import { SearchResult } from "../molecules";
import { SearchFilters } from "../organisms";
const SearchContainer = styled.div`
align-self: center;
text-align: center;
width: 100%;
`;
const SearchBarContainer = styled.div`
interface ISearchBarContainerProps {
hasSearchResults: boolean;
hasError: boolean;
}
const SearchBarContainer = styled.div<ISearchBarContainerProps>`
width: 80%;
margin: 0 auto;
text-align: center;
margin: ${props => (props.hasSearchResults || props.hasError ? "0 auto" : "auto")};
align-self: center;
`;
const SearchResults = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
`;
const StyledSpinner = styled(Spinner)`
margin-top: 10px;
@ -38,17 +44,18 @@ interface ISearchScreenProps {
query: string;
hasMoreResults: boolean;
results: ISearchResultInstance[];
handleSearch: (query: string) => void;
handleSearch: (query: string, filters: ISearchFilter[]) => void;
navigateToInstance: (domain: string) => void;
setIsHoveringOver: (domain?: string) => void;
}
interface ISearchScreenState {
currentQuery: string;
searchFilters: ISearchFilter[];
}
class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreenState> {
public constructor(props: ISearchScreenProps) {
super(props);
this.state = { currentQuery: "" };
this.state = { currentQuery: "", searchFilters: [] };
}
public componentDidMount() {
@ -60,24 +67,19 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
public render() {
const { error, hasMoreResults, results, isLoadingResults, query } = this.props;
let content;
if (error) {
return <NonIdealState icon={IconNames.ERROR} title="Something went wrong." action={this.renderSearchBar()} />;
content = <NonIdealState icon={IconNames.ERROR} title="Something went wrong." />;
} else if (!isLoadingResults && query && results.length === 0) {
return (
content = (
<NonIdealState
icon={IconNames.SEARCH}
title="No search results"
description="Try searching for something else."
action={this.renderSearchBar()}
/>
);
}
return (
<SearchContainer>
{isSmallScreen && results.length === 0 && this.renderMobileWarning()}
<H2>Find an instance</H2>
{this.renderSearchBar()}
} else if (!!results && results.length > 0) {
content = (
<SearchResults>
{results.map(result => (
<SearchResult
@ -95,7 +97,49 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
</Button>
)}
</SearchResults>
</SearchContainer>
);
}
let rightSearchBarElement;
if (isLoadingResults) {
rightSearchBarElement = <Spinner size={Spinner.SIZE_SMALL} />;
} else if (query || error) {
rightSearchBarElement = <Button minimal={true} icon={IconNames.CROSS} onClick={this.clearQuery} />;
} else {
rightSearchBarElement = (
<Button
minimal={true}
icon={IconNames.ARROW_RIGHT}
intent={Intent.PRIMARY}
onClick={this.search}
disabled={!this.state.currentQuery}
/>
);
}
return (
<>
{isSmallScreen && results.length === 0 && this.renderMobileWarning()}
<SearchBarContainer hasSearchResults={results.length > 0} hasError={!!error}>
<H2>Find an instance</H2>
<InputGroup
leftIcon={IconNames.SEARCH}
rightElement={rightSearchBarElement}
large={true}
placeholder="Search instance names and descriptions"
type="search"
value={this.state.currentQuery}
onChange={this.handleInputChange}
onKeyPress={this.handleKeyPress}
/>
<SearchFilters
selectedFilters={this.state.searchFilters}
selectFilter={this.selectSearchFilter}
deselectFilter={this.deselectSearchFilter}
/>
</SearchBarContainer>
{content}
</>
);
}
@ -110,7 +154,31 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
};
private search = () => {
this.props.handleSearch(this.state.currentQuery);
this.props.handleSearch(this.state.currentQuery, this.state.searchFilters);
};
private clearQuery = () => {
this.setState({ currentQuery: "" }, () => this.props.handleSearch("", []));
};
private selectSearchFilter = (filter: ISearchFilter) => {
const { searchFilters } = this.state;
// Don't add the same filters twice
if (searchFilters.some(sf => isEqual(sf, filter))) {
return;
}
this.setState({ searchFilters: [...searchFilters, filter] }, this.search);
};
private deselectSearchFilter = (e: MouseEvent<HTMLButtonElement>) => {
const { searchFilters } = this.state;
const displayValueToRemove = get(e, "currentTarget.parentElement.innerText", "");
if (!!displayValueToRemove) {
this.setState(
{ searchFilters: searchFilters.filter(sf => sf.displayValue !== displayValueToRemove) },
this.search
);
}
};
private selectInstanceFactory = (domain: string) => () => {
@ -126,21 +194,6 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
this.props.setIsHoveringOver(undefined);
};
private renderSearchBar = () => (
<SearchBarContainer className={`${Classes.INPUT_GROUP} ${Classes.LARGE}`}>
<span className={`${Classes.ICON} bp3-icon-${IconNames.SEARCH}`} />
<input
className={Classes.INPUT}
type="search"
placeholder="Instance name"
dir="auto"
value={this.state.currentQuery}
onChange={this.handleInputChange}
onKeyPress={this.handleKeyPress}
/>
</SearchBarContainer>
);
private renderMobileWarning = () => (
<CalloutContainer>
<Callout intent={Intent.WARNING} title="Desktop site">
@ -159,7 +212,7 @@ const mapStateToProps = (state: IAppState) => ({
results: state.search.results
});
const mapDispatchToProps = (dispatch: Dispatch) => ({
handleSearch: (query: string) => dispatch(updateSearch(query) as any),
handleSearch: (query: string, filters: ISearchFilter[]) => dispatch(updateSearch(query, filters) as any),
navigateToInstance: (domain: string) => dispatch(push(`/instance/${domain}`)),
setIsHoveringOver: (domain?: string) => dispatch(setResultHover(domain))
});

3
frontend/src/constants.tsx
View File

@ -38,3 +38,6 @@ export const INSTANCE_DOMAIN_PATH = "/instance/:domain";
export interface IInstanceDomainPath {
domain: string;
}
// We could also extract the values from the server response, but this would slow things down...
export const INSTANCE_TYPES = ["mastodon", "gab", "pleroma"];

21
frontend/src/redux/actions.ts
View File

@ -1,6 +1,8 @@
import { isEqual } from "lodash";
import { Dispatch } from "redux";
import { push } from "connected-react-router";
import { ISearchFilter } from "../searchFilters";
import { getFromApi } from "../util";
import { ActionType, IAppState, IGraph, IInstanceDetails, ISearchResponse } from "./types";
@ -47,9 +49,9 @@ const graphLoadFailed = () => {
};
// Search
const requestSearchResult = (query: string) => {
const requestSearchResult = (query: string, filters: ISearchFilter[]) => {
return {
payload: query,
payload: { query, filters },
type: ActionType.REQUEST_SEARCH_RESULTS
};
};
@ -96,7 +98,7 @@ export const loadInstance = (instanceName: string | null) => {
};
};
export const updateSearch = (query: string) => {
export const updateSearch = (query: string, filters: ISearchFilter[]) => {
return (dispatch: Dispatch, getState: () => IAppState) => {
query = query.trim();
@ -105,14 +107,23 @@ export const updateSearch = (query: string) => {
return;
}
const isNewQuery = getState().search.query !== query;
const prevQuery = getState().search.query;
const prevFilters = getState().search.filters;
const isNewQuery = prevQuery !== query || !isEqual(prevFilters, filters);
const next = getState().search.next;
let url = `search/?query=${query}`;
if (!isNewQuery && next) {
url += `&after=${next}`;
}
dispatch(requestSearchResult(query));
// Add filters
// The format is e.g. type_eq=mastodon or user_count_gt=1000
filters.forEach(filter => {
url += `&${filter.field}_${filter.relation}=${filter.value}`;
});
dispatch(requestSearchResult(query, filters));
return getFromApi(url)
.then(result => dispatch(receiveSearchResults(result)))
.catch(() => dispatch(searchFailed()));

16
frontend/src/redux/reducers.ts
View File

@ -1,4 +1,5 @@
import { connectRouter } from "connected-react-router";
import { isEqual } from "lodash";
import { combineReducers } from "redux";
import { History } from "history";
@ -72,6 +73,7 @@ const currentInstance = (state = initialCurrentInstanceState, action: IAction):
const initialSearchState: ISearchState = {
error: false,
filters: [],
isLoadingResults: false,
next: "",
query: "",
@ -80,11 +82,12 @@ const initialSearchState: ISearchState = {
const search = (state = initialSearchState, action: IAction): ISearchState => {
switch (action.type) {
case ActionType.REQUEST_SEARCH_RESULTS:
const query = action.payload;
const isNewQuery = state.query !== query;
const { query, filters } = action.payload;
const isNewQuery = state.query !== query || !isEqual(state.filters, filters);
return {
...state,
error: false,
filters,
isLoadingResults: true,
next: isNewQuery ? "" : state.next,
query,
@ -99,14 +102,7 @@ const search = (state = initialSearchState, action: IAction): ISearchState => {
results: state.results.concat(action.payload.results)
};
case ActionType.SEARCH_RESULTS_ERROR:
return {
...state,
error: true,
isLoadingResults: false,
next: "",
query: "",
results: []
};
return { ...initialSearchState, error: true };
case ActionType.RESET_SEARCH:
return initialSearchState;
case ActionType.SET_SEARCH_RESULT_HOVER:

2
frontend/src/redux/types.ts
View File

@ -1,4 +1,5 @@
import { RouterState } from "connected-react-router";
import { ISearchFilter } from "../searchFilters";
export enum ActionType {
// Instance details
@ -113,6 +114,7 @@ export interface ISearchState {
next: string;
query: string;
results: ISearchResultInstance[];
filters: ISearchFilter[];
hoveringOverResult?: string;
}

26
frontend/src/searchFilters.ts Normal file
View File

@ -0,0 +1,26 @@
type ISearchFilterRelation = "eq" | "gt" | "gte" | "lt" | "lte";
export interface ISearchFilter {
// The ES field to filter on
field: string;
relation: ISearchFilterRelation;
// The value we want to filter to
value: string;
// Human-meaningful text that we're showing in the UI
displayValue: string;
}
// Maps to translate this to user-friendly text
const searchFilterFieldTranslations = {
type: "Instance type",
user_count: "User count"
};
const searchFilterRelationTranslations = {
eq: "=",
gt: ">",
gte: ">=",
lt: "<",
lte: "<="
};
export const getSearchFilterDisplayValue = (field: string, relation: ISearchFilterRelation, value: string) =>
`${searchFilterFieldTranslations[field]} ${searchFilterRelationTranslations[relation]} ${value}`;

5
frontend/src/types.ts
View File

@ -1,3 +1,5 @@
import { INSTANCE_TYPES } from "./constants";
interface IColorSchemeBase {
// The name of the coloring, e.g. "Instance type"
name: string;
@ -23,8 +25,7 @@ export const typeColorScheme: IQualitativeColorScheme = {
cytoscapeDataKey: "type",
name: "Instance type",
type: "qualitative",
// We could also extract the values from the server response, but this would slow things down...
values: ["mastodon", "gab", "pleroma"]
values: INSTANCE_TYPES
};
export const activityColorScheme: IQuantitativeColorScheme = {
cytoscapeDataKey: "statusesPerDay",