+
);
- return
+ return (
+
+
+
+ );
};
-
diff --git a/packages/components/src/components/LineChart.tsx b/packages/components/src/components/LineChart.tsx
index 278a1e3bb..275ed57f6 100644
--- a/packages/components/src/components/LineChart.tsx
+++ b/packages/components/src/components/LineChart.tsx
@@ -1,10 +1,19 @@
+import { useEffect, useState } from 'react';
+import LoadingSpinner from './LoadingSpinner';
import { VegaLite } from './VegaLite';
+import loadData from '../lib/loadData';
+
+type AxisType = 'quantitative' | 'temporal';
+type TimeUnit = 'year' | undefined; // or ...
export type LineChartProps = {
data: Array
> | string | { x: string; y: number }[];
title?: string;
xAxis?: string;
+ xAxisType?: AxisType;
+ xAxisTimeUnit: TimeUnit;
yAxis?: string;
+ yAxisType?: AxisType;
fullWidth?: boolean;
};
@@ -13,15 +22,16 @@ export function LineChart({
fullWidth = false,
title = '',
xAxis = 'x',
+ xAxisType = 'temporal',
+ xAxisTimeUnit = 'year', // TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
yAxis = 'y',
+ yAxisType = 'quantitative',
}: LineChartProps) {
- var tmp = data;
- if (Array.isArray(data)) {
- tmp = data.map((r) => {
- return { x: r[0], y: r[1] };
- });
- }
- const vegaData = { table: tmp };
+ const [isLoading, setIsLoading] = useState(false);
+
+ // By default, assumes data is an Array...
+ const [specData, setSpecData] = useState({ name: 'table' });
+
const spec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
title,
@@ -33,9 +43,7 @@ export function LineChart({
strokeWidth: 1,
tooltip: true,
},
- data: {
- name: 'table',
- },
+ data: specData,
selection: {
grid: {
type: 'interval',
@@ -45,19 +53,44 @@ export function LineChart({
encoding: {
x: {
field: xAxis,
- timeUnit: 'year',
- type: 'temporal',
+ timeUnit: xAxisTimeUnit,
+ type: xAxisType,
},
y: {
field: yAxis,
- type: 'quantitative',
+ type: yAxisType,
},
},
- };
- if (typeof data === 'string') {
- spec.data = { url: data } as any;
- return ;
+ } as any;
+
+ useEffect(() => {
+ // If data is string, assume it's a URL
+ if (typeof data === 'string') {
+ setIsLoading(true);
+
+ // Manualy loading the data allows us to do other kinds
+ // of stuff later e.g. load a file partially
+ loadData(data).then((res: any) => {
+ setSpecData({ values: res, format: { type: 'csv' } });
+ setIsLoading(false);
+ });
+ }
+ }, []);
+
+ var vegaData = {};
+ if (Array.isArray(data)) {
+ var dataObj;
+ dataObj = data.map((r) => {
+ return { x: r[0], y: r[1] };
+ });
+ vegaData = { table: dataObj };
}
- return ;
+ return isLoading ? (
+
+
+
+ ) : (
+
+ );
}
diff --git a/packages/components/src/components/LoadingSpinner.tsx b/packages/components/src/components/LoadingSpinner.tsx
new file mode 100644
index 000000000..e2654a126
--- /dev/null
+++ b/packages/components/src/components/LoadingSpinner.tsx
@@ -0,0 +1,23 @@
+export default function LoadingSpinner() {
+ return (
+
+ );
+}
diff --git a/packages/components/src/components/Table.tsx b/packages/components/src/components/Table.tsx
index 5e261e790..c069273c3 100644
--- a/packages/components/src/components/Table.tsx
+++ b/packages/components/src/components/Table.tsx
@@ -23,6 +23,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import parseCsv from '../lib/parseCsv';
import DebouncedInput from './DebouncedInput';
import loadData from '../lib/loadData';
+import LoadingSpinner from './LoadingSpinner';
export type TableProps = {
data?: Array<{ [key: string]: number | string }>;
@@ -39,6 +40,8 @@ export const Table = ({
url = '',
fullWidth = false,
}: TableProps) => {
+ const [isLoading, setIsLoading] = useState(false);
+
if (csv) {
const out = parseCsv(csv);
ogData = out.rows;
@@ -77,15 +80,22 @@ export const Table = ({
useEffect(() => {
if (url) {
+ setIsLoading(true);
+ // TODO: exception handling. What if the file doesn't exist? What if fetching was not possible?
loadData(url).then((data) => {
const { rows, fields } = parseCsv(data);
setData(rows);
setCols(fields);
+ setIsLoading(false);
});
}
}, [url]);
- return (
+ return isLoading ? (
+
+
+
+ ) : (
=this.B&&(z||!j[k])){var o=L(w,n,H),f="";switch(this.G){case"full":if(3o;g--)if(g-o>=this.B){var m=L(w,n,H,r,o);f=k.substring(o,g),M(this,j,f,m,e,s)}break}case"reverse":if(2=this.B&&M(this,j,f,L(w,n,H,r,g),e,s);f=""}case"forward":if(1=this.B&&M(this,j,f,o,e,s);break}default:if(this.C&&(o=Math.min(o/this.C(i,k,H)|0,w-1)),M(this,j,k,o,e,s),z&&1=this.B&&!r[k]){r[k]=1;const X=this.l&&k>o;M(this,A,X?o:k,L(f+(n/2>f?0:1),n,H,g-1,m-1),e,s,X?k:o)}}}}}this.m||(this.register[e]=1)}}return this};function L(e,i,s,n,r){return s&&1=this.B&&!s[w])if(this.s||o||this.map[w])m[z++]=w,s[w]=1;else return n;e=m,r=e.length}if(!r)return n;i||(i=100),g=this.depth&&1=n))));w++);if(j){if(o)return ta(m,n,0);i[i.length]=m;return}}return!s&&m}function ta(e,i,s){return e=e.length===1?e[0]:[].concat.apply([],e),s||e.length>i?e.slice(s,s+i):e}function ua(e,i,s,n){return s?(n=n&&i>s,e=(e=e[n?i:s])&&e[n?s:i]):e=e[i],e}t.contain=function(e){return!!this.register[e]},t.update=function(e,i){return this.remove(e).add(e,i)},t.remove=function(e,i){const s=this.register[e];if(s){if(this.m)for(let n=0,r;ni||s)&&(r=r.slice(s,s+i)),n&&(r=za.call(this,r)),{tag:e,result:r}}function za(e){const i=Array(e.length);for(let s=0,n;se.type==="checkbox",isDateObject=e=>e instanceof Date,isNullOrUndefined=e=>e==null;const isObjectType=e=>typeof e=="object";var isObject=e=>!isNullOrUndefined(e)&&!Array.isArray(e)&&isObjectType(e)&&!isDateObject(e),getEventValue=e=>isObject(e)&&e.target?isCheckBoxInput(e.target)?e.target.checked:e.target.value:e,getNodeParentName=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,isNameInFieldArray=(e,i)=>e.has(getNodeParentName(i)),isPlainObject=e=>{const i=e.constructor&&e.constructor.prototype;return isObject(i)&&i.hasOwnProperty("isPrototypeOf")},isWeb=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function cloneObject(e){let i;const s=Array.isArray(e);if(e instanceof Date)i=new Date(e);else if(e instanceof Set)i=new Set(e);else if(!(isWeb&&(e instanceof Blob||e instanceof FileList))&&(s||isObject(e)))if(i=s?[]:{},!Array.isArray(e)&&!isPlainObject(e))i=e;else for(const n in e)i[n]=cloneObject(e[n]);else return e;return i}var compact=e=>Array.isArray(e)?e.filter(Boolean):[],isUndefined=e=>e===void 0,get=(e,i,s)=>{if(!i||!isObject(e))return s;const n=compact(i.split(/[,[\].]+?/)).reduce((r,o)=>isNullOrUndefined(r)?r:r[o],e);return isUndefined(n)||n===e?isUndefined(e[i])?s:e[i]:n};const EVENTS={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},VALIDATION_MODE={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},INPUT_VALIDATION_RULES={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};React.createContext(null);var getProxyFormState=(e,i,s,n=!0)=>{const r={defaultValues:i._defaultValues};for(const o in e)Object.defineProperty(r,o,{get:()=>{const f=o;return i._proxyFormState[f]!==VALIDATION_MODE.all&&(i._proxyFormState[f]=!n||VALIDATION_MODE.all),s&&(s[f]=!0),e[f]}});return r},isEmptyObject=e=>isObject(e)&&!Object.keys(e).length,shouldRenderFormState=(e,i,s,n)=>{s(e);const{name:r,...o}=e;return isEmptyObject(o)||Object.keys(o).length>=Object.keys(i).length||Object.keys(o).find(f=>i[f]===(!n||VALIDATION_MODE.all))},convertToArrayPayload=e=>Array.isArray(e)?e:[e];function useSubscribe(e){const i=React.useRef(e);i.current=e,React.useEffect(()=>{const s=!e.disabled&&i.current.subject&&i.current.subject.subscribe({next:i.current.next});return()=>{s&&s.unsubscribe()}},[e.disabled])}var isString=e=>typeof e=="string",generateWatchOutput=(e,i,s,n,r)=>isString(e)?(n&&i.watch.add(e),get(s,e,r)):Array.isArray(e)?e.map(o=>(n&&i.watch.add(o),get(s,o))):(n&&(i.watchAll=!0),s),isKey=e=>/^\w*$/.test(e),stringToPath=e=>compact(e.replace(/["|']|\]/g,"").split(/\.|\[/));function set(e,i,s){let n=-1;const r=isKey(i)?[i]:stringToPath(i),o=r.length,f=o-1;for(;++ni?{...s[e],types:{...s[e]&&s[e].types?s[e].types:{},[n]:r||!0}}:{};const focusFieldBy=(e,i,s)=>{for(const n of s||Object.keys(e)){const r=get(e,n);if(r){const{_f:o,...f}=r;if(o&&i(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else isObject(f)&&focusFieldBy(f,i)}}};var getValidationModes=e=>({isOnSubmit:!e||e===VALIDATION_MODE.onSubmit,isOnBlur:e===VALIDATION_MODE.onBlur,isOnChange:e===VALIDATION_MODE.onChange,isOnAll:e===VALIDATION_MODE.all,isOnTouch:e===VALIDATION_MODE.onTouched}),isWatched=(e,i,s)=>!s&&(i.watchAll||i.watch.has(e)||[...i.watch].some(n=>e.startsWith(n)&&/^\.\w+/.test(e.slice(n.length)))),updateFieldArrayRootError=(e,i,s)=>{const n=compact(get(e,s));return set(n,"root",i[s]),set(e,s,n),e},isBoolean=e=>typeof e=="boolean",isFileInput=e=>e.type==="file",isFunction=e=>typeof e=="function",isHTMLElement=e=>{if(!isWeb)return!1;const i=e?e.ownerDocument:0;return e instanceof(i&&i.defaultView?i.defaultView.HTMLElement:HTMLElement)},isMessage=e=>isString(e),isRadioInput=e=>e.type==="radio",isRegex=e=>e instanceof RegExp;const defaultResult={value:!1,isValid:!1},validResult={value:!0,isValid:!0};var getCheckboxValue=e=>{if(Array.isArray(e)){if(e.length>1){const i=e.filter(s=>s&&s.checked&&!s.disabled).map(s=>s.value);return{value:i,isValid:!!i.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!isUndefined(e[0].attributes.value)?isUndefined(e[0].value)||e[0].value===""?validResult:{value:e[0].value,isValid:!0}:validResult:defaultResult}return defaultResult};const defaultReturn={isValid:!1,value:null};var getRadioValue=e=>Array.isArray(e)?e.reduce((i,s)=>s&&s.checked&&!s.disabled?{isValid:!0,value:s.value}:i,defaultReturn):defaultReturn;function getValidateError(e,i,s="validate"){if(isMessage(e)||Array.isArray(e)&&e.every(isMessage)||isBoolean(e)&&!e)return{type:s,message:isMessage(e)?e:"",ref:i}}var getValueAndMessage=e=>isObject(e)&&!isRegex(e)?e:{value:e,message:""},validateField=async(e,i,s,n,r)=>{const{ref:o,refs:f,required:g,maxLength:m,minLength:A,min:j,max:z,pattern:w,validate:H,name:k,valueAsNumber:X,mount:ae,disabled:ue}=e._f,q=get(i,k);if(!ae||ue)return{};const te=f?f[0]:o,oe=ee=>{n&&te.reportValidity&&(te.setCustomValidity(isBoolean(ee)?"":ee||""),te.reportValidity())},ie={},pe=isRadioInput(o),fe=isCheckBoxInput(o),xe=pe||fe,de=(X||isFileInput(o))&&isUndefined(o.value)&&isUndefined(q)||isHTMLElement(o)&&o.value===""||q===""||Array.isArray(q)&&!q.length,me=appendErrors.bind(null,k,s,ie),ge=(ee,$,ne,le=INPUT_VALIDATION_RULES.maxLength,ce=INPUT_VALIDATION_RULES.minLength)=>{const he=ee?$:ne;ie[k]={type:ee?le:ce,message:he,ref:o,...me(ee?le:ce,he)}};if(r?!Array.isArray(q)||!q.length:g&&(!xe&&(de||isNullOrUndefined(q))||isBoolean(q)&&!q||fe&&!getCheckboxValue(f).isValid||pe&&!getRadioValue(f).isValid)){const{value:ee,message:$}=isMessage(g)?{value:!!g,message:g}:getValueAndMessage(g);if(ee&&(ie[k]={type:INPUT_VALIDATION_RULES.required,message:$,ref:te,...me(INPUT_VALIDATION_RULES.required,$)},!s))return oe($),ie}if(!de&&(!isNullOrUndefined(j)||!isNullOrUndefined(z))){let ee,$;const ne=getValueAndMessage(z),le=getValueAndMessage(j);if(!isNullOrUndefined(q)&&!isNaN(q)){const ce=o.valueAsNumber||q&&+q;isNullOrUndefined(ne.value)||(ee=ce>ne.value),isNullOrUndefined(le.value)||($=cenew Date(new Date().toDateString()+" "+Ae),ve=o.type=="time",be=o.type=="week";isString(ne.value)&&q&&(ee=ve?he(q)>he(ne.value):be?q>ne.value:ce>new Date(ne.value)),isString(le.value)&&q&&($=ve?he(q)+ee.value,le=!isNullOrUndefined($.value)&&q.length<+$.value;if((ne||le)&&(ge(ne,ee.message,$.message),!s))return oe(ie[k].message),ie}if(w&&!de&&isString(q)){const{value:ee,message:$}=getValueAndMessage(w);if(isRegex(ee)&&!q.match(ee)&&(ie[k]={type:INPUT_VALIDATION_RULES.pattern,message:$,ref:o,...me(INPUT_VALIDATION_RULES.pattern,$)},!s))return oe($),ie}if(H){if(isFunction(H)){const ee=await H(q,i),$=getValidateError(ee,te);if($&&(ie[k]={...$,...me(INPUT_VALIDATION_RULES.validate,$.message)},!s))return oe($.message),ie}else if(isObject(H)){let ee={};for(const $ in H){if(!isEmptyObject(ee)&&!s)break;const ne=getValidateError(await H[$](q,i),te,$);ne&&(ee={...ne,...me($,ne.message)},oe(ne.message),s&&(ie[k]=ee))}if(!isEmptyObject(ee)&&(ie[k]={ref:te,...ee},!s))return ie}}return oe(!0),ie};function baseGet(e,i){const s=i.slice(0,-1).length;let n=0;for(;n{for(const o of e)o.next&&o.next(r)},subscribe:r=>(e.push(r),{unsubscribe:()=>{e=e.filter(o=>o!==r)}}),unsubscribe:()=>{e=[]}}}var isPrimitive=e=>isNullOrUndefined(e)||!isObjectType(e);function deepEqual(e,i){if(isPrimitive(e)||isPrimitive(i))return e===i;if(isDateObject(e)&&isDateObject(i))return e.getTime()===i.getTime();const s=Object.keys(e),n=Object.keys(i);if(s.length!==n.length)return!1;for(const r of s){const o=e[r];if(!n.includes(r))return!1;if(r!=="ref"){const f=i[r];if(isDateObject(o)&&isDateObject(f)||isObject(o)&&isObject(f)||Array.isArray(o)&&Array.isArray(f)?!deepEqual(o,f):o!==f)return!1}}return!0}var isMultipleSelect=e=>e.type==="select-multiple",isRadioOrCheckbox=e=>isRadioInput(e)||isCheckBoxInput(e),live=e=>isHTMLElement(e)&&e.isConnected,objectHasFunction=e=>{for(const i in e)if(isFunction(e[i]))return!0;return!1};function markFieldsDirty(e,i={}){const s=Array.isArray(e);if(isObject(e)||s)for(const n in e)Array.isArray(e[n])||isObject(e[n])&&!objectHasFunction(e[n])?(i[n]=Array.isArray(e[n])?[]:{},markFieldsDirty(e[n],i[n])):isNullOrUndefined(e[n])||(i[n]=!0);return i}function getDirtyFieldsFromDefaultValues(e,i,s){const n=Array.isArray(e);if(isObject(e)||n)for(const r in e)Array.isArray(e[r])||isObject(e[r])&&!objectHasFunction(e[r])?isUndefined(i)||isPrimitive(s[r])?s[r]=Array.isArray(e[r])?markFieldsDirty(e[r],[]):{...markFieldsDirty(e[r])}:getDirtyFieldsFromDefaultValues(e[r],isNullOrUndefined(i)?{}:i[r],s[r]):s[r]=!deepEqual(e[r],i[r]);return s}var getDirtyFields=(e,i)=>getDirtyFieldsFromDefaultValues(e,i,markFieldsDirty(i)),getFieldValueAs=(e,{valueAsNumber:i,valueAsDate:s,setValueAs:n})=>isUndefined(e)?e:i?e===""?NaN:e&&+e:s&&isString(e)?new Date(e):n?n(e):e;function getFieldValue(e){const i=e.ref;if(!(e.refs?e.refs.every(s=>s.disabled):i.disabled))return isFileInput(i)?i.files:isRadioInput(i)?getRadioValue(e.refs).value:isMultipleSelect(i)?[...i.selectedOptions].map(({value:s})=>s):isCheckBoxInput(i)?getCheckboxValue(e.refs).value:getFieldValueAs(isUndefined(i.value)?e.ref.value:i.value,e)}var getResolverOptions=(e,i,s,n)=>{const r={};for(const o of e){const f=get(i,o);f&&set(r,o,f._f)}return{criteriaMode:s,names:[...e],fields:r,shouldUseNativeValidation:n}},getRuleValue=e=>isUndefined(e)?e:isRegex(e)?e.source:isObject(e)?isRegex(e.value)?e.value.source:e.value:e,hasValidation=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function schemaErrorLookup(e,i,s){const n=get(e,s);if(n||isKey(s))return{error:n,name:s};const r=s.split(".");for(;r.length;){const o=r.join("."),f=get(i,o),g=get(e,o);if(f&&!Array.isArray(f)&&s!==o)return{name:s};if(g&&g.type)return{name:o,error:g};r.pop()}return{name:s}}var skipValidation=(e,i,s,n,r)=>r.isOnAll?!1:!s&&r.isOnTouch?!(i||e):(s?n.isOnBlur:r.isOnBlur)?!e:(s?n.isOnChange:r.isOnChange)?e:!0,unsetEmptyArray=(e,i)=>!compact(get(e,i)).length&&unset(e,i);const defaultOptions={mode:VALIDATION_MODE.onSubmit,reValidateMode:VALIDATION_MODE.onChange,shouldFocusError:!0};function createFormControl(e={},i){let s={...defaultOptions,...e},n={submitCount:0,isDirty:!1,isLoading:isFunction(s.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},r={},o=isObject(s.defaultValues)||isObject(s.values)?cloneObject(s.defaultValues||s.values)||{}:{},f=s.shouldUnregister?{}:cloneObject(o),g={action:!1,mount:!1,watch:!1},m={mount:new Set,unMount:new Set,array:new Set,watch:new Set},A,j=0;const z={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},w={values:createSubject(),array:createSubject(),state:createSubject()},H=e.resetOptions&&e.resetOptions.keepDirtyValues,k=getValidationModes(s.mode),X=getValidationModes(s.reValidateMode),ae=s.criteriaMode===VALIDATION_MODE.all,ue=l=>h=>{clearTimeout(j),j=setTimeout(l,h)},q=async l=>{if(z.isValid||l){const h=s.resolver?isEmptyObject((await de()).errors):await ge(r,!0);h!==n.isValid&&w.state.next({isValid:h})}},te=l=>z.isValidating&&w.state.next({isValidating:l}),oe=(l,h=[],p,R,_=!0,y=!0)=>{if(R&&p){if(g.action=!0,y&&Array.isArray(get(r,l))){const B=p(get(r,l),R.argA,R.argB);_&&set(r,l,B)}if(y&&Array.isArray(get(n.errors,l))){const B=p(get(n.errors,l),R.argA,R.argB);_&&set(n.errors,l,B),unsetEmptyArray(n.errors,l)}if(z.touchedFields&&y&&Array.isArray(get(n.touchedFields,l))){const B=p(get(n.touchedFields,l),R.argA,R.argB);_&&set(n.touchedFields,l,B)}z.dirtyFields&&(n.dirtyFields=getDirtyFields(o,f)),w.state.next({name:l,isDirty:$(l,h),dirtyFields:n.dirtyFields,errors:n.errors,isValid:n.isValid})}else set(f,l,h)},ie=(l,h)=>{set(n.errors,l,h),w.state.next({errors:n.errors})},pe=(l,h,p,R)=>{const _=get(r,l);if(_){const y=get(f,l,isUndefined(p)?get(o,l):p);isUndefined(y)||R&&R.defaultChecked||h?set(f,l,h?y:getFieldValue(_._f)):ce(l,y),g.mount&&q()}},fe=(l,h,p,R,_)=>{let y=!1,B=!1;const se={name:l};if(!p||R){z.isDirty&&(B=n.isDirty,n.isDirty=se.isDirty=$(),y=B!==se.isDirty);const re=deepEqual(get(o,l),h);B=get(n.dirtyFields,l),re?unset(n.dirtyFields,l):set(n.dirtyFields,l,!0),se.dirtyFields=n.dirtyFields,y=y||z.dirtyFields&&B!==!re}if(p){const re=get(n.touchedFields,l);re||(set(n.touchedFields,l,p),se.touchedFields=n.touchedFields,y=y||z.touchedFields&&re!==p)}return y&&_&&w.state.next(se),y?se:{}},xe=(l,h,p,R)=>{const _=get(n.errors,l),y=z.isValid&&isBoolean(h)&&n.isValid!==h;if(e.delayError&&p?(A=ue(()=>ie(l,p)),A(e.delayError)):(clearTimeout(j),A=null,p?set(n.errors,l,p):unset(n.errors,l)),(p?!deepEqual(_,p):_)||!isEmptyObject(R)||y){const B={...R,...y&&isBoolean(h)?{isValid:h}:{},errors:n.errors,name:l};n={...n,...B},w.state.next(B)}te(!1)},de=async l=>s.resolver(f,s.context,getResolverOptions(l||m.mount,r,s.criteriaMode,s.shouldUseNativeValidation)),me=async l=>{const{errors:h}=await de();if(l)for(const p of l){const R=get(h,p);R?set(n.errors,p,R):unset(n.errors,p)}else n.errors=h;return h},ge=async(l,h,p={valid:!0})=>{for(const R in l){const _=l[R];if(_){const{_f:y,...B}=_;if(y){const se=m.array.has(y.name),re=await validateField(_,f,ae,s.shouldUseNativeValidation&&!h,se);if(re[y.name]&&(p.valid=!1,h))break;!h&&(get(re,y.name)?se?updateFieldArrayRootError(n.errors,re,y.name):set(n.errors,y.name,re[y.name]):unset(n.errors,y.name))}B&&await ge(B,h,p)}}return p.valid},ee=()=>{for(const l of m.unMount){const h=get(r,l);h&&(h._f.refs?h._f.refs.every(p=>!live(p)):!live(h._f.ref))&&ke(l)}m.unMount=new Set},$=(l,h)=>(l&&h&&set(f,l,h),!deepEqual(we(),o)),ne=(l,h,p)=>generateWatchOutput(l,m,{...g.mount?f:isUndefined(h)?o:isString(l)?{[l]:h}:h},p,h),le=l=>compact(get(g.mount?f:o,l,e.shouldUnregister?get(o,l,[]):[])),ce=(l,h,p={})=>{const R=get(r,l);let _=h;if(R){const y=R._f;y&&(!y.disabled&&set(f,l,getFieldValueAs(h,y)),_=isHTMLElement(y.ref)&&isNullOrUndefined(h)?"":h,isMultipleSelect(y.ref)?[...y.ref.options].forEach(B=>B.selected=_.includes(B.value)):y.refs?isCheckBoxInput(y.ref)?y.refs.length>1?y.refs.forEach(B=>(!B.defaultChecked||!B.disabled)&&(B.checked=Array.isArray(_)?!!_.find(se=>se===B.value):_===B.value)):y.refs[0]&&(y.refs[0].checked=!!_):y.refs.forEach(B=>B.checked=B.value===_):isFileInput(y.ref)?y.ref.value="":(y.ref.value=_,y.ref.type||w.values.next({name:l,values:{...f}})))}(p.shouldDirty||p.shouldTouch)&&fe(l,_,p.shouldTouch,p.shouldDirty,!0),p.shouldValidate&&Ae(l)},he=(l,h,p)=>{for(const R in h){const _=h[R],y=`${l}.${R}`,B=get(r,y);(m.array.has(l)||!isPrimitive(_)||B&&!B._f)&&!isDateObject(_)?he(y,_,p):ce(y,_,p)}},ve=(l,h,p={})=>{const R=get(r,l),_=m.array.has(l),y=cloneObject(h);set(f,l,y),_?(w.array.next({name:l,values:{...f}}),(z.isDirty||z.dirtyFields)&&p.shouldDirty&&w.state.next({name:l,dirtyFields:getDirtyFields(o,f),isDirty:$(l,y)})):R&&!R._f&&!isNullOrUndefined(y)?he(l,y,p):ce(l,y,p),isWatched(l,m)&&w.state.next({...n}),w.values.next({name:l,values:{...f}}),!g.mount&&i()},be=async l=>{const h=l.target;let p=h.name,R=!0;const _=get(r,p),y=()=>h.type?getFieldValue(_._f):getEventValue(l);if(_){let B,se;const re=y(),ye=l.type===EVENTS.BLUR||l.type===EVENTS.FOCUS_OUT,ze=!hasValidation(_._f)&&!s.resolver&&!get(n.errors,p)&&!_._f.deps||skipValidation(ye,get(n.touchedFields,p),n.isSubmitted,X,k),_e=isWatched(p,m,ye);set(f,p,re),ye?(_._f.onBlur&&_._f.onBlur(l),A&&A(0)):_._f.onChange&&_._f.onChange(l);const Oe=fe(p,re,ye,!1),qe=!isEmptyObject(Oe)||_e;if(!ye&&w.values.next({name:p,type:l.type,values:{...f}}),ze)return z.isValid&&q(),qe&&w.state.next({name:p,..._e?{}:Oe});if(!ye&&_e&&w.state.next({...n}),te(!0),s.resolver){const{errors:Ve}=await de([p]),Ke=schemaErrorLookup(n.errors,r,p),Ie=schemaErrorLookup(Ve,r,Ke.name||p);B=Ie.error,p=Ie.name,se=isEmptyObject(Ve)}else B=(await validateField(_,f,ae,s.shouldUseNativeValidation))[p],R=isNaN(re)||re===get(f,p,re),R&&(B?se=!1:z.isValid&&(se=await ge(r,!0)));R&&(_._f.deps&&Ae(_._f.deps),xe(p,se,B,Oe))}},Ae=async(l,h={})=>{let p,R;const _=convertToArrayPayload(l);if(te(!0),s.resolver){const y=await me(isUndefined(l)?l:_);p=isEmptyObject(y),R=l?!_.some(B=>get(y,B)):p}else l?(R=(await Promise.all(_.map(async y=>{const B=get(r,y);return await ge(B&&B._f?{[y]:B}:B)}))).every(Boolean),!(!R&&!n.isValid)&&q()):R=p=await ge(r);return w.state.next({...!isString(l)||z.isValid&&p!==n.isValid?{}:{name:l},...s.resolver||!l?{isValid:p}:{},errors:n.errors,isValidating:!1}),h.shouldFocus&&!R&&focusFieldBy(r,y=>y&&get(n.errors,y),l?_:m.mount),R},we=l=>{const h={...o,...g.mount?f:{}};return isUndefined(l)?h:isString(l)?get(h,l):l.map(p=>get(h,p))},Fe=(l,h)=>({invalid:!!get((h||n).errors,l),isDirty:!!get((h||n).dirtyFields,l),isTouched:!!get((h||n).touchedFields,l),error:get((h||n).errors,l)}),je=l=>{l&&convertToArrayPayload(l).forEach(h=>unset(n.errors,h)),w.state.next({errors:l?n.errors:{}})},Ue=(l,h,p)=>{const R=(get(r,l,{_f:{}})._f||{}).ref;set(n.errors,l,{...h,ref:R}),w.state.next({name:l,errors:n.errors,isValid:!1}),p&&p.shouldFocus&&R&&R.focus&&R.focus()},Be=(l,h)=>isFunction(l)?w.values.subscribe({next:p=>l(ne(void 0,h),p)}):ne(l,h,!0),ke=(l,h={})=>{for(const p of l?convertToArrayPayload(l):m.mount)m.mount.delete(p),m.array.delete(p),h.keepValue||(unset(r,p),unset(f,p)),!h.keepError&&unset(n.errors,p),!h.keepDirty&&unset(n.dirtyFields,p),!h.keepTouched&&unset(n.touchedFields,p),!s.shouldUnregister&&!h.keepDefaultValue&&unset(o,p);w.values.next({values:{...f}}),w.state.next({...n,...h.keepDirty?{isDirty:$()}:{}}),!h.keepIsValid&&q()},Ce=(l,h={})=>{let p=get(r,l);const R=isBoolean(h.disabled);return set(r,l,{...p||{},_f:{...p&&p._f?p._f:{ref:{name:l}},name:l,mount:!0,...h}}),m.mount.add(l),p?R&&set(f,l,h.disabled?void 0:get(f,l,getFieldValue(p._f))):pe(l,!0,h.value),{...R?{disabled:h.disabled}:{},...s.shouldUseNativeValidation?{required:!!h.required,min:getRuleValue(h.min),max:getRuleValue(h.max),minLength:getRuleValue(h.minLength),maxLength:getRuleValue(h.maxLength),pattern:getRuleValue(h.pattern)}:{},name:l,onChange:be,onBlur:be,ref:_=>{if(_){Ce(l,h),p=get(r,l);const y=isUndefined(_.value)&&_.querySelectorAll&&_.querySelectorAll("input,select,textarea")[0]||_,B=isRadioOrCheckbox(y),se=p._f.refs||[];if(B?se.find(re=>re===y):y===p._f.ref)return;set(r,l,{_f:{...p._f,...B?{refs:[...se.filter(live),y,...Array.isArray(get(o,l))?[{}]:[]],ref:{type:y.type,name:l}}:{ref:y}}}),pe(l,!1,void 0,y)}else p=get(r,l,{}),p._f&&(p._f.mount=!1),(s.shouldUnregister||h.shouldUnregister)&&!(isNameInFieldArray(m.array,l)&&g.action)&&m.unMount.add(l)}}},De=()=>s.shouldFocusError&&focusFieldBy(r,l=>l&&get(n.errors,l),m.mount),We=(l,h)=>async p=>{p&&(p.preventDefault&&p.preventDefault(),p.persist&&p.persist());let R=cloneObject(f);if(w.state.next({isSubmitting:!0}),s.resolver){const{errors:_,values:y}=await de();n.errors=_,R=y}else await ge(r);unset(n.errors,"root"),isEmptyObject(n.errors)?(w.state.next({errors:{}}),await l(R,p)):(h&&await h({...n.errors},p),De(),setTimeout(De)),w.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:isEmptyObject(n.errors),submitCount:n.submitCount+1,errors:n.errors})},Je=(l,h={})=>{get(r,l)&&(isUndefined(h.defaultValue)?ve(l,get(o,l)):(ve(l,h.defaultValue),set(o,l,h.defaultValue)),h.keepTouched||unset(n.touchedFields,l),h.keepDirty||(unset(n.dirtyFields,l),n.isDirty=h.defaultValue?$(l,get(o,l)):$()),h.keepError||(unset(n.errors,l),z.isValid&&q()),w.state.next({...n}))},Le=(l,h={})=>{const p=l||o,R=cloneObject(p),_=l&&!isEmptyObject(l)?R:o;if(h.keepDefaultValues||(o=p),!h.keepValues){if(h.keepDirtyValues||H)for(const y of m.mount)get(n.dirtyFields,y)?set(_,y,get(f,y)):ve(y,get(_,y));else{if(isWeb&&isUndefined(l))for(const y of m.mount){const B=get(r,y);if(B&&B._f){const se=Array.isArray(B._f.refs)?B._f.refs[0]:B._f.ref;if(isHTMLElement(se)){const re=se.closest("form");if(re){re.reset();break}}}}r={}}f=e.shouldUnregister?h.keepDefaultValues?cloneObject(o):{}:R,w.array.next({values:{..._}}),w.values.next({values:{..._}})}m={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!g.mount&&i(),g.mount=!z.isValid||!!h.keepIsValid,g.watch=!!e.shouldUnregister,w.state.next({submitCount:h.keepSubmitCount?n.submitCount:0,isDirty:h.keepDirty?n.isDirty:!!(h.keepDefaultValues&&!deepEqual(l,o)),isSubmitted:h.keepIsSubmitted?n.isSubmitted:!1,dirtyFields:h.keepDirtyValues?n.dirtyFields:h.keepDefaultValues&&l?getDirtyFields(o,l):{},touchedFields:h.keepTouched?n.touchedFields:{},errors:h.keepErrors?n.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},Ee=(l,h)=>Le(isFunction(l)?l(f):l,h);return{control:{register:Ce,unregister:ke,getFieldState:Fe,_executeSchema:de,_getWatch:ne,_getDirty:$,_updateValid:q,_removeUnmounted:ee,_updateFieldArray:oe,_getFieldArray:le,_reset:Le,_resetDefaultValues:()=>isFunction(s.defaultValues)&&s.defaultValues().then(l=>{Ee(l,s.resetOptions),w.state.next({isLoading:!1})}),_updateFormState:l=>{n={...n,...l}},_subjects:w,_proxyFormState:z,get _fields(){return r},get _formValues(){return f},get _state(){return g},set _state(l){g=l},get _defaultValues(){return o},get _names(){return m},set _names(l){m=l},get _formState(){return n},set _formState(l){n=l},get _options(){return s},set _options(l){s={...s,...l}}},trigger:Ae,register:Ce,handleSubmit:We,watch:Be,setValue:ve,getValues:we,reset:Ee,resetField:Je,clearErrors:je,unregister:ke,setError:Ue,setFocus:(l,h={})=>{const p=get(r,l),R=p&&p._f;if(R){const _=R.refs?R.refs[0]:R.ref;_.focus&&(_.focus(),h.shouldSelect&&_.select())}},getFieldState:Fe}}function useForm(e={}){const i=React.useRef(),[s,n]=React.useState({isDirty:!1,isValidating:!1,isLoading:isFunction(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:isFunction(e.defaultValues)?void 0:e.defaultValues});i.current||(i.current={...createFormControl(e,()=>n(o=>({...o}))),formState:s});const r=i.current.control;return r._options=e,useSubscribe({subject:r._subjects.state,next:o=>{shouldRenderFormState(o,r._proxyFormState,r._updateFormState,!0)&&n({...r._formState})}}),React.useEffect(()=>{e.values&&!deepEqual(e.values,r._defaultValues)?r._reset(e.values,r._options.resetOptions):r._resetDefaultValues()},[e.values,r]),React.useEffect(()=>{r._state.mount||(r._updateValid(),r._state.mount=!0),r._state.watch&&(r._state.watch=!1,r._subjects.state.next({...r._formState})),r._removeUnmounted()}),i.current.formState=getProxyFormState(s,r),i.current}function Catalog({datasets:e,facets:i}){const[s,n]=reactExports.useState(""),r=new flexsearch_bundleExports.Index({tokenize:"full"});e.forEach(A=>r.add(A._id,Object.entries(A.metadata).reduce((j,z)=>j+" "+z[1].toString(),"")+" "+A.url_path));const o=i?i.reduce((A,j)=>{const z=e.reduce((w,H)=>{const k=H.metadata[j];return k?Array.isArray(k)?w.concat(k):w.concat([k]):w},[]);return A[j]={possibleValues:[...new Set(z)],selectedValue:null},A},{}):[],{register:f,watch:g}=useForm(o),m=e.filter(A=>s!==""?r.search(s).includes(A._id):!0).filter(A=>!g()||Object.keys(g()).length===0?!0:Object.entries(A.metadata).filter(z=>i.includes(z[0])).every(z=>g()[z[0]].selectedValue?z[1].includes(g()[z[0]].selectedValue):!0));return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(DebouncedInput,{value:s??"",onChange:A=>n(String(A)),className:"p-2 text-sm shadow border border-block mr-1",placeholder:"Search all datasets..."}),Object.entries(o).map(A=>jsxRuntimeExports.jsxs("select",{defaultValue:"",className:"p-2 ml-1 text-sm shadow border border-block",...f(A[0]+".selectedValue"),children:[jsxRuntimeExports.jsxs("option",{value:"",children:["Filter by ",A[0]]}),A[1].possibleValues.map(j=>jsxRuntimeExports.jsx("option",{className:"dark:bg-white dark:text-black",value:j,children:j},j))]},A[0])),jsxRuntimeExports.jsx("ul",{className:"mb-5 pl-6 mt-5 list-disc",children:m.map(A=>jsxRuntimeExports.jsx("li",{className:"py-2",children:jsxRuntimeExports.jsx("a",{className:"font-medium underline",href:A.url_path,children:A.metadata.title?A.metadata.title:A.url_path})},A._id))})]})}try{Catalog.displayName="Catalog",Catalog.__docgenInfo={description:"",displayName:"Catalog",props:{datasets:{defaultValue:null,description:"",name:"datasets",required:!0,type:{name:"any[]"}},facets:{defaultValue:null,description:"",name:"facets",required:!0,type:{name:"string[]"}}}}}catch(e){}const meta={title:"Components/Catalog",component:Catalog,tags:["autodocs"],argTypes:{datasets:{description:"Lists of datasets to be displayed in the list, will usually be automatically available"},facets:{description:"List of frontmatter fields that should be used as filters, needs to match exactly with the field name"}}},WithoutFacets={name:"Catalog without facets",args:{datasets:[{_id:"07026b22d49916754df1dc8ffb9ccd1c31878aae",url_path:"dataset-4",file_path:"content/dataset-4/index.md",metadata:{title:"Detecting Abusive Albanian","link-to-publication":"https://arxiv.org/abs/2107.13592","link-to-data":"https://doi.org/10.6084/m9.figshare.19333298.v1","task-description":"Hierarchical (offensive/not; untargeted/targeted; person/group/other)","details-of-task":"Detect and categorise abusive language in social media data","size-of-dataset":11874,"percentage-abusive":13.2,language:"Albanian","level-of-annotation":["Posts"],platform:["Instagram","Youtube"],medium:["Text"],reference:"Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592"}},{_id:"42c86cf3c4fbbab11d91c2a7d6dcb8f750bc4e19",url_path:"dataset-1",file_path:"content/dataset-1/index.md",metadata:{title:"AbuseEval v1.0","link-to-publication":"http://www.lrec-conf.org/proceedings/lrec2020/pdf/2020.lrec-1.760.pdf","link-to-data":"https://github.com/tommasoc80/AbuseEval","task-description":"Explicitness annotation of offensive and abusive content","details-of-task":"Enriched versions of the OffensEval/OLID dataset with the distinction of explicit/implicit offensive messages and the new dimension for abusive messages. Labels for offensive language: EXPLICIT, IMPLICT, NOT; Labels for abusive language: EXPLICIT, IMPLICT, NOTABU","size-of-dataset":14100,"percentage-abusive":20.75,language:"English","level-of-annotation":["Tweets"],platform:["Twitter"],medium:["Text"],reference:'Caselli, T., Basile, V., Jelena, M., Inga, K., and Michael, G. 2020. "I feel offended, don’t be abusive! implicit/explicit messages in offensive and abusive language". The 12th Language Resources and Evaluation Conference (pp. 6193-6202). European Language Resources Association.'}},{_id:"80001dd32a752421fdcc64e91fbd237dc31d6bb3",url_path:"dataset-2",file_path:"content/dataset-2/index.md",metadata:{title:"Abusive Language Detection on Arabic Social Media (Al Jazeera)","link-to-publication":"https://www.aclweb.org/anthology/W17-3008","link-to-data":"http://alt.qcri.org/~hmubarak/offensive/AJCommentsClassification-CF.xlsx","task-description":"Ternary (Obscene, Offensive but not obscene, Clean)","details-of-task":"Incivility","size-of-dataset":32e3,"percentage-abusive":.81,language:"Arabic","level-of-annotation":["Posts"],platform:["AlJazeera"],medium:["Text"],reference:"Mubarak, H., Darwish, K. and Magdy, W., 2017. Abusive Language Detection on Arabic Social Media. In: Proceedings of the First Workshop on Abusive Language Online. Vancouver, Canada: Association for Computational Linguistics, pp.52-56."}},{_id:"96649d05d8193f4333b10015af76c6562971bd8c",url_path:"dataset-3",file_path:"content/dataset-3/index.md",metadata:{title:"CoRAL: a Context-aware Croatian Abusive Language Dataset","link-to-publication":"https://aclanthology.org/2022.findings-aacl.21/","link-to-data":"https://github.com/shekharRavi/CoRAL-dataset-Findings-of-the-ACL-AACL-IJCNLP-2022","task-description":"Multi-class based on context dependency categories (CDC)","details-of-task":"Detectioning CDC from abusive comments","size-of-dataset":2240,"percentage-abusive":100,language:"Croatian","level-of-annotation":["Posts"],platform:["Posts"],medium:["Newspaper Comments"],reference:"Ravi Shekhar, Mladen Karan and Matthew Purver (2022). CoRAL: a Context-aware Croatian Abusive Language Dataset. Findings of the ACL: AACL-IJCNLP."}}]}},WithFacets={name:"Catalog with facets",args:{datasets:[{_id:"07026b22d49916754df1dc8ffb9ccd1c31878aae",url_path:"dataset-4",file_path:"content/dataset-4/index.md",metadata:{title:"Detecting Abusive Albanian","link-to-publication":"https://arxiv.org/abs/2107.13592","link-to-data":"https://doi.org/10.6084/m9.figshare.19333298.v1","task-description":"Hierarchical (offensive/not; untargeted/targeted; person/group/other)","details-of-task":"Detect and categorise abusive language in social media data","size-of-dataset":11874,"percentage-abusive":13.2,language:"Albanian","level-of-annotation":["Posts"],platform:["Instagram","Youtube"],medium:["Text"],reference:"Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592"}},{_id:"42c86cf3c4fbbab11d91c2a7d6dcb8f750bc4e19",url_path:"dataset-1",file_path:"content/dataset-1/index.md",metadata:{title:"AbuseEval v1.0","link-to-publication":"http://www.lrec-conf.org/proceedings/lrec2020/pdf/2020.lrec-1.760.pdf","link-to-data":"https://github.com/tommasoc80/AbuseEval","task-description":"Explicitness annotation of offensive and abusive content","details-of-task":"Enriched versions of the OffensEval/OLID dataset with the distinction of explicit/implicit offensive messages and the new dimension for abusive messages. Labels for offensive language: EXPLICIT, IMPLICT, NOT; Labels for abusive language: EXPLICIT, IMPLICT, NOTABU","size-of-dataset":14100,"percentage-abusive":20.75,language:"English","level-of-annotation":["Tweets"],platform:["Twitter"],medium:["Text"],reference:'Caselli, T., Basile, V., Jelena, M., Inga, K., and Michael, G. 2020. "I feel offended, don’t be abusive! implicit/explicit messages in offensive and abusive language". The 12th Language Resources and Evaluation Conference (pp. 6193-6202). European Language Resources Association.'}},{_id:"80001dd32a752421fdcc64e91fbd237dc31d6bb3",url_path:"dataset-2",file_path:"content/dataset-2/index.md",metadata:{title:"Abusive Language Detection on Arabic Social Media (Al Jazeera)","link-to-publication":"https://www.aclweb.org/anthology/W17-3008","link-to-data":"http://alt.qcri.org/~hmubarak/offensive/AJCommentsClassification-CF.xlsx","task-description":"Ternary (Obscene, Offensive but not obscene, Clean)","details-of-task":"Incivility","size-of-dataset":32e3,"percentage-abusive":.81,language:"Arabic","level-of-annotation":["Posts"],platform:["AlJazeera"],medium:["Text"],reference:"Mubarak, H., Darwish, K. and Magdy, W., 2017. Abusive Language Detection on Arabic Social Media. In: Proceedings of the First Workshop on Abusive Language Online. Vancouver, Canada: Association for Computational Linguistics, pp.52-56."}},{_id:"96649d05d8193f4333b10015af76c6562971bd8c",url_path:"dataset-3",file_path:"content/dataset-3/index.md",metadata:{title:"CoRAL: a Context-aware Croatian Abusive Language Dataset","link-to-publication":"https://aclanthology.org/2022.findings-aacl.21/","link-to-data":"https://github.com/shekharRavi/CoRAL-dataset-Findings-of-the-ACL-AACL-IJCNLP-2022","task-description":"Multi-class based on context dependency categories (CDC)","details-of-task":"Detectioning CDC from abusive comments","size-of-dataset":2240,"percentage-abusive":100,language:"Croatian","level-of-annotation":["Posts"],platform:["Posts"],medium:["Newspaper Comments"],reference:"Ravi Shekhar, Mladen Karan and Matthew Purver (2022). CoRAL: a Context-aware Croatian Abusive Language Dataset. Findings of the ACL: AACL-IJCNLP."}}],facets:["language","platform"]}};var Te,Ne,Se;WithoutFacets.parameters={...WithoutFacets.parameters,docs:{...(Te=WithoutFacets.parameters)==null?void 0:Te.docs,source:{originalSource:`{
- name: 'Catalog without facets',
- args: {
- datasets: [{
- _id: '07026b22d49916754df1dc8ffb9ccd1c31878aae',
- url_path: 'dataset-4',
- file_path: 'content/dataset-4/index.md',
- metadata: {
- title: 'Detecting Abusive Albanian',
- 'link-to-publication': 'https://arxiv.org/abs/2107.13592',
- 'link-to-data': 'https://doi.org/10.6084/m9.figshare.19333298.v1',
- 'task-description': 'Hierarchical (offensive/not; untargeted/targeted; person/group/other)',
- 'details-of-task': 'Detect and categorise abusive language in social media data',
- 'size-of-dataset': 11874,
- 'percentage-abusive': 13.2,
- language: 'Albanian',
- 'level-of-annotation': ['Posts'],
- platform: ['Instagram', 'Youtube'],
- medium: ['Text'],
- reference: 'Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592'
- }
- }, {
- _id: '42c86cf3c4fbbab11d91c2a7d6dcb8f750bc4e19',
- url_path: 'dataset-1',
- file_path: 'content/dataset-1/index.md',
- metadata: {
- title: 'AbuseEval v1.0',
- 'link-to-publication': 'http://www.lrec-conf.org/proceedings/lrec2020/pdf/2020.lrec-1.760.pdf',
- 'link-to-data': 'https://github.com/tommasoc80/AbuseEval',
- 'task-description': 'Explicitness annotation of offensive and abusive content',
- 'details-of-task': 'Enriched versions of the OffensEval/OLID dataset with the distinction of explicit/implicit offensive messages and the new dimension for abusive messages. Labels for offensive language: EXPLICIT, IMPLICT, NOT; Labels for abusive language: EXPLICIT, IMPLICT, NOTABU',
- 'size-of-dataset': 14100,
- 'percentage-abusive': 20.75,
- language: 'English',
- 'level-of-annotation': ['Tweets'],
- platform: ['Twitter'],
- medium: ['Text'],
- reference: 'Caselli, T., Basile, V., Jelena, M., Inga, K., and Michael, G. 2020. "I feel offended, don’t be abusive! implicit/explicit messages in offensive and abusive language". The 12th Language Resources and Evaluation Conference (pp. 6193-6202). European Language Resources Association.'
- }
- }, {
- _id: '80001dd32a752421fdcc64e91fbd237dc31d6bb3',
- url_path: 'dataset-2',
- file_path: 'content/dataset-2/index.md',
- metadata: {
- title: 'Abusive Language Detection on Arabic Social Media (Al Jazeera)',
- 'link-to-publication': 'https://www.aclweb.org/anthology/W17-3008',
- 'link-to-data': 'http://alt.qcri.org/~hmubarak/offensive/AJCommentsClassification-CF.xlsx',
- 'task-description': 'Ternary (Obscene, Offensive but not obscene, Clean)',
- 'details-of-task': 'Incivility',
- 'size-of-dataset': 32000,
- 'percentage-abusive': 0.81,
- language: 'Arabic',
- 'level-of-annotation': ['Posts'],
- platform: ['AlJazeera'],
- medium: ['Text'],
- reference: 'Mubarak, H., Darwish, K. and Magdy, W., 2017. Abusive Language Detection on Arabic Social Media. In: Proceedings of the First Workshop on Abusive Language Online. Vancouver, Canada: Association for Computational Linguistics, pp.52-56.'
- }
- }, {
- _id: '96649d05d8193f4333b10015af76c6562971bd8c',
- url_path: 'dataset-3',
- file_path: 'content/dataset-3/index.md',
- metadata: {
- title: 'CoRAL: a Context-aware Croatian Abusive Language Dataset',
- 'link-to-publication': 'https://aclanthology.org/2022.findings-aacl.21/',
- 'link-to-data': 'https://github.com/shekharRavi/CoRAL-dataset-Findings-of-the-ACL-AACL-IJCNLP-2022',
- 'task-description': 'Multi-class based on context dependency categories (CDC)',
- 'details-of-task': 'Detectioning CDC from abusive comments',
- 'size-of-dataset': 2240,
- 'percentage-abusive': 100,
- language: 'Croatian',
- 'level-of-annotation': ['Posts'],
- platform: ['Posts'],
- medium: ['Newspaper Comments'],
- reference: 'Ravi Shekhar, Mladen Karan and Matthew Purver (2022). CoRAL: a Context-aware Croatian Abusive Language Dataset. Findings of the ACL: AACL-IJCNLP.'
- }
- }]
- }
-}`,...(Se=(Ne=WithoutFacets.parameters)==null?void 0:Ne.docs)==null?void 0:Se.source}}};var Me,Re,Pe;WithFacets.parameters={...WithFacets.parameters,docs:{...(Me=WithFacets.parameters)==null?void 0:Me.docs,source:{originalSource:`{
- name: 'Catalog with facets',
- args: {
- datasets: [{
- _id: '07026b22d49916754df1dc8ffb9ccd1c31878aae',
- url_path: 'dataset-4',
- file_path: 'content/dataset-4/index.md',
- metadata: {
- title: 'Detecting Abusive Albanian',
- 'link-to-publication': 'https://arxiv.org/abs/2107.13592',
- 'link-to-data': 'https://doi.org/10.6084/m9.figshare.19333298.v1',
- 'task-description': 'Hierarchical (offensive/not; untargeted/targeted; person/group/other)',
- 'details-of-task': 'Detect and categorise abusive language in social media data',
- 'size-of-dataset': 11874,
- 'percentage-abusive': 13.2,
- language: 'Albanian',
- 'level-of-annotation': ['Posts'],
- platform: ['Instagram', 'Youtube'],
- medium: ['Text'],
- reference: 'Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592'
- }
- }, {
- _id: '42c86cf3c4fbbab11d91c2a7d6dcb8f750bc4e19',
- url_path: 'dataset-1',
- file_path: 'content/dataset-1/index.md',
- metadata: {
- title: 'AbuseEval v1.0',
- 'link-to-publication': 'http://www.lrec-conf.org/proceedings/lrec2020/pdf/2020.lrec-1.760.pdf',
- 'link-to-data': 'https://github.com/tommasoc80/AbuseEval',
- 'task-description': 'Explicitness annotation of offensive and abusive content',
- 'details-of-task': 'Enriched versions of the OffensEval/OLID dataset with the distinction of explicit/implicit offensive messages and the new dimension for abusive messages. Labels for offensive language: EXPLICIT, IMPLICT, NOT; Labels for abusive language: EXPLICIT, IMPLICT, NOTABU',
- 'size-of-dataset': 14100,
- 'percentage-abusive': 20.75,
- language: 'English',
- 'level-of-annotation': ['Tweets'],
- platform: ['Twitter'],
- medium: ['Text'],
- reference: 'Caselli, T., Basile, V., Jelena, M., Inga, K., and Michael, G. 2020. "I feel offended, don’t be abusive! implicit/explicit messages in offensive and abusive language". The 12th Language Resources and Evaluation Conference (pp. 6193-6202). European Language Resources Association.'
- }
- }, {
- _id: '80001dd32a752421fdcc64e91fbd237dc31d6bb3',
- url_path: 'dataset-2',
- file_path: 'content/dataset-2/index.md',
- metadata: {
- title: 'Abusive Language Detection on Arabic Social Media (Al Jazeera)',
- 'link-to-publication': 'https://www.aclweb.org/anthology/W17-3008',
- 'link-to-data': 'http://alt.qcri.org/~hmubarak/offensive/AJCommentsClassification-CF.xlsx',
- 'task-description': 'Ternary (Obscene, Offensive but not obscene, Clean)',
- 'details-of-task': 'Incivility',
- 'size-of-dataset': 32000,
- 'percentage-abusive': 0.81,
- language: 'Arabic',
- 'level-of-annotation': ['Posts'],
- platform: ['AlJazeera'],
- medium: ['Text'],
- reference: 'Mubarak, H., Darwish, K. and Magdy, W., 2017. Abusive Language Detection on Arabic Social Media. In: Proceedings of the First Workshop on Abusive Language Online. Vancouver, Canada: Association for Computational Linguistics, pp.52-56.'
- }
- }, {
- _id: '96649d05d8193f4333b10015af76c6562971bd8c',
- url_path: 'dataset-3',
- file_path: 'content/dataset-3/index.md',
- metadata: {
- title: 'CoRAL: a Context-aware Croatian Abusive Language Dataset',
- 'link-to-publication': 'https://aclanthology.org/2022.findings-aacl.21/',
- 'link-to-data': 'https://github.com/shekharRavi/CoRAL-dataset-Findings-of-the-ACL-AACL-IJCNLP-2022',
- 'task-description': 'Multi-class based on context dependency categories (CDC)',
- 'details-of-task': 'Detectioning CDC from abusive comments',
- 'size-of-dataset': 2240,
- 'percentage-abusive': 100,
- language: 'Croatian',
- 'level-of-annotation': ['Posts'],
- platform: ['Posts'],
- medium: ['Newspaper Comments'],
- reference: 'Ravi Shekhar, Mladen Karan and Matthew Purver (2022). CoRAL: a Context-aware Croatian Abusive Language Dataset. Findings of the ACL: AACL-IJCNLP.'
- }
- }],
- facets: ['language', 'platform']
- }
-}`,...(Pe=(Re=WithFacets.parameters)==null?void 0:Re.docs)==null?void 0:Pe.source}}};const __namedExportsOrder=["WithoutFacets","WithFacets"];export{WithFacets,WithoutFacets,__namedExportsOrder,meta as default};
-//# sourceMappingURL=Catalog.stories-ea9731da.js.map
diff --git a/packages/components/storybook-static/assets/Catalog.stories-ea9731da.js.map b/packages/components/storybook-static/assets/Catalog.stories-ea9731da.js.map
deleted file mode 100644
index 3a927e294..000000000
--- a/packages/components/storybook-static/assets/Catalog.stories-ea9731da.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Catalog.stories-ea9731da.js","sources":["../../node_modules/flexsearch/dist/flexsearch.bundle.js","../../node_modules/react-hook-form/dist/index.esm.mjs","../../src/components/Catalog.tsx"],"sourcesContent":["/**!\r\n * FlexSearch.js v0.7.21 (Bundle)\r\n * Copyright 2018-2021 Nextapps GmbH\r\n * Author: Thomas Wilkerling\r\n * Licence: Apache-2.0\r\n * https://github.com/nextapps-de/flexsearch\r\n */\n(function _f(self){'use strict';try{if(module)self=module}catch(e){}self._factory=_f;var t;function u(a){return\"undefined\"!==typeof a?a:!0}function aa(a){const b=Array(a);for(let c=0;c=this.B&&(w||!n[l])){var f=L(q,d,r),g=\"\";switch(this.G){case \"full\":if(3f;h--)if(h-f>=this.B){var k=L(q,d,r,e,f);g=l.substring(f,h);M(this,n,g,k,a,c)}break}case \"reverse\":if(2=this.B&&M(this,n,\ng,L(q,d,r,e,h),a,c);g=\"\"}case \"forward\":if(1=this.B&&M(this,n,g,f,a,c);break}default:if(this.C&&(f=Math.min(f/this.C(b,l,r)|0,q-1)),M(this,n,l,f,a,c),w&&1=this.B&&!e[l]){e[l]=1;const p=this.l&&l>f;M(this,m,p?f:l,L(g+(d/2>g?0:1),d,r,h-1,k-1),a,c,p?l:f)}}}}this.m||(this.register[a]=1)}}return this};\nfunction L(a,b,c,d,e){return c&&1=this.B&&!c[q])if(this.s||f||this.map[q])k[w++]=q,c[q]=1;else return d;a=k;e=a.length}if(!e)return d;b||(b=100);h=this.depth&&1=d)))break;if(n){if(f)return ta(k,d,0);b[b.length]=k;return}}return!c&&k}function ta(a,b,c){a=1===a.length?a[0]:[].concat.apply([],a);return c||a.length>b?a.slice(c,c+b):a}\nfunction ua(a,b,c,d){c?(d=d&&b>c,a=(a=a[d?b:c])&&a[d?c:b]):a=a[b];return a}t.contain=function(a){return!!this.register[a]};t.update=function(a,b){return this.remove(a).add(a,b)};\nt.remove=function(a,b){const c=this.register[a];if(c){if(this.m)for(let d=0,e;db||c)e=e.slice(c,c+b);d&&(e=za.call(this,e));return{tag:a,result:e}}}function za(a){const b=Array(a.length);for(let c=0,d;c element.type === 'checkbox';\n\nvar isDateObject = (value) => value instanceof Date;\n\nvar isNullOrUndefined = (value) => value == null;\n\nconst isObjectType = (value) => typeof value === 'object';\nvar isObject = (value) => !isNullOrUndefined(value) &&\n !Array.isArray(value) &&\n isObjectType(value) &&\n !isDateObject(value);\n\nvar getEventValue = (event) => isObject(event) && event.target\n ? isCheckBoxInput(event.target)\n ? event.target.checked\n : event.target.value\n : event;\n\nvar getNodeParentName = (name) => name.substring(0, name.search(/\\.\\d+(\\.|$)/)) || name;\n\nvar isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));\n\nvar isPlainObject = (tempObject) => {\n const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;\n return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));\n};\n\nvar isWeb = typeof window !== 'undefined' &&\n typeof window.HTMLElement !== 'undefined' &&\n typeof document !== 'undefined';\n\nfunction cloneObject(data) {\n let copy;\n const isArray = Array.isArray(data);\n if (data instanceof Date) {\n copy = new Date(data);\n }\n else if (data instanceof Set) {\n copy = new Set(data);\n }\n else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&\n (isArray || isObject(data))) {\n copy = isArray ? [] : {};\n if (!Array.isArray(data) && !isPlainObject(data)) {\n copy = data;\n }\n else {\n for (const key in data) {\n copy[key] = cloneObject(data[key]);\n }\n }\n }\n else {\n return data;\n }\n return copy;\n}\n\nvar compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];\n\nvar isUndefined = (val) => val === undefined;\n\nvar get = (obj, path, defaultValue) => {\n if (!path || !isObject(obj)) {\n return defaultValue;\n }\n const result = compact(path.split(/[,[\\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], obj);\n return isUndefined(result) || result === obj\n ? isUndefined(obj[path])\n ? defaultValue\n : obj[path]\n : result;\n};\n\nconst EVENTS = {\n BLUR: 'blur',\n FOCUS_OUT: 'focusout',\n CHANGE: 'change',\n};\nconst VALIDATION_MODE = {\n onBlur: 'onBlur',\n onChange: 'onChange',\n onSubmit: 'onSubmit',\n onTouched: 'onTouched',\n all: 'all',\n};\nconst INPUT_VALIDATION_RULES = {\n max: 'max',\n min: 'min',\n maxLength: 'maxLength',\n minLength: 'minLength',\n pattern: 'pattern',\n required: 'required',\n validate: 'validate',\n};\n\nconst HookFormContext = React.createContext(null);\n/**\n * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.\n *\n * @remarks\n * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)\n *\n * @returns return all useForm methods\n *\n * @example\n * ```tsx\n * function App() {\n * const methods = useForm();\n * const onSubmit = data => console.log(data);\n *\n * return (\n * \n * \n * \n * );\n * }\n *\n * function NestedInput() {\n * const { register } = useFormContext(); // retrieve all hook methods\n * return ;\n * }\n * ```\n */\nconst useFormContext = () => React.useContext(HookFormContext);\n/**\n * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.\n *\n * @remarks\n * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)\n *\n * @param props - all useFrom methods\n *\n * @example\n * ```tsx\n * function App() {\n * const methods = useForm();\n * const onSubmit = data => console.log(data);\n *\n * return (\n * \n * \n * \n * );\n * }\n *\n * function NestedInput() {\n * const { register } = useFormContext(); // retrieve all hook methods\n * return ;\n * }\n * ```\n */\nconst FormProvider = (props) => {\n const { children, ...data } = props;\n return (React.createElement(HookFormContext.Provider, { value: data }, children));\n};\n\nvar getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {\n const result = {\n defaultValues: control._defaultValues,\n };\n for (const key in formState) {\n Object.defineProperty(result, key, {\n get: () => {\n const _key = key;\n if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {\n control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;\n }\n localProxyFormState && (localProxyFormState[_key] = true);\n return formState[_key];\n },\n });\n }\n return result;\n};\n\nvar isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;\n\nvar shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {\n updateFormState(formStateData);\n const { name, ...formState } = formStateData;\n return (isEmptyObject(formState) ||\n Object.keys(formState).length >= Object.keys(_proxyFormState).length ||\n Object.keys(formState).find((key) => _proxyFormState[key] ===\n (!isRoot || VALIDATION_MODE.all)));\n};\n\nvar convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);\n\nvar shouldSubscribeByName = (name, signalName, exact) => exact && signalName\n ? name === signalName\n : !name ||\n !signalName ||\n name === signalName ||\n convertToArrayPayload(name).some((currentName) => currentName &&\n (currentName.startsWith(signalName) ||\n signalName.startsWith(currentName)));\n\nfunction useSubscribe(props) {\n const _props = React.useRef(props);\n _props.current = props;\n React.useEffect(() => {\n const subscription = !props.disabled &&\n _props.current.subject &&\n _props.current.subject.subscribe({\n next: _props.current.next,\n });\n return () => {\n subscription && subscription.unsubscribe();\n };\n }, [props.disabled]);\n}\n\n/**\n * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.\n *\n * @remarks\n * [API](https://react-hook-form.com/api/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)\n *\n * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}\n *\n * @example\n * ```tsx\n * function App() {\n * const { register, handleSubmit, control } = useForm({\n * defaultValues: {\n * firstName: \"firstName\"\n * }});\n * const { dirtyFields } = useFormState({\n * control\n * });\n * const onSubmit = (data) => console.log(data);\n *\n * return (\n * \n * );\n * }\n * ```\n */\nfunction useFormState(props) {\n const methods = useFormContext();\n const { control = methods.control, disabled, name, exact } = props || {};\n const [formState, updateFormState] = React.useState(control._formState);\n const _mounted = React.useRef(true);\n const _localProxyFormState = React.useRef({\n isDirty: false,\n isLoading: false,\n dirtyFields: false,\n touchedFields: false,\n isValidating: false,\n isValid: false,\n errors: false,\n });\n const _name = React.useRef(name);\n _name.current = name;\n useSubscribe({\n disabled,\n next: (value) => _mounted.current &&\n shouldSubscribeByName(_name.current, value.name, exact) &&\n shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) &&\n updateFormState({\n ...control._formState,\n ...value,\n }),\n subject: control._subjects.state,\n });\n React.useEffect(() => {\n _mounted.current = true;\n _localProxyFormState.current.isValid && control._updateValid(true);\n return () => {\n _mounted.current = false;\n };\n }, [control]);\n return getProxyFormState(formState, control, _localProxyFormState.current, false);\n}\n\nvar isString = (value) => typeof value === 'string';\n\nvar generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {\n if (isString(names)) {\n isGlobal && _names.watch.add(names);\n return get(formValues, names, defaultValue);\n }\n if (Array.isArray(names)) {\n return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));\n }\n isGlobal && (_names.watchAll = true);\n return formValues;\n};\n\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @example\n * ```tsx\n * const { watch } = useForm();\n * const values = useWatch({\n * name: \"fieldName\"\n * control,\n * })\n * ```\n */\nfunction useWatch(props) {\n const methods = useFormContext();\n const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};\n const _name = React.useRef(name);\n _name.current = name;\n useSubscribe({\n disabled,\n subject: control._subjects.values,\n next: (formState) => {\n if (shouldSubscribeByName(_name.current, formState.name, exact)) {\n updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));\n }\n },\n });\n const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));\n React.useEffect(() => control._removeUnmounted());\n return value;\n}\n\nvar isKey = (value) => /^\\w*$/.test(value);\n\nvar stringToPath = (input) => compact(input.replace(/[\"|']|\\]/g, '').split(/\\.|\\[/));\n\nfunction set(object, path, value) {\n let index = -1;\n const tempPath = isKey(path) ? [path] : stringToPath(path);\n const length = tempPath.length;\n const lastIndex = length - 1;\n while (++index < length) {\n const key = tempPath[index];\n let newValue = value;\n if (index !== lastIndex) {\n const objValue = object[key];\n newValue =\n isObject(objValue) || Array.isArray(objValue)\n ? objValue\n : !isNaN(+tempPath[index + 1])\n ? []\n : {};\n }\n object[key] = newValue;\n object = object[key];\n }\n return object;\n}\n\n/**\n * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.\n *\n * @remarks\n * [API](https://react-hook-form.com/api/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)\n *\n * @param props - the path name to the form field value, and validation rules.\n *\n * @returns field properties, field and form state. {@link UseControllerReturn}\n *\n * @example\n * ```tsx\n * function Input(props) {\n * const { field, fieldState, formState } = useController(props);\n * return (\n * \n *
\n *
{fieldState.isTouched && \"Touched\"}
\n *
{formState.isSubmitted ? \"submitted\" : \"\"}
\n *