Sutra | Portfolio

We recently enhanced our similar companies feature by adding the ability to delete first-order similar companies and made several UI improvements. This update gives users more control over their company relationships while improving the overall user experience.

Key Changes

Delete Functionality

The most significant addition is the ability to delete first-order similar companies. We've implemented this carefully to ensure that:

Only first-degree similar companies can be deleted
Deletion happens one company at a time
The UI updates immediately while the backend processes the deletion
Users receive feedback via a snackbar notification

UI Improvements

We've made several visual enhancements:

The plus icon no longer appears for first-degree similar companies
Updated button hover states for both plus and delete icons
Improved the reload button styling with better spacing and color scheme
Reorganized the similar companies layout using a new SimilarCompaniesBox component

Code Architecture Updates

State Management

We introduced new state management features:

 
tsx
// New reactive variable for tracking reload state
export const similarCompanyReload = makeVar<boolean>(false)

// Local state for tracking deleted companies
const [deletedCompanyIds, setDeletedCompanyIds] = useState<Set<string>>(
	new Set(),
)

Delete Operation Implementation

We added a new GraphQL mutation for removing similar companies:

 
tsx
mutation removeSimilarCompany($companyId: UUID!, $similarCompanyId: UUID!) {
	removeSimilarCompany(
		companyId: $companyId
		similarCompanyId: $similarCompanyId
	) {
		id
	}
}

The deletion process includes optimistic updates to provide immediate feedback:

 
tsx
const handleDeleteSimilarCompanies = useCallback(
	(companyIdGiven: string) => {
		// Show notification
		snackState({
			message: 'Deleting similar company',
			severity: 'info',
			open: true,
			autoHideDuration: 10000,
		})

		// Update local state
		setDeletedCompanyIds(prev => new Set([...prev, companyIdGiven]))

		// Filter the companies list
		if (similarCompaniesReactive) {
			const filteredCompanies = similarCompaniesReactive.filter(
				company =>
					company.id !== companyIdGiven && company.tracxnId !== companyIdGiven,
			)
			similarCompanies(filteredCompanies)
		}

		// Call the backend
		removeSimilarCompany(companyId, companyIdGiven)
	},
	[removeSimilarCompany, companyID, similarCompaniesReactive],
)

Visual Components

The delete button appears as a trash icon for first-degree similar companies:

 
tsx
{degree === 1 ? (
  <DegreeButton
    onClick={(e) => {
      e.stopPropagation()
      handleDeleteSimilarCompanies(company.id)
    }}
  >
    <ThinTrash2 />
  </DegreeButton>
) : null}

Testing Considerations

The implementation includes several key testing scenarios:

Verifying that delete operations only work on first-degree similar companies
Ensuring the UI updates immediately after deletion
Confirming that the backend successfully processes the deletion
Testing the notification system for user feedback
Verifying that the company list updates correctly after deletion

Next Steps

While this update significantly improves the similar companies feature, there are a few potential enhancements we could consider:

Batch deletion capability
Undo deletion functionality
Additional filtering options for similar companies
Enhanced visual feedback during deletion operations

These changes provide users with more control over their similar companies while maintaining a clean and intuitive interface.

Adding Delete Capability to Similar Companies Feature