refresh edited insights panel on change (#10180)

* refresh edited insights panel on change

* move api simpleHash to shared utils getSimpleHash

* Simply reactivity fix for time-series

* Remove unused import

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

api/src/utils/get-default-index-name.ts

@@ -1,5 +1,4 @@
-import { simpleHash } from './get-simple-hash';
-
+import { getSimpleHash } from '@directus/shared/utils';
 /**
  * Generate an index name for a given collection + fields combination.
  *
@@ -20,7 +19,7 @@ export function getDefaultIndexName(
 
 	if (indexName.length <= 60) return indexName;
 
-	const suffix = `__${simpleHash(indexName)}_${type}`;
+	const suffix = `__${getSimpleHash(indexName)}_${type}`;
 	const prefix = indexName.substring(0, 60 - suffix.length);
 
 	return `${prefix}${suffix}`;

app/src/panels/time-series/time-series.vue

@@ -8,7 +8,7 @@ import api from '@/api';
 import ApexCharts from 'apexcharts';
 import { adjustDate } from '@/utils/adjust-date';
 import { useI18n } from 'vue-i18n';
-import { isEqual, isNil } from 'lodash';
+import { isNil } from 'lodash';
 import { useFieldsStore } from '@/stores';
 import { Filter } from '@directus/shared/types';
 import { abbreviateNumber } from '@/utils/abbreviate-number';
@@ -111,13 +111,11 @@ export default defineComponent({
 		});
 
 		watch(
-			[() => props, () => props.showHeader, () => props.height],
-			(newVal, oldVal) => {
-				if (isEqual(newVal, oldVal) === false) {
-					fetchData();
-					chart.value?.destroy();
-					setupChart();
-				}
+			() => props,
+			() => {
+				fetchData();
+				chart.value?.destroy();
+				setupChart();
 			},
 			{ deep: true }
 		);

packages/shared/src/utils/get-simple-hash.test.ts

@@ -0,0 +1,11 @@
+import { getSimpleHash } from './get-simple-hash';
+
+describe('getSimpleHash', () => {
+	it('returns "364492" for string "test"', () => {
+		expect(getSimpleHash('test')).toBe('364492');
+	});
+
+	it('returns "28cb67ba" for stringified object "{ key: \'value\' }"', () => {
+		expect(getSimpleHash(JSON.stringify({ key: 'value' }))).toBe('28cb67ba');
+	});
+});

api/src/utils/get-simple-hash.ts → packages/shared/src/utils/get-simple-hash.ts

@@ -2,7 +2,7 @@
  * Generate a simple short hash for a given string
  * This is not cryptographically secure in any way, and has a high chance of collision
  */
-export function simpleHash(str: string) {
+export function getSimpleHash(str: string) {
 	let hash = 0;
 
 	for (let i = 0; i < str.length; hash &= hash) {

packages/shared/src/utils/index.ts

@@ -6,6 +6,7 @@ export * from './get-collection-type';
 export * from './get-fields-from-template';
 export * from './get-filter-operators-for-type';
 export * from './get-relation-type';
+export * from './get-simple-hash';
 export * from './is-dynamic-variable';
 export * from './is-extension';
 export * from './merge-filters';