OpenConceptLab/ocl_issues#2190 | Project discuss/logs

Author: snyaggarwal

src/components/map-projects/ColumnMapTable.jsx

@@ -14,6 +14,7 @@ import find from 'lodash/find';
 import map from 'lodash/map';
 import omit from 'lodash/omit';
 import get from 'lodash/get'
+import orderBy from 'lodash/orderBy'
 
 
 const HeaderAutocomplete = ({headers, isValid, ...rest}) => {
@@ -91,7 +92,7 @@ const TargetSourceAutoComplete = ({sources, possibleValue, selected, onChange, .
               '.MuiButtonBase-root': {color: '#000'}
             }}
             renderInput={(params) => <TextField margin='dense' size='small' {...params} />}
-           options={sources}
+           options={orderBy(sources, 'id')}
            value={selected ? find(sources, {url: selected}) || '' : ''}
            onChange={(event, val) => onChange(val?.url)}
             {...rest}
@@ -146,7 +147,7 @@ const ColumnMapTable = ({validColumns, columns, isValid, onUpdate, sx, setColumn
                             map(targetSourcesFromRows[column.dataKey], (target, index) => {
                               return (
                                 <div key={index} style={{display: 'flex', alignItems: 'center'}}>
-                                  <span style={{marginRight: '8px', textTransform: 'uppercase'}}>
+                                  <span style={{marginRight: '8px'}}>
                                     {target}:
                                   </span>
                                   <TargetSourceAutoComplete
@@ -164,7 +165,7 @@ const ColumnMapTable = ({validColumns, columns, isValid, onUpdate, sx, setColumn
                     {
                       'Mapping: Code' === column.label &&
                         <div style={{display: 'flex', alignItems: 'center'}}>
-                          <span style={{marginRight: '8px', textTransform: 'uppercase'}}>
+                          <span style={{marginRight: '8px'}}>
                             {targetSourcesFromRows[column.dataKey]}:
                           </span>
                           <TargetSourceAutoComplete

src/components/map-projects/Discuss.jsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import moment from 'moment'
+
+import Timeline  from '@mui/lab/Timeline';
+import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button'
+import CommentIcon from '@mui/icons-material/Message';
+import MapIcon from '@mui/icons-material/Link';
+import UnmapIcon from '@mui/icons-material/LinkOff';
+import RejectIcon from '@mui/icons-material/Clear';
+import AutoMatchIcon from '@mui/icons-material/MotionPhotosAutoOutlined';
+
+import map from 'lodash/map'
+import startCase from 'lodash/startCase'
+import orderBy from 'lodash/orderBy'
+
+
+const Discuss = ({ logs, onAdd }) => {
+  const [comment, setComment] = React.useState('')
+  const getTitle = log => {
+    if(['mapped', 'unmapped', 'auto-matched'].includes(log.action)) {
+      return `${startCase(log.action)}: ${log.extras.name} (${log.extras.map_type || log.extras.mapType})`
+    }
+    if(['commented'].includes(log.action)) {
+      return <b>{log.description}</b>
+    }
+    return log.description || startCase(log.action)
+  }
+
+  const getIcon = (log, color) => {
+    if(log.action === 'commented')
+      return <CommentIcon fontSize='small' color={color} />
+    if(['mapped'].includes(log.action))
+      return <MapIcon fontSize='small' color={color} />
+    if(['auto-matched'].includes(log.action))
+      return <AutoMatchIcon fontSize='small' color={color} />
+    if(log.action === 'unmapped')
+      return <UnmapIcon fontSize='small' color={color} />
+    if(log.action === 'rejected')
+      return <RejectIcon fontSize='small' color={color} />
+    return log.user.slice(0, 2).toUpperCase()
+  }
+
+  const getDotColor = log => {
+    if(['unmapped', 'rejected'].includes(log.action))
+      return 'error'
+    if(['proposed'].includes(log.action))
+      return 'warning'
+    if(['mapped', 'auto-matched'].includes(log.action))
+      return 'primary'
+    return undefined
+  }
+
+  const onClick = () => {
+    onAdd(comment)
+    setComment('')
+  }
+
+
+  return (
+    <>
+      <Timeline
+        sx={{
+          maxHeight: 'calc(100vh - 560px)',
+          overflow: 'auto',
+          p: 2,
+          paddingTop: '4px',
+          marginBottom: 0,
+          [`& .${timelineItemClasses.root}:before`]: {
+            flex: 0,
+            padding: 0,
+          },
+        }}
+      >
+        {
+          map(orderBy(logs, log => moment(log.created_at), ['desc']), (log, index) => {
+            const dotColor = getDotColor(log)
+            return (
+              <TimelineItem key={log.created_at.toString()}>
+                <TimelineSeparator>
+                  <Tooltip title={startCase(log.action)}>
+                    <TimelineDot color={dotColor} variant="outlined">
+                      {getIcon(log, dotColor)}
+                    </TimelineDot>
+                  </Tooltip>
+                  {
+                    index !== (logs.length - 1) &&
+                      <TimelineConnector />
+                  }
+                </TimelineSeparator>
+                <TimelineContent>
+                  <Typography component="span" sx={{fontSize: '14px'}}>
+                    {getTitle(log)}
+                  </Typography>
+                  <Typography sx={{fontSize: '12px', color: 'rgba(0, 0, 0, 0.7)'}}>{log.user} at {moment(log.created_at).format('ll LTS')}</Typography>
+                </TimelineContent>
+              </TimelineItem>
+            )
+          })
+        }
+      </Timeline>
+      <div className='col-xs-12' style={{padding: '16px'}}>
+        <TextField
+          autoFocus
+          fullWidth
+          multiline
+          minRows={2}
+          maxRows={4}
+          value={comment}
+          label='Comment'
+          onChange={event => setComment(event.target.value || '')}
+          sx={{
+            '.MuiInputBase-root': {
+              fontSize: '14px',
+              padding: '4px 8px',
+              '.MuiInputBase-inputMultiline': {
+                height: '20px'
+              }
+            }
+          }}
+        />
+        <Button onClick={onClick} sx={{textTransform: 'none', marginTop: '8px'}} variant='outlined' color='primary'>
+          Comment
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default Discuss;

src/components/map-projects/MapProject.jsx

@@ -91,10 +91,20 @@ import ReviewNote from './ReviewNote'
 import Propose from './Propose'
 import Candidates from './Candidates'
 import SearchCandidates from './SearchCandidates'
+import Discuss from './Discuss'
 
 import './MapProject.scss'
 import '../common/ResizablePanel.scss'
 
+
+// const LOG = {
+//   action: '',
+//   user: '',
+//   description: '',
+//   extras: {},
+//   created_at: ''
+// }
+
 const MapProject = () => {
   const { toggles, setAlert: baseSetAlert } = React.useContext(OperationsContext);
   const user = getCurrentUser()
@@ -149,6 +159,7 @@ const MapProject = () => {
   const [alert, setAlert] = React.useState(false)
   const [columnVisibilityModel, setColumnVisibilityModel] = React.useState({})
   const [columnWidth, setColumnWidth] = React.useState({})
+  const [logs, setLogs] = React.useState({})
 
   // repo state
   const [repo, setRepo] = React.useState(false)
@@ -187,6 +198,9 @@ const MapProject = () => {
   const fetchAndSetProject = () => {
     let url = ['', params.ownerType, params.owner, 'map-projects', params.projectId, ''].join('/')
     APIService.new().overrideURL(url).get().then(response => {
+      if(response.data.url) {
+        APIService.new().overrideURL(response.data.url).appendToUrl('logs/').get().then(response => setLogs(response.data.logs || []))
+      }
       if(response.data?.file_url) {
         fetch(response.data.file_url).then(res => res.text()).then(csvText => {
           const workbook = XLSX.read(csvText, { type: "string" });
@@ -491,10 +505,16 @@ const MapProject = () => {
         if(response.data.url)
           history.push(response.data.url)
         baseSetAlert({severity: 'success', message: 'Succesffully Saved.', duration: 2000})
+        APIService.new().overrideURL(response.data.url).appendToUrl('logs/').post({logs: logs}).then(() => {})
       }
     })
   }
 
+  const log = (data, index) => {
+    let idx = index === undefined ? rowIndex : index
+    setLogs(prev => ({...prev, [idx]: [{...data, created_at: moment().toDate(), user: user.username || user.id}, ...(prev[idx] || [])]}))
+  }
+
   const fetchRepo = (url, _repo) => APIService.new().overrideURL(url).get().then(response => setRepo(response.data?.id ? response.data : _repo))
 
   const fetchMappedSources = url => APIService.new().overrideURL(url).appendToUrl('mapped-sources/?excludeSelf=false&brief=true').get().then(response => setMappedSources(response?.data || []))
@@ -581,13 +601,15 @@ const MapProject = () => {
             setRowStatuses(prev => {
               forEach(data, concept => {
                 if(get(concept, 'results.0.search_meta.match_type') === 'very_high') {
+                  let _concept = {...concept.results[0], repo: {..._repo, version: repoVersion?.id || _repo.version, version_url: repoVersion?.version_url || _repo.version_url}}
                   setMapSelected(_prev => {
-                    _prev[concept.row.__index] = {...concept.results[0], repo: {..._repo, version: repoVersion?.id || _repo.version, version_url: repoVersion?.version_url || _repo.version_url}}
+                    _prev[concept.row.__index] = _concept
                     return _prev
                   })
                   prev.readyForReview = uniq([...prev.readyForReview, concept.row.__index])
                   setDecisions(prev => ({...prev, [concept.row.__index]: 'map'}))
                   setMapTypes(prev => ({...prev, [concept.row.__index]: 'SAME-AS'}))
+                  log({action: 'auto-matched', extras: {repoVersion: repoVersion?.version_url || _repo.version_url, name: getConceptLabel(_concept), map_type: 'SAME-AS'}}, concept.row.__index)
                 } else
                   prev.unmapped = uniq([...prev.unmapped, concept.row.__index])
               })
@@ -610,7 +632,6 @@ const MapProject = () => {
         prev.readyForReview = []
       return prev
     })
-
     await processWithConcurrency(repo);
     setEndMatchingAt(moment())
     setLoadingMatches(false)
@@ -851,7 +872,7 @@ const MapProject = () => {
   const onMap = (event, concept, unmap=false, mapType='SAME-AS', closeConcept=false) => {
     event.preventDefault()
     event.stopPropagation()
-    _onMap(concept, unmap)
+    _onMap(concept, unmap, mapType)
     setRowStatuses(prev => {
       prev.reviewed = without(prev.reviewed, rowIndex)
       if(unmap) {
@@ -871,9 +892,12 @@ const MapProject = () => {
     return false
   }
 
-  const _onMap = (concept, unmap=false) => {
+  const _onMap = (concept, unmap=false, mapType='SAME-AS') => {
     setMapSelected(prev => ({...prev, [rowIndex]: unmap ? null : {...concept, repo: {...repo, version: repoVersion?.id || repo.version, version_url: repoVersion?.version_url || repo.version_url}}}))
     setDecisions(prev => ({...prev, [rowIndex]: unmap ? null : 'map'}))
+    if(concept?.url)
+      log({action: unmap ? 'unmapped' : 'mapped', extras: {object_url: concept?.url, map_type: mapType, name: getConceptLabel(concept)}})
+
   }
 
   const onReviewDone = (next = false) => {
@@ -884,6 +908,7 @@ const MapProject = () => {
       const nextRow = data[selectedRowStatus === 'all' ? rowIndex + 1 : find(rowStatuses[selectedRowStatus], idx => idx > rowIndex)]
       if(nextRow !== undefined)
         setTimeout(() => onCSVRowSelect(nextRow), 300)
+      log({'action': 'approved'})
     }
   }
 
@@ -921,14 +946,21 @@ const MapProject = () => {
   }
 
   const onDecisionChange = (event, newValue) => {
+    let logged = false
     if(newValue === 'rejected') {
       let selected = mapSelected[rowIndex]
       selected = getConcept(selected) || selected
       if(selected?.id) {
-        let comment = `Rejected ${getConceptLabel(selected)}`
+        let conceptLabel = getConceptLabel(selected)
+        let comment = `Rejected ${conceptLabel}`
         if(notes[rowIndex])
           comment = notes[rowIndex] + '\n' + comment
         setNotes({...notes, [rowIndex]: comment})
+        log({action: newValue, description: comment, extras: {object_url: selected?.url, name: conceptLabel}})
+        logged = true
+      } else {
+        log({action: newValue})
+        logged = true
       }
     }
     if(newValue !== 'map')
@@ -937,8 +969,11 @@ const MapProject = () => {
       setProposed(prev => ({...prev, [rowIndex]: undefined}))
 
     setDecisions(prev => ({...prev, [rowIndex]: newValue || undefined}))
-    if(newValue === 'propose')
+    if(newValue === 'propose') {
       setAlert({message: 'Proposed successfully.', duration: 2, severity: 'success'})
+      log({action: 'proposed'})
+        logged = true
+    }
 
     setRowStatuses(prev => {
       prev.reviewed = without(prev.reviewed, rowIndex)
@@ -952,6 +987,8 @@ const MapProject = () => {
       updateMatchTypeCounts(null, prev)
       return prev
     })
+    if(newValue !== 'map' && !logged)
+      log({action: newValue || 'decision_changed', description: 'Desicion Changed to None', extras: newValue ? {} : {decision: 'None'}})
   }
 
   const fetchOtherCandidates = (_row, offset=0) => {
@@ -1545,6 +1582,10 @@ const MapProject = () => {
                       onSearch={searchCandidates}
                     />
                 }
+                {
+                  decisionTab === 'discuss' && isSplitView &&
+                    <Discuss logs={logs[rowIndex]} onAdd={comment => comment ? log({action: 'commented', description: comment}) : null} />
+                }
               </div>
               <SearchHighlightsDialog
                 open={Boolean(showHighlights)}

src/components/map-projects/constants.jsx

@@ -78,4 +78,4 @@ export const MATCH_TYPES = {
   },
 }
 
-export const DECISION_TABS = ['candidates', 'propose', 'search']
+export const DECISION_TABS = ['candidates', 'propose', 'search', 'discuss']