Merge pull request #1640 from kleros/feat/evidence-search

Feat/evidence search

Author: alcercu

subgraph/core-neo/subgraph.yaml

@@ -1,6 +1,9 @@
 specVersion: 0.0.4
 schema:
   file: ./schema.graphql
+features:
+  - fullTextSearch
+
 dataSources:
   - kind: ethereum
     name: KlerosCore

subgraph/core-university/subgraph.yaml

@@ -1,6 +1,9 @@
 specVersion: 0.0.4
 schema:
   file: ./schema.graphql
+features:
+  - fullTextSearch
+
 dataSources:
   - kind: ethereum
     name: KlerosCore

subgraph/core/schema.graphql

@@ -52,7 +52,9 @@ interface Evidence {
   id: ID!
   evidence: String!
   evidenceGroup: EvidenceGroup!
+  evidenceIndex: String!
   sender: User!
+  senderAddress: String!
   timestamp: BigInt!
   name: String
   description: String
@@ -300,7 +302,9 @@ type ClassicEvidence implements Evidence @entity(immutable: true) {
   id: ID! # classicEvidenceGroup.id-nextEvidenceIndex
   evidence: String!
   evidenceGroup: EvidenceGroup!
+  evidenceIndex: String!
   sender: User!
+  senderAddress: String!
   timestamp: BigInt!
   name: String
   description: String
@@ -319,3 +323,11 @@ type ClassicContribution implements Contribution @entity {
   choice: BigInt!
   rewardWithdrawn: Boolean!
 }
+
+type _Schema_
+  @fulltext(
+    name: "evidenceSearch"
+    language: en
+    algorithm: rank
+    include: [{ entity: "ClassicEvidence", fields: [{ name: "name" }, { name: "description" },{ name: "senderAddress"},{ name: "evidenceIndex"}] }]
+  )

subgraph/core/src/EvidenceModule.ts

@@ -14,11 +14,13 @@ export function handleEvidenceEvent(event: EvidenceEvent): void {
   evidenceGroup.save();
   const evidenceId = `${evidenceGroupID}-${evidenceIndex.toString()}`;
   const evidence = new ClassicEvidence(evidenceId);
+  evidence.evidenceIndex = evidenceIndex.plus(ONE).toString();
   const userId = event.params._party.toHexString();
   evidence.timestamp = event.block.timestamp;
   evidence.evidence = event.params._evidence;
   evidence.evidenceGroup = evidenceGroupID.toString();
   evidence.sender = userId;
+  evidence.senderAddress = userId;
   ensureUser(userId);
 
   let jsonObjValueAndSuccess = json.try_fromString(event.params._evidence);

subgraph/core/subgraph.yaml

@@ -1,6 +1,9 @@
 specVersion: 0.0.4
 schema:
   file: ./schema.graphql
+features:
+  - fullTextSearch
+
 dataSources:
   - kind: ethereum
     name: KlerosCore

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/src/assets/svgs/icons/arrow-down.svg

@@ -62,20 +62,6 @@ const BottomShade = styled.div`
   }
 `;
 
-const StyledA = styled.a`
-  display: flex;
-  margin-left: auto;
-  gap: ${responsiveSize(5, 6)};
-  ${landscapeStyle(
-    () => css`
-      > svg {
-        width: 16px;
-        fill: ${({ theme }) => theme.primaryBlue};
-      }
-    `
-  )}
-`;
-
 const AccountContainer = styled.div`
   display: flex;
   flex-direction: row;

web/src/components/EvidenceCard.tsx

@@ -4,39 +4,60 @@ import { REFETCH_INTERVAL } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
 import { graphql } from "src/graphql";
-import { EvidencesQuery } from "src/graphql/graphql";
+import { EvidenceDetailsFragment, EvidencesQuery } from "src/graphql/graphql";
 export type { EvidencesQuery };
 
+export const evidenceFragment = graphql(`
+  fragment EvidenceDetails on ClassicEvidence {
+    id
+    evidence
+    sender {
+      id
+    }
+    timestamp
+    name
+    description
+    fileURI
+    fileTypeExtension
+    evidenceIndex
+  }
+`);
+
 const evidencesQuery = graphql(`
   query Evidences($evidenceGroupID: String) {
-    evidences(where: { evidenceGroup: $evidenceGroupID }, orderBy: timestamp, orderDirection: desc) {
-      id
-      evidence
-      sender {
-        id
-      }
-      timestamp
-      name
-      description
-      fileURI
-      fileTypeExtension
+    evidences(where: { evidenceGroup: $evidenceGroupID }, orderBy: timestamp, orderDirection: asc) {
+      ...EvidenceDetails
     }
   }
 `);
 
-export const useEvidences = (evidenceGroup?: string) => {
+const evidenceSearchQuery = graphql(`
+  query EvidenceSearch($keywords: String!, $evidenceGroupID: String) {
+    evidenceSearch(text: $keywords, where: { evidenceGroup: $evidenceGroupID }) {
+      ...EvidenceDetails
+    }
+  }
+`);
+
+export const useEvidences = (evidenceGroup?: string, keywords?: string) => {
   const isEnabled = evidenceGroup !== undefined;
   const { graphqlBatcher } = useGraphqlBatcher();
 
-  return useQuery<EvidencesQuery>({
-    queryKey: [`evidencesQuery${evidenceGroup}`],
+  const document = keywords ? evidenceSearchQuery : evidencesQuery;
+  return useQuery<{ evidences: EvidenceDetailsFragment[] }>({
+    queryKey: [
+      keywords ? `evidenceSearchQuery${evidenceGroup}-${keywords}` : `evidencesQuery${evidenceGroup}`,
+    ],
     enabled: isEnabled,
     refetchInterval: REFETCH_INTERVAL,
-    queryFn: async () =>
-      await graphqlBatcher.fetch({
+    queryFn: async () => {
+      const result = await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
-        document: evidencesQuery,
-        variables: { evidenceGroupID: evidenceGroup?.toString() },
-      }),
+        document: document,
+        variables: { evidenceGroupID: evidenceGroup?.toString(), keywords: keywords },
+      });
+
+      return keywords ? { evidences: [...result.evidenceSearch] } : result;
+    },
   });
 };

web/src/hooks/queries/useEvidences.ts

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import { useAccount } from "wagmi";
+
+import { Button, Searchbar } from "@kleros/ui-components-library";
+
+import { isUndefined } from "src/utils";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+import { EnsureChain } from "components/EnsureChain";
+
+import SubmitEvidenceModal from "./SubmitEvidenceModal";
+
+const SearchContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${responsiveSize(16, 28)};
+`;
+
+const StyledSearchBar = styled(Searchbar)`
+  min-width: 220px;
+  flex: 1;
+`;
+
+const StyledButton = styled(Button)`
+  align-self: flex-end;
+`;
+
+interface IEvidenceSearch {
+  search?: string;
+  setSearch: (search: string) => void;
+  evidenceGroup?: bigint;
+}
+
+const EvidenceSearch: React.FC<IEvidenceSearch> = ({ search, setSearch, evidenceGroup }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { address } = useAccount();
+
+  return (
+    <>
+      {!isUndefined(evidenceGroup) && (
+        <SubmitEvidenceModal isOpen={isModalOpen} close={() => setIsModalOpen(false)} {...{ evidenceGroup }} />
+      )}
+
+      <SearchContainer>
+        <StyledSearchBar
+          placeholder="Search evidence by number, word, or submitter."
+          onChange={(e) => setSearch(e.target.value)}
+          value={search}
+        />
+
+        <EnsureChain>
+          <StyledButton
+            text="Submit Evidence"
+            disabled={typeof address === "undefined" || isModalOpen}
+            isLoading={isModalOpen}
+            onClick={() => setIsModalOpen(true)}
+          />
+        </EnsureChain>
+      </SearchContainer>
+    </>
+  );
+};
+
+export default EvidenceSearch;