Function SmartQuery

client/src/pages/metadata-query/smart-query.tsx:14–231

()

import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';

export const SmartQuery = () => {
  const defaultCenter = {
    lat: 51.505,
    lng: -0.09,
  };
  const [query, setQuery] = useState<string>('');
  const mapElement = React.useRef(null);
  const [queryEnabled, setQueryEnabled] = useState<boolean>(false);
  const [position, setPosition] = useState(defaultCenter);
  const [selectedTrack, setSelectedTrack] = useState({
    account: '',
    container: '',
    filepath: '',
  });

  const [parameters, setParameters] = useState<string>('');

  const { data: smartQueryData, status: smartQueryStatus, isFetching } = useSmartQueryMeta(query, queryEnabled);

  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
    setQueryEnabled(false);
  };

  useEffect(() => {
    if (smartQueryData) {
      // convert all parameters if strings to json objects
      let tempParameters = smartQueryData['parameters'];
      for (let key in tempParameters) {
        if (key === 'captures_geo_json' || key === 'annotations_geo_json') {
          if (typeof tempParameters[key] === 'string') {
            tempParameters[key] = JSON.parse(tempParameters[key]);
          }
        }
      }
      setParameters(JSON.stringify(tempParameters, null, 2));
    }
  }, [smartQueryData]);

  const {
    status,
    data: trackData,
    error,
  } = useQueryTrack(CLIENT_TYPE_API, selectedTrack.account, selectedTrack.container, selectedTrack.filepath);

  const [show, setShow] = useState<boolean>(trackData && trackData.length > 0);

  const handleQuery = () => {
    console.log('handleQuery');
    setQueryEnabled(true);
  };

  const handleInputQuery = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      handleQuery();
    }
  };