OpenConceptLab/ocl_issues#2205 | Map Project can be configured with external API/token

Author: snyaggarwal

src/components/map-projects/ConfigurationForm.jsx

@@ -35,7 +35,7 @@ const VisuallyHiddenInput = styled('input')({
 });
 
 
-const ConfigurationForm = ({ project, handleFileUpload, file, owner, setOwner, name, setName, description, setDescription, repo, onRepoChange, repoVersion, setRepoVersion, versions, mappedSources, targetSourcesFromRows, algo, onAlgoSelect, sx, algos, validColumns, columns, isValidColumnValue, updateColumn, configure, setConfigure, columnVisibilityModel, setColumnVisibilityModel, onSave, isSaving }) => {
+const ConfigurationForm = ({ project, handleFileUpload, file, owner, setOwner, name, setName, description, setDescription, repo, onRepoChange, repoVersion, setRepoVersion, versions, mappedSources, targetSourcesFromRows, algo, onAlgoSelect, sx, algos, validColumns, columns, isValidColumnValue, updateColumn, configure, setConfigure, columnVisibilityModel, setColumnVisibilityModel, onSave, isSaving, matchAPI, setMatchAPI, matchAPIToken, setMatchAPIToken }) => {
   const [algoMenuAnchorEl, setAlgoMenuAnchorEl] = React.useState(null)
 
   const onAlgoButtonClick = event => setAlgoMenuAnchorEl(algoMenuAnchorEl ? null : event.currentTarget)
@@ -125,6 +125,28 @@ const ConfigurationForm = ({ project, handleFileUpload, file, owner, setOwner, n
       <RepoSearchAutocomplete label='Repository' size='small' onChange={(id, item) => onRepoChange(item)} value={repo}  sx={{marginTop: '12px'}}/>
       <RepoVersionSearchAutocomplete versions={versions} label='Version' size='small' onChange={(id, item) => setRepoVersion(item)} value={repoVersion} sx={{marginTop: '12px'}} />
 
+      <Typography component="div" sx={{fontSize: '16px', fontWeight: 'bold', marginTop: '20px'}}>
+        Match API
+      </Typography>
+      <FormHelperText sx={{marginTop: 0}}>
+        Configure External Match API URL and Token
+      </FormHelperText>
+      <TextField
+        fullWidth
+        sx={{marginTop: '12px'}}
+        label='Match API URL'
+        placeholder='e.g. https://api.openconceptlab.org/concepts/$match/?includeSearchMeta=true'
+        value={matchAPI}
+        onChange={event => setMatchAPI(event.target.value || '')}
+      />
+      <TextField
+        fullWidth
+        sx={{marginTop: '12px'}}
+        label='Match API Token'
+        placeholder='e.g. XXXXXXXXXXX'
+        value={matchAPIToken}
+        onChange={event => setMatchAPIToken(event.target.value || '')}
+      />
       <Typography component="div" sx={{fontSize: '16px', fontWeight: 'bold', marginTop: '20px'}}>
         Matching Algorithm
       </Typography>

src/components/map-projects/MapProject.jsx

@@ -143,6 +143,8 @@ const MapProject = () => {
   const [searchStr, setSearchStr] = React.useState('') // concept search
   const [candidatesOrder, setCandidatesOrder] = React.useState('desc')
   const [candidatesOrderBy, setCandidatesOrderBy] = React.useState('search_meta.search_score')
+  const [matchAPI, setMatchAPI] = React.useState('')
+  const [matchAPIToken, setMatchAPIToken] = React.useState('')
 
   const abortRef = React.useRef(false);
 
@@ -260,6 +262,8 @@ const MapProject = () => {
       setDescription(response.data?.description || '')
       setOwner(response.data?.owner_url)
       setRetired(Boolean(response.data?.include_retired))
+      setMatchAPI(response.data?.match_api_url)
+      setMatchAPIToken(response.data?.match_api_token)
       setProject(response.data)
       setConfigure(false)
     })
@@ -527,6 +531,10 @@ const MapProject = () => {
       formData.append('target_repo_url', repoVersion.version_url)
     formData.append('matching_algorithm', algo)
     formData.append('include_retired', retired)
+    if(matchAPI) {
+      formData.append('match_api_url', matchAPI)
+      formData.append('match_api_token', matchAPIToken)
+    }
     let service = APIService.new().overrideURL(owner).appendToUrl('map-projects/')
     if(project?.id)
       service = service.appendToUrl(project.id + '/').put(formData, null, {"Content-Type": "multipart/form-data"})
@@ -583,6 +591,17 @@ const MapProject = () => {
     }
   }
 
+  const getMatchAPIService = () => {
+    let service;
+    if(matchAPI) {
+      service = APIService.new()
+      service.URL = matchAPI
+    } else {
+      service = APIService.concepts().appendToUrl('$match/')
+    }
+    return service
+  }
+
 
   const getRowsResults = async (rows) => {
     abortRef.current = false;
@@ -602,13 +621,17 @@ const MapProject = () => {
       const payload = getPayloadForMatching(rowBatch, _repo)
 
       try {
-        const response = await APIService.concepts()
-              .appendToUrl('$match/')
-              .post(payload, null, null, {
-                includeSearchMeta: true,
-                semantic: algo === 'llm',
-                bestMatch: true
-              });
+        const service = getMatchAPIService()
+        const response = await service.post(
+          payload,
+          (matchAPI && matchAPIToken) ? matchAPIToken : null,
+          null,
+          {
+            includeSearchMeta: true,
+            semantic: algo === 'llm',
+            bestMatch: true
+          }
+        );
 
         return response.data || [];
       } catch {
@@ -1047,9 +1070,12 @@ const MapProject = () => {
       let __row = isEmpty(_row) ? row : _row
       setIsLoadingInDecisionView(true)
       const payload = getPayloadForMatching([__row], repo)
-      APIService.concepts()
-        .appendToUrl('$match/')
-        .post(payload, null, null, {
+      const service = getMatchAPIService()
+      service.post(
+        payload,
+        (matchAPI && matchAPIToken) ? matchAPIToken : null,
+        null,
+        {
           includeSearchMeta: true,
           includeMappings: true,
           includeRetired: isBoolean(_retired) ? _retired : retired,
@@ -1232,6 +1258,10 @@ const MapProject = () => {
                     setColumnVisibilityModel={setColumnVisibilityModel}
                     onSave={onSave}
                     isSaving={isSaving}
+                    matchAPI={matchAPI}
+                    setMatchAPI={setMatchAPI}
+                    matchAPIToken={matchAPIToken}
+                    setMatchAPIToken={setMatchAPIToken}
                   />
                 </div>
           }
@@ -1562,6 +1592,11 @@ const MapProject = () => {
                 setColumnVisibilityModel={setColumnVisibilityModel}
                 onSave={onSave}
                 isSaving={isSaving}
+                matchAPI={matchAPI}
+                setMatchAPI={setMatchAPI}
+                matchAPIToken={matchAPIToken}
+                setMatchAPIToken={setMatchAPIToken}
+
               />
             </div> :
           (