OpenConceptLab/ocl_issues#2188 | Mapper auto save

src/components/map-projects/MapProject.jsx

@@ -87,6 +87,7 @@ import ConfigurationForm from './ConfigurationForm'
 import Controls from './Controls'
 import DataGridControls from './DataGridControls'
 import { getRowsToProcess } from './autoMatchRows'
+import { createAutosaveScheduler } from './autosave'
 import MatchSummaryCard from './MatchSummaryCard'
 import MappingDecisionResult from './MappingDecisionResult'
 import DecisionSelector from './DecisionSelector'
@@ -229,6 +230,19 @@ const MapProject = () => {
  const [columnWidth, setColumnWidth] = React.useState({})
  const [logs, setLogs] = React.useState({})
  const [projectLogs, setProjectLogs] = React.useState([])
+ const logsRef = React.useRef({})
+ const projectLogsRef = React.useRef([])
+ const configSnapshotOnOpenRef = React.useRef(null)
+ const isSavingRef = React.useRef(false)
+ const projectIdRef = React.useRef(null)
+ const onSaveRef = React.useRef(null)
+ const autosaveSchedulerRef = React.useRef(null)
+ if(!autosaveSchedulerRef.current)
+ autosaveSchedulerRef.current = createAutosaveScheduler({
+ getProjectId: () => projectIdRef.current,
+ isSaving: () => isSavingRef.current,
+ onFire: reasons => onSaveRef.current({source: 'auto', closeConfigure: false, reasons})
+ })
  const [filterModel, setFilterModel] = React.useState({ items: [] });
  const [filterPanelAnchorEl, setFilterPanelAnchorEl] = React.useState(null)
  const [retired, setRetired] = React.useState(false)
@@ -250,6 +264,33 @@ const MapProject = () => {
  setAlert(false)
  }, [])
 
+ React.useEffect(() => {
+ logsRef.current = logs
+ }, [logs])
+
+ React.useEffect(() => {
+ projectLogsRef.current = projectLogs
+ }, [projectLogs])
+
+ React.useEffect(() => {
+ isSavingRef.current = isSaving
+ }, [isSaving])
+
+ React.useEffect(() => {
+ projectIdRef.current = project?.id
+ }, [project])
+
+ // Autosave fires long after it was scheduled, so it must call the current
+ // onSave — an older render's closure would build the payload from state
+ // captured when the change happened rather than what is on screen now.
+ React.useEffect(() => {
+ onSaveRef.current = onSave
+ })
+
+ React.useEffect(() => () => {
+ autosaveSchedulerRef.current.cancel()
+ }, [])
+
  // repo state
  const [repo, setRepo] = React.useState(false)
  const [repoVersion, setRepoVersion] = React.useState(false)
@@ -666,8 +707,12 @@ const MapProject = () => {
  setFilters(response.data?.filters || {})
  if(response.data?.url) {
  APIService.new().overrideURL(response.data.url).appendToUrl('logs/').get().then(response => {
- setLogs(response.data.logs?.row_logs || [])
- setProjectLogs(response.data.logs?.project_logs || [])
+ const rowLogs = response.data.logs?.row_logs || []
+ const savedProjectLogs = response.data.logs?.project_logs || []
+ logsRef.current = rowLogs
+ projectLogsRef.current = savedProjectLogs
+ setLogs(rowLogs)
+ setProjectLogs(savedProjectLogs)
  projectLog({action: 'Opened'})
  })
  }
@@ -1365,7 +1410,12 @@ const MapProject = () => {
  })
  }
 
- const onSave = () => {
+ const onSave = (options = {}) => {
+ const isAutoSave = options.source === 'auto'
+ if(isAutoSave && !project?.id)
+ return
+ if(!isAutoSave)
+ autosaveSchedulerRef.current.cancel()
  if(!repoVersion?.version_url || !selectedTargetRepoVersion) {
  setConfigure(true)
  setAlert({
@@ -1378,6 +1428,8 @@ const MapProject = () => {
  })
  return
  }
+ const rowLogsForSave = options.logs || logsRef.current
+ const projectLogsForSave = options.projectLogs || projectLogsRef.current
  setIsSaving(true)
  const f = getFileObjectFromRows()
  const selected = map(mapSelected, (data, i) => {
@@ -1459,32 +1511,54 @@ const MapProject = () => {
  service.then(response => {
  setIsSaving(false)
  if(response?.data?.id) {
- projectLog({action: isUpdate ? 'Updated' : 'Created', extras: isUpdate ? undefined : {project: response.data}})
- setConfigure(false)
+ const saveLog = {
+ action: isAutoSave ? 'Auto Saved' : (isUpdate ? 'Updated' : 'Created'),
+ description: isAutoSave ? t('map_project.auto_saved_changes') : undefined,
+ created_at: moment().toDate(),
+ user: user.username || user.id,
+ extras: isAutoSave ? {reasons: options.reasons || []} : (isUpdate ? undefined : {project: response.data})
+ }
+ const savedProjectLogs = [saveLog, ...projectLogsForSave]
+ projectLogsRef.current = savedProjectLogs
+ setProjectLogs(savedProjectLogs)
+ if(options.closeConfigure !== false) {
+ configSnapshotOnOpenRef.current = null
+ setConfigure(false)
+ }
  setProjectPromptTemplateKey(response.data?.prompt_template_key || getProjectPromptTemplateKey())
  setProject(response.data)
  if(response.data.url)
  history.push(response.data.url)
- baseSetAlert({severity: 'success', message: t('map_project.successfully_saved'), duration: 2000})
+ if(!isAutoSave)
+ baseSetAlert({severity: 'success', message: t('map_project.successfully_saved'), duration: 2000})
 
- APIService.new().overrideURL(response.data.url).appendToUrl('logs/').post({logs: {row_logs: logs, project_logs: projectLogs}}).then(() => {})
+ APIService.new().overrideURL(response.data.url).appendToUrl('logs/').post({logs: {row_logs: rowLogsForSave, project_logs: savedProjectLogs}}).then(() => {})
  }
- })
+ }).finally(() => setIsSaving(false))
  }
 
+ // onSave takes options, so it can't be bound to onClick directly — the click
+ // event would arrive where the options object is expected.
+ const onManualSave = () => onSave({source: 'manual'})
+
  const log = (data, index) => {
  let idx = index === undefined ? rowIndex : index
- setLogs(prev => ({...prev, [idx]: [{created_at: moment().toDate(), user: user.username || user.id, ...data}, ...(prev[idx] || [])]}))
+ const nextLogs = {...logsRef.current, [idx]: [{created_at: moment().toDate(), user: user.username || user.id, ...data}, ...(logsRef.current[idx] || [])]}
+ logsRef.current = nextLogs
+ setLogs(nextLogs)
  }
 
  const projectLog = data => {
  const newLog = {...data, created_at: moment().toDate(), user: user.username || user.id}
- const newLogs = [newLog, ...projectLogs]
- setProjectLogs(prev => [newLog, ...prev])
+ const newLogs = [newLog, ...projectLogsRef.current]
+ projectLogsRef.current = newLogs
+ setProjectLogs(newLogs)
  if(project?.url)
- APIService.new().overrideURL(project.url).appendToUrl('logs/').post({logs: {row_logs: logs, project_logs: newLogs}}).then(() => {})
+ APIService.new().overrideURL(project.url).appendToUrl('logs/').post({logs: {row_logs: logsRef.current, project_logs: newLogs}}).then(() => {})
  }
 
+ const scheduleAutoSave = reason => autosaveSchedulerRef.current.schedule(reason)
+
  // ── ocl_online#105 Phase 5: AutomatchRun attribution ──────────────────────
  // Build the X-OCL-Request-Source + X-OCL-Event-Metadata headers for a single
  // per-row backend call. Attribution is by explicit ORIGIN, not ambient: only
@@ -1619,6 +1693,53 @@ const MapProject = () => {
  return includeDefaultFilter ? allFilters : omit(allFilters, Object.keys(defaultFilters))
  }
 
+ const getConfigurationSnapshot = () => JSON.stringify({
+ owner,
+ name,
+ description,
+ repo_url: repo?.url,
+ repo_version_url: repoVersion?.version_url,
+ algorithms: map(algosSelected, algo => omit(algo, ['__key'])),
+ score_configuration: candidatesScore,
+ lookup_config: lookupConfig,
+ namespace,
+ encoder_model: encoderModel || DEFAULT_ENCODER_MODEL,
+ include_retired: retired,
+ filters: getFilters(),
+ prompt_template_key: getProjectPromptTemplateKey(),
+ prompt_output_locale: promptOutputLocale || '',
+ input_locale: inputLocale || '',
+ use_lexical_variants: Boolean(useLexicalVariants),
+ columns: map(columns, col => ({
+ dataKey: col.dataKey,
+ mapped: col.mapped,
+ hidden: columnVisibilityModel[col.dataKey] === false,
+ width: columnWidth[col.dataKey] || undefined,
+ ai_assistant_hidden: AIAssistantColumns[col.dataKey] === false
+ }))
+ })
+
+ const closeConfiguration = () => {
+ const openedSnapshot = configSnapshotOnOpenRef.current
+ const changed = openedSnapshot && openedSnapshot !== getConfigurationSnapshot()
+ setConfigure(false)
+ configSnapshotOnOpenRef.current = null
+ if(changed)
+ scheduleAutoSave('configuration_change')
+ }
+
+ const setConfigureWithAutosave = nextConfigure => {
+ if(nextConfigure)
+ setConfigure(true)
+ else
+ closeConfiguration()
+ }
+
+ React.useEffect(() => {
+ if(configure && !configSnapshotOnOpenRef.current)
+ configSnapshotOnOpenRef.current = getConfigurationSnapshot()
+ }, [configure])
+
  const getPayloadForMatching = (rows, _repo, _filters) => {
  return {
  rows: map(rows, row => prepareRow(row)),
@@ -1984,6 +2105,8 @@ const MapProject = () => {
  } : {})
  }
  })
+ if(!abortRef.current)
+ scheduleAutoSave('auto_match')
  } finally {
  await completeAutomatchRun(_selectedAlgos, rowsToProcess)
  }
@@ -2647,7 +2770,7 @@ const MapProject = () => {
  conceptCacheRef.current = next
  setConceptCache(next)
  })
-setConfigure(false)
+closeConfiguration()
  setShowProjectLogs(false)
  setRow(csvRow)
  setSearchStr(getRowNameValue(csvRow) || '')
@@ -2724,6 +2847,7 @@ const MapProject = () => {
  const newRowStatuses = {...rowStatuses, reviewed: uniq([...rowStatuses.reviewed, rowIndex]), readyForReview: without(rowStatuses.readyForReview, rowIndex), unmapped: without(rowStatuses.unmapped, rowIndex)}
  setRowStatuses(newRowStatuses)
  log({'action': 'approved'})
+ scheduleAutoSave('decision_change')
  if(next){
  const nextRow = data[selectedRowStatus === 'all' ? rowIndex + 1 : find(rowStatuses[selectedRowStatus], idx => idx > rowIndex)]
  if(nextRow !== undefined)
@@ -2816,6 +2940,7 @@ const MapProject = () => {
  })
  if(newValue !== 'map' && !logged)
  log({action: newValue || 'decision_changed', description: t('map_project.decision_changed_to_none'), extras: newValue ? {} : {decision: t('map_project.none')}})
+ scheduleAutoSave('decision_change')
  }
 
  const getBulkActionLabel = action => {
@@ -2831,25 +2956,24 @@ const MapProject = () => {
 
  const addBulkLogs = (indexes, action, description, extras = {}) => {
  const createdAt = moment().toDate()
- setLogs(prev => {
- const next = {...prev}
- indexes.forEach(index => {
- const resolvedDescription = typeof description === 'function' ? description(index) : description
- const resolvedExtras = typeof extras === 'function' ? extras(index) : extras
- next[index] = [{
- created_at: createdAt,
- user: user.username || user.id,
- action,
- description: resolvedDescription,
- extras: {
- bulk_origin: 'mapper-left-panel-selection',
- bulk_action: action,
- ...resolvedExtras
- }
- }, ...(next[index] || [])]
- })
- return next
+ const next = {...logsRef.current}
+ indexes.forEach(index => {
+ const resolvedDescription = typeof description === 'function' ? description(index) : description
+ const resolvedExtras = typeof extras === 'function' ? extras(index) : extras
+ next[index] = [{
+ created_at: createdAt,
+ user: user.username || user.id,
+ action,
+ description: resolvedDescription,
+ extras: {
+ bulk_origin: 'mapper-left-panel-selection',
+ bulk_action: action,
+ ...resolvedExtras
+ }
+ }, ...(next[index] || [])]
  })
+ logsRef.current = next
+ setLogs(next)
  }
 
  const getSelectedRowIndexes = (_rows = data) => {
@@ -3009,6 +3133,8 @@ const MapProject = () => {
  duration: 4,
  message: t('map_project.bulk_action_summary', {changed: changed.length, skipped: skipped.length})
  })
+ if(changed.length)
+ scheduleAutoSave('decision_change')
  clearBulkSelection()
  }
 
@@ -4691,10 +4817,10 @@ const MapProject = () => {
  isValidColumnValue={isValidColumnValue}
  updateColumn={updateColumn}
  configure={configure}
- setConfigure={setConfigure}
+ setConfigure={setConfigureWithAutosave}
  columnVisibilityModel={columnVisibilityModel}
  setColumnVisibilityModel={setColumnVisibilityModel}
- onSave={onSave}
+ onSave={onManualSave}
  isSaving={isSaving}
  candidatesScore={candidatesScore}
  onScoreChange={setCandidatesScore}
@@ -4886,7 +5012,7 @@ const MapProject = () => {
  isCoreUser={isCoreUser}
  project={project}
  onDownload={onDownloadClick}
- onSave={onSave}
+ onSave={onManualSave}
  onDelete={() => setDeleteProject(true)}
  owner={owner}
  file={file}
@@ -4898,14 +5024,14 @@ const MapProject = () => {
  onProjectLogsClick={() => {
  const newValue = !showProjectLogs
  if(newValue) {
-setConfigure(false)
+closeConfiguration()
  onCloseDecisions()
  }
  setShowProjectLogs(newValue)
  }}
  isProjectsLogOpen={showProjectLogs}
  configure={configure}
- setConfigure={setConfigure}
+ setConfigure={setConfigureWithAutosave}
  onCopyClick={onCopyClick}
  />
  }

src/components/map-projects/ProjectLogs.jsx

@@ -47,6 +47,8 @@ const ProjectLogs = ({onClose, logs, project}) => {
  return [<i key="created" className="fa-brands fa-octopus-deploy" style={{color: PRIMARY_COLORS.main, fontSize: '1.25rem', width: '1em', height: '1em'}}></i>, 'primary']
  if(action === 'updated')
  return [<HistoryIcon key='update' color='warning' />, 'warning']
+ if(action === 'auto saved')
+ return [<HistoryIcon key='auto-save' color='primary' />, 'primary']
  if(action === 'saved_to_collection')
  return [<RepoIcon key='collection' selected noTooltip />, 'primary']
  if(action === 'opened')
@@ -108,12 +110,14 @@ const ProjectLogs = ({onClose, logs, project}) => {
  <strong key={1} />,
  ]}
  values={{
- created_by: project.created_by || '',
+ created_by: log.user || project.created_by || '',
  owner: project.owner ? `${project.owner_type}:${project.owner}` : '',
  }}
  />
  }
 
+ if(log?.action?.toLowerCase() === 'auto saved')
+ return log.description || t('map_project.auto_saved_changes')
  if(log.description)
  return log.description
  return startCase(log.action)